이 글은 캔버스 기반의 Konva 개발입니다. Konva에서는 Tween 객체를 주로 사용합니다. Tween은 Konva 객체의 애니메이션을 제어하는 핵심 객체입니다. 이 경우 애니메이션은 일종의 트윈 애니메이션인 회전 애니메이션입니다. 시작 각도는 0이고 끝 각도는 360도입니다. 동시에 6초의 애니메이션 시간이 주어지며, 동시에 루프 효과를 얻기 위해 각 애니메이션이 실행된 후 애니메이션이 재설정(즉, 0도로 돌아감)되고 다시 애니메이션이 실행됩니다.
3. 코드
<!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>
canvas 및 JS를 사용하여 동적 시계 애니메이션 구현
#🎜🎜 #
위 내용은 회전하는 다섯개 별을 예로 들어 JS 캔버스 기반 Konva의 실용적인 3D 개발을 공유합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!