网络编程
位置：首页>> 网络编程>> JavaScript>> 微信小程序图片左右摆动效果详解

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

作者：祈澈菇凉　　发布时间：2023-08-09 13:34:31　

标签：微信,小程序,图片,摆动

先看效果，实现一个图片左右摇动，在一般的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)
},
})

来源：https://www.jianshu.com/p/e0b7af1b586c

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com