一、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的封装,比较简单好用