本文是konva基于canvas的开发,主要使用到konva中的Tween对象,Tween是控制Konva对象进行动画的核心对象。 本案例中的动画就是补间动画的一种:旋转动画。给定了起始角度0和终点角度360度。还给定了6秒的动画时间,同时为了实现循环效果,在执行完每一次动画后,重设动画(即回到0度)和再次执行动画。
主要使用到konva中的Tween对象。tween,英文意思时两者之间,其实就是Tweened Aniamation(两者之间的动画,即补间动画)。何为补间动画?说白了就是给你一个初始状态,让你逐渐变到另一个状态。比如,指定初始(0,0)坐标和终点坐标(100,100),从起点移动到终点,至于怎么移动?让计算机自己计算。移动过程就会产生位移动画,这种位移动画就是一种补间动画。
Tween是控制Konva对象进行动画的核心对象。
Tween可以控制所有数字类型的属性进行动画处理,比如:x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX等
本案例中的动画就是补间动画的一种:旋转动画。给定了起始角度0和终点角度360度。还给定了6秒的动画时间,同时为了实现循环效果,在执行完每一次动画后,重设动画(即回到0度)和再次执行动画。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
|
相关推荐:
Atas ialah kandungan terperinci 分享js中konva基于canvas的3d实战开发,以旋转五角星为例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!