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

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

wxml：

rush:xml;">

js：

rush:js;"> //js Page({ data: {

},onReady: function () {
// 页面渲染完成
//实例化一个动画
this.animation = wx.createAnimation({
// 动画持续时间，单位ms，默认值 400
duration: 400,/**

• http://cubic-bezier.com/#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()
})
}

})

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