微信小程序Animation动画的使用

1,前言


css3动画不同,小程序中动画是主要是通过js控制的,简单来说就是创建一个动画实例animation。调用实例的方法来定义动画效果。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

2,属性


首先需要通过wx.createAnimation,创建一个动画对象,该对象接收四个属性。

属性名 数据类型 默认值 必填 说明
duration number 400 动画持续时间,单位 ms
timingFunction string 'linear' 动画的效果
delay number 0 动画延迟时间,单位 ms
transformOrigin string '50% 50% 0' 动画起点

其中,timingFunction属性有七种值类型

说明
'linear' 动画从头到尾的速度是相同的
'ease' 动画以低速开始,然后加快,在结束前变慢
'ease-in' 动画以低速开始
'ease-in-out' 动画以低速开始和结束
''ease-out' 动画以低速结束
'step-start' 动画第一帧就跳至结束状态直到结束
'step-end' 动画一直保持开始状态,最后一帧跳到结束状态

例子:

let change = wx.createAnimation({ duration:500 });
change.opacity(0).step();
this.setData({
  change:change.export()
});

3,使用


使用起来需要将动画对象,绑定到元素上


然后在js文件page对象的data中定义

Page({
  data: {
    move:{},
  }
 })

因为动画对象默认接收的是px单位,如果需要使用rpx单位,比如400rpx,转换公式就是400 / 750 * wx.getSystemInfoSync().windowWidth

元素往右边移动200rpx,并且放大1.5倍的动画例子:

move(){
    let move = wx.createAnimation({ duration:200 });
    move.translateX(200 / 750 * wx.getSystemInfoSync().windowWidth).scale(1.5,1.5).step();
    this.setData({
      move:move.export()
    })
}

如果看了觉得有帮助的,我是@鹏多多11997110103,欢迎 点赞 关注 评论;
END

往期文章

  • 微信小程序自定义Tabbar,附详细源码
  • 细数JS中实用且强大的操作符&运算符
  • 微信小程序request请求的封装
  • 微信小程序API交互的自定义封装

个人主页

  • CSDN
  • GitHub
  • 博客园
  • 掘金

你可能感兴趣的:(微信小程序Animation动画的使用)