动画
拓扑组件为对象提供了动画的能力，我们可以通过相关方法来为对象执行动画。
动画相关属性
object.isAnimating
当对象正在动画运行中时，该值为 true。
动画相关方法
| 方法 | 说明 |
|---|---|
object.animate(properties, options) |
为对象执行动画 |
object.stopAnimate() |
结束动画 |
object.isAnimating() |
对象是否正在执行动画 |
object.animate(properties, options)
| 参数名 | 类型 | 说明 |
|---|---|---|
| properties | object | 修改的对象属性 |
| options | object | 动画参数，具体配置参见动画参数配置 |
node.animate({
opacity: 0.5,
angle: 60
}, {
duration: 300,
reversible: true,
runCount: 3,
cosmetic: true,
finished: function() {
console.log('动画结束')
}
})
可支持动画的属性（properties）
节点
- position
- opacity
- angle
- scale
- width
- height
- fill
- stroke
- strokeWidth
连线
- stroke
- strokeWidth
动画参数配置（options）
| 配置项 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| duration | number | 一次动画的时长 | 600 |
| easing | string / function | 动画函数，参见 动画函数 | 'EaseInOutQuad' |
| reversible | boolean | 在一次动画结束时是否反向执行动画，该值为 true 会使真正执行一次动画的时间加倍 |
false |
| runCount | number | 是否重复执行动画，可被设为正整数或 Infinity |
1 |
| finished | function | 动画执行完时的回调函数 | undefined |
| cosmetic | boolean | 动画结束时的状态，该值为 true 对象将恢复为初始状态 |
false |
动画函数
动画函数的值可以是任意的 easing 函数，或使用内建的取值：'EaseInExpo' ，
'EaseInOutQuad' ，'EaseInQuad' ， 'EaseLinear' ，
'EaseOutExpo' ，'EaseOutQuad'
object.stopAnimate()
停止动画，并将对象更新至结束状态。当动画参数配置的 cosmetic 值为 true 时，对象将恢复为动画开始前的状态。
node.stopAnimate()