微信小程序开发之——动画-Animation(3)_wx.createanimation

一 概述

• wx.createAnimation创建Animation动画实例
• wx.createAnimation时，参数的常用属性
• 动画常见动作
• 动画执行完成之后导出动画队列(export)

二 wx.createAnimation创建Animation动画实例

2.1 默认的

this.animation = wx.createAnimation()
1

2.2 自己指定参数

this.animation=wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
1
2
3
4

2.3 说明(this.animation)

this.animation：布局文件中，需要执行动画操作的对象

三 wx.createAnimation时，参数的常用属性

timingFunction(动画效果)

四 动画常见动作

• Animation.opacity：透明动画
• Animation.rotate：选择动画
• Animation.scale：缩放动画
• Animation.skew：倾斜动画
• Animation.translate：平移动画

五 动画执行过程

• this.animation = wx.createAnimation()：执行动画赋值
• 动画动作(透明、旋转、缩放等)
• this.animation…step()：表示一组动画完成
• this.animation.export()：导出动画队列。export 方法每次调用后会清掉之前的动画操作

六 示例

6.1 布局文件(index.wxml)

<view class="anim-pic">
<image src="/images/rocket.png" animation="{{animated}}"></image>
</view>
<view class="anim-btns">
  <button bindtap="rotate">旋转</button>
</view>
1
2
3
4
5
6

6.2 样式文件(index.wxss)

.anim-pic {
  width: 300rpx;
  height: 300rpx;
  margin: 40rpx auto;
}
.anim-pic image{
  width: 300rpx;
  height: 300rpx;
}
.anim-btns button{
  border: 1px solid orange;
}
1
2
3
4
5
6
7
8
9
10
11
12

6.3 逻辑文件(index.js)

Page({
  onReady: function () {
    this.animated=wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
  },
  rotate: function () {
    this.animated.rotate(Math.random()*720-360).step()
    this.setData({
      animated:this.animated.export()
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

6.4 效果图

七 参考

• 小程序官方文档—Animation