微信小程序 动画的简单实例

微信小程序——简易动画案例

wxml：

<view class="container"><view animation="{{animation}}" class="view">我在做动画</view></view><button type="primary" bindtap="translate">旋转</button> 

js：

//jsPage({ data: { }, onReady: function () {  // 页面渲染完成  //实例化一个动画  this.animation = wx.createAnimation({   // 动画持续时间，单位ms，默认值 400   duration: 400,   /**   * http://cubic-bezier.com/#0,0,.58,1    * linear 动画一直较为均匀   * ease 从匀速到加速在到匀速   * ease-in 缓慢到匀速   * ease-in-out 从缓慢到匀速再到缓慢   *    * http://www.tuicool.com/articles/neqMVr   * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过   * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过   */   timingFunction: 'ease',   // 延迟多长时间开始   delay: 100,   /**   * 以什么为基点做动画 效果自己演示   * left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%   * top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%   */   transformOrigin: 'left top 0',   success: function (res) {    console.log(res)   }  }) }, /** *位移 */ translate: function () {  //x轴位移100px  this.animation.translate(100, 0).step()  this.setData({   //输出动画   animation: this.animation.export()  }) }})

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！