评论

微信小程序animation的基础用法

animation的使用

需求:关于菜单栏的固定后,切换样式不固定时菜单栏上部分的内容出现得比较快,不流畅,特此添加一个动画特效。

//创建一个动画实例
var animation = wx.createAnimation({
          duration: 450, //持续时间
          timingFunction: 'linear'//“运动”的方式
          delay: 多久后动画开始运行
          opacity(0.2) 慢慢变透明
          translate(100, -100) 向X轴移动100的同时向Y轴移动-100
})
//


step(): 代表一组动画完成

这段代码代表6组动画,会依次执行

          animation.top(10 + "rpx").step()
          animation.top(10* 1.25 + "rpx").step()
          animation.top(10 * 1.5 + "rpx").step()
          animation.top(10 * 2 + "rpx").step()
          animation.top(10 * 2.25 + "rpx").step()
          animation.top(10 * 2.5 + "rpx").step()


这段代码代表同时执行这个三个操作

animation.top(10 + "rpx").step().top(10 * 1.25 + "rpx").step().top(10 * 1.5 + "rpx").step()


这段代码是将动画绑定到对应的view

_this.setData({
            animationData: animation.export(),
})
<view class="{{isHidden?'':'contentFix'}}" animation='{{animationData}}'>


初次使用animation,望前辈们多多指教

最后一次编辑于  11-26  
点赞 0
收藏
评论

1 个评论

  • 小鸡叫叫
    小鸡叫叫
    11-26

    哥们,是因为css动画不够用了么,个人更偏好先用css再想其他办法

    11-26
    赞同
    回复 3
    • liang――
      liang――
      11-26
      是的啊,animation需要通过一个值去触发
      11-26
      回复
    • 小鸡叫叫
      小鸡叫叫
      11-26回复liang――
      我的话 会监听到这个值 挂类名 -。 -
      11-26
      回复
    • liang――
      liang――
      11-26回复小鸡叫叫
      我也尝试过这个方案,关键是top值是动态获取的
      11-26
      回复