### 动画
OkayPainter提供了元素的动画机制，用户可以继承Action类自定义动画。
### 自定义动画
~~~
class ActionColor extends okay.Action {
constructor(_duration) {
super(_duration)
this.delta = new okay.Color(Math.round(255/ this.duration), Math.round(255/ this.duration),Math.round(255/ this.duration),Math.round(255/ this.duration))
}
update(_sprite, frame) {
let color = _sprite.color
color.sub(this.delta)
}
}
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let circle = new okay.Circle(100)
circle.setPosition(300, 300)
circle.setColor(new okay.Color(255,255,255,255))
let color = new ActionColor(5)
canvas.addChild(circle);
circle.runAction(color)
canvas.paint()
~~~
上面的例子我们定义了一个ActionColor继承Action类，并重写了update方法，update接受一个执行动画的元素与动画帧数。该动画实现了圆颜色在5秒内从白变为黑的过程。
**值得注意的是，在`circle.runAction(color)`之前，circle必须已经在加入到容器中。**
### OkayPainter内置动画
#### ActionMove （平移动画）
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let circle = new okay.Circle(100)
circle.setPosition(300, 300)
circle.setColor(new okay.Color(255,0,0,255))
let action = new okay.ActionMove(5,new okay.Point(100,100))
canvas.addChild(circle);
circle.runAction(action)
canvas.paint()
~~~
上述代码实现了圆5秒内从点（300，300）平移到（100，100）
#### ActionScale （缩放动画）
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let circle = new okay.Circle(100)
circle.setPosition(300, 300)
circle.setColor(new okay.Color(255,0,0,255))
let action = new okay.ActionScale(5,0.8,0.8)
canvas.addChild(circle);
circle.runAction(action)
canvas.paint()
~~~
上述代码实现了圆在X方向和Y方向缩放为原来的80%。
#### ActionRotate （旋转动画）
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let circle = new okay.Circle(100)
circle.setPosition(300, 300)
circle.setColor(new okay.Color(255,0,0,255))
let action = new okay.ActionRotate(5,30)
canvas.addChild(circle);
circle.runAction(action)
canvas.paint()
~~~
上述代码实现了圆在画布上旋转了30度
#### ActionAlpha （透明度动画）
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let circle = new okay.Circle(100)
circle.setPosition(300, 300)
circle.setColor(new okay.Color(255,0,0,255))
let action = new okay.ActionAlpha(5,0.6)
canvas.addChild(circle);
circle.runAction(action)
canvas.paint()
~~~
上述代码实现了圆在5秒内透明度变化为0.6
### 多个动画组合
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let circle = new okay.Circle(100)
circle.setPosition(300, 300)
circle.setColor(new okay.Color(255,0,0,255))
let action = new okay.ActionAlpha(5,0.6)
let action1 = new okay.ActionMove(5, new okay.Point(100,100))
canvas.addChild(circle);
circle.runAction(action)
circle.runAction(action1)
canvas.paint()
~~~
上述代码实现了圆在5秒内从点（300，300）平移到（100，100），并且透明度变为0.6。
