微信小程序图片左右摆动效果详解

 更新时间:2019年07月13日 14:43:50   作者:祈澈菇凉   我要评论

这篇文章主要介绍了微信小程序图片左右摆动效果详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

先看效果,实现一个图片左右摇动,在一般的H5宣传页,商家活动页面我们会看到这样的动画,小程序的动画效果不同于css3动画效果,是通过js来完成的,其实步骤很简单,首先创建动画实例,再调用实例来描述动画,最后导出即可。

先看效果如下:

简单的参考代码:

wxml:

<image class='img' src="http://intmote.com/picture/gift.png" animation="{{animation}}"></image>

css:

.img {
 width: 120rpx;
 height: 120rpx;
 margin:300rpx;
}

js

Page({
 data: {
  animation: {},
 },
 onLoad: function () {
 },
 onShow: function () {
  // 1: 创建动画实例animation:
  var animation = wx.createAnimation({
   duration: 500,
   timingFunction: 'ease',
  })
  this.animation = animation
  var next = true;
  //连续动画关键步骤
  setInterval(function () {
   //2: 调用动画实例方法来描述动画
   if (next) {
    animation.translateX(4).step();
    animation.rotate(19).step()
    next = !next;
   } else {
    animation.translateX(-4).step();
    animation.rotate(-19).step()
    next = !next;
   }
   //3: 将动画export导出,把动画数据传递组件animation的属性 
   this.setData({
    animation: animation.export()
   })
  }.bind(this), 300)
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • 关于JavaScript作用域你想知道的一切

    关于JavaScript作用域你想知道的一切

    关于JavaScript作用域你想知道的一切,本文全部告诉大家,帮助大家全面的了解JavaScript作用域,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • js下通过prototype扩展实现indexOf的代码

    js下通过prototype扩展实现indexOf的代码

    这里使用js prototype扩展实现的indexOf的实现代码,跟js自带的方法,差不多。
    2010-12-12
  • GRID拖拽行的实例代码

    GRID拖拽行的实例代码

    这篇文章介绍了GRID拖拽行的实例代码,有需要的朋友可以参考一下
    2013-07-07
  • js 判断附件后缀的简单实现方法

    js 判断附件后缀的简单实现方法

    下面小编就为大家带来一篇js 判断附件后缀的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 第十篇BootStrap轮播插件使用详解

    第十篇BootStrap轮播插件使用详解

    Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式。本文给大家介绍BootStrap轮播插件使用详解,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • js操作二进制数据方法

    js操作二进制数据方法

    下面小编就为大家分享一篇js操作二进制数据方法,具有很好的参考价值,希望对的大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 一个js实现的所谓的滑动门

    一个js实现的所谓的滑动门

    一个js实现的所谓的滑动门...
    2007-05-05
  • JS弹出窗口代码大全(详细整理)

    JS弹出窗口代码大全(详细整理)

    如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,平时利用业余时间整理了一些,需要的朋友可以参考一下
    2012-12-12
  • 从数组中随机取x条不重复数据的JS代码

    从数组中随机取x条不重复数据的JS代码

    这篇文章主要介绍了从数组中随机取x条不重复数据的JS代码,有需要的朋友可以参考一下
    2013-12-12
  • js控制的遮罩层实例介绍

    js控制的遮罩层实例介绍

    把项目里很土的弹窗,改成了遮罩层显示,现在感觉好多了。在这里创建一个div和body一样大小,这样就可以把整个页面全部盖住了,具体实现祥看本文,希望可以帮助到你
    2013-05-05

最新评论