效果如下：

三、Konva 动画

1. tween 对象

使用动画时必须先实例化 Konva.tween 对象创建补间动画，然后执行 play() 运行动画；tween 是控制 Konva 对象进行动画的核心对象，它可以控制所有数字类型的属性进行动画处理，比如：x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX 等。

如下是一个基本的 tween 创建动画的例子：

var tween = new Konva.Tween({

node: rect, //要使用动画的Konva对象

x: 300,

y:300,

rotation: 360, //旋转

duration: 1, //持续时间

easing: Konva.Easings.EaseIn, //动画效果

yoyo: true, //是否进行循环播放

......

onFinish: function() { //动画执行结束后，执行此方法

}

});

tween.play(); //启动动画

除用 play() 方法启动动画之外，tween 还有以下参数可供使用：

tween.play()；播放动画

tween.pause()；暂停动画

tween.reverse()；动画逆播放

tween.reset()；重置动画

tween.finish()；立即结束动画

动画的效果也有多种：

Konva.Easings.Linear；线性

Konva.Easings.EaseIn；缓动，先慢后快

Konva.Easings.EaseOut；先快后慢

Konva.Easings.EaseInOut；两头慢，中间快

Konva.Easings.BackEaseIn；往回一点，然后往前冲

Konva.Easings.BackEaseOut

Konva.Easings.BackEaseInOut

Konva.Easings.ElasticEaseIn；橡皮筋

Konva.Easings.ElasticEaseOut

Konva.Easings.ElasticEaseInOut

Konva.Easings.BounceEaseIn；弹跳

Konva.Easings.BounceEaseOut

Konva.Easings.BounceEaseInOut

Konva.Easings.StrongEaseIn；强力

Konva.Easings.StrongEaseOut

Konva.Easings.StrongEaseInOut

2. 动画 to 方法的使用

在实际的开发过程中，如果每次使用动画都先实例化 Konva.tween，在 play() 启动动画，这样是很麻烦的，而且效率不高。而 Konva 也为开发者提供了更为简便的方式，那就是 to，to 其实就是对 tween 的封装。

在使用 to 时我们不必再去实例化 Konva.tween 对象，直接在需要添加动画的对象后面 .to{ } 创建相关属性即可。

如下是使用动画的两种方式对比：

效果如下：

3. 循环播放动画

循环播放主要是结合 tween 配合 onFinish 事件中的 reset()重置动画 和 play()播放动画，达到循环播放的效果。

如下简单案例：

效果如下：

四、案例：使用 Konva 绘制进度条

具体思路就是：绘制一个外部矩形，一个内部矩形，再为内部矩形添加动画，宽度由 0 变为外部矩形的宽度。