大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么在微信小程序中实现循环动画效果

怎么在微信小程序中实现循环动画效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

成都创新互联专业为企业提供蓟州网站建设、蓟州做网站、蓟州网站设计、蓟州网站制作等企业网站建设、网页设计与制作、蓟州企业网站模板建站服务,十余年蓟州做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

微信官方API学习

wx.createAnimation(OBJECT)

说明:创建一个动画实例animation。调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

属性方法:

怎么在微信小程序中实现循环动画效果 

主要说明一下:timingFunction

怎么在微信小程序中实现循环动画效果 

通过上述中的timingFunction值,可以设置动画的执行效果。

动画和动画方法

怎么在微信小程序中实现循环动画效果 

注:旋转、缩放、偏移、倾斜、矩阵变形等API本文不在介绍,可参考官方API。

效果实现

通过上文的介绍,结合官方API文档,已经对创建动画的方法有了基本了解,接下来,开始实现效果图中的动画效果。

1.wxml文件添加动画属性

在wxml中创建一个布局,添加动画属性:


 关注公众号

2.JS中动画效果实现

Page({
 data: {
  attentionAnim: '',
  //....其他配置
 },
 /**
  * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
  var attentionAnim = wx.createAnimation({
   duration: 150,
   timingFunction: 'ease',
   delay: 0
  })
  //设置循环动画
  this.attentionAnim = attentionAnim
  var next = true;
  setInterval(function () {
   if (next) {
    //根据需求实现相应的动画
    this.attentionAnim.rotate(3).step()
    next = !next;
   } else {
    this.attentionAnim.rotate(-3).step()
    next = !next;
   }
   this.setData({
    //导出动画到指定控件animation属性
    attentionAnim: attentionAnim.export()
   })
  }.bind(this), 150)
 },
//....

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


网站名称:怎么在微信小程序中实现循环动画效果
分享地址:http://dzwzjz.com/article/gjddhg.html
在线咨询
服务热线
服务热线:028-86922220
TOP