Konva类库

一、Konva的整体理念

1.舞台概念的引入：整个试图（canvas展现给用户看的东西）看做一个舞台stage

2.舞台中可以绘制很多个层layer 

3.layer下面可以有很多的group

4.group下面可以有矩形、图片、其他形状等

5、在konva库中获取数据都是用方法，不是通过属性

二、Konva动画系统

1.tween对象（重点）

（1）tween是控制Konva对象进行动画的核心对象

（2）tween可以控制所有数字类型的属性进行动画处理，

• 比如：x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX等

（3）tween的控制方法

    ·tween.play()  ——  播放动画

    ·tween.pause()  ——  暂停动画

    ·tween.reverse()  ——  动画逆播放

    ·tween.reset()  ——  重置动画

    ·tween.finish()  ——  立即结束动画

（4）tween的缓动控制选项

• Konva.Easings.Linear //线性
• Konva.Easings.EaseIn //缓动，先慢后快
• Konva.Easings.EaseOut //先快后慢
• Konva.Easings.EaseInOut //两头慢，中间快
• Konva.Easings.BackEaseIn //往回来一点，然后往前冲，汽车启动类似...
• Konva.Easings.BackEaseOut
• Konva.Easings.BackEaseInOut
• Konva.Easings.ElasticEaseIn //橡皮筋 英 [ɪ'læstɪk] 美 [ɪ'læstɪk]
• Konva.Easings.ElasticEaseOut
• Konva.Easings.ElasticEaseInOut
• Konva.Easings.BounceEaseIn //弹跳；弹起，反跳；弹回 英 [baʊns] 美 [baʊns]
• Konva.Easings.BounceEaseOut
• Konva.Easings.BounceEaseInOut
• Konva.Easings.StrongEaseIn //强力
• Konva.Easings.StrongEaseOut
• Konva.Easings.StrongEaseInOut

2.动画to的使用：to就是对tween的封装，比较简单好用