效果如下：

三、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；强力