# 动画
# 常用的动画方式：
- 使用 CSS 渐变 和 CSS 动画 创建界面动画
- 使用 qa.createAnimation 接口创建动画
- 使用 QJS 响应事件 的方式，动态调整节点的 style 属性达到动画的效果
- 连续使用 setData 来改变界面的方法也可以达到动画的效果，但通常会产生较大的延迟和卡顿
qa.createAnimation 使用示例：
<view class="page-section">
<view class="animation-element-wrapper">
<view class="animation-element" animation="{{animation}}"></view>
</view>
<button class="animation-button" bindtap="rotate">旋转</button>
</view>
1
2
3
4
5
6
2
3
4
5
6
Page({
data: {
animation: ''
},
onReady() {
this.animation = qa.createAnimation()
},
rotate() {
this.animation.rotate(Math.random() * 720 - 360).step()
this.setData({ animation: this.animation.export() })
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 动画事件
可以使用 bindtransitionend bindanimationstart bindanimationiteration bindanimationend 监听动画事件。
| 事件名 | 含义 |
|---|---|
| transitionend | CSS 渐变结束或 qa.createAnimation 结束一个阶段 |
| animationstart | CSS 动画开始 |
| animationiteration | CSS 动画结束一个阶段 |
| animationend | CSS 动画结束 |
注意：这几个事件都不是冒泡事件。
←
→
在线客服