网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

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

先看效果如下:

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

简单的参考代码:

wxml:

<image class='img' src="/UploadFiles/2021-04-02/gift.png">

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)
 },
})

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

上一篇:微信小程序Echarts覆盖正常组件问题解决
下一篇:vue iview多张图片大图预览、缩放翻转
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap