本文是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度)和再次执行动画。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>使用js canvas库konva创建补间动画 楚士岩 2018年7月19日</title> </head> <body> <p id="container"></p> <script type="text/javascript" src="js/konva/konva2.1.7/konva.js"></script> <script type="text/javascript"> var stage = new Konva.Stage({ container: "container", width: window.innerWidth, height: window.innerHeight }); var layer = new Konva.Layer(); var star = new Konva.Star({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, numPoints: 5, // 设置为五角形 innerRadius: 40, // innerRadius和outerRadius都必须设置 outerRadius: 100, fill: 'red', }); layer.add(star); var tween = new Konva.Tween({ node: star, // 需要添加补间动画的组件 duration: 6, // 持续时间 draggable: true, // 设置可以拖拽 easing: Konva.Easings.Linear, // 线性速度,即匀速 rotation: 360, // 6秒内旋转360度 onFinish: function () { // 动画完成时的回调函数 this.reset();// 重置动画 this.play(); // 重新播放动画 } /* 不能使用yoyo:true代替onFinish中的代码 因为使用yoyo,执行一圈后(6秒360度),会旋转回到原始状态, 然后再执行下一圈动画。这样就无法实现五角星循环不停的朝一个方向旋转 */ }); tween.play(); stage.add(layer); </script> </body> </html>
相关推荐:
Atas ialah kandungan terperinci 分享js中konva基于canvas的3d实战开发,以旋转五角星为例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!