Cet article est basé sur le développement de canevas de konva. Il utilise principalement l'objet Tween dans konva est l'objet principal qui contrôle l'animation des objets Konva. L'animation dans ce cas est un type d'animation interpolée : animation de rotation. Un angle de départ de 0 et un angle final de 360 degrés sont donnés. Un temps d'animation de 6 secondes est également donné. Dans le même temps, afin d'obtenir un effet de boucle, après l'exécution de chaque animation, l'animation est réinitialisée (c'est-à-dire revenue à 0 degré) et l'animation est à nouveau exécutée.
Utilisez principalement l'objet Tween dans konva. tween, en anglais, signifie entre les deux, ce qui est en fait Tweened Aniamation (l'animation entre les deux, c'est-à-dire l'animation tween). Qu’est-ce que l’animation interpolaire ? Pour parler franchement, cela vous donne un état initial et vous permet de passer progressivement à un autre état. Par exemple, spécifiez les coordonnées initiales (0, 0) et les coordonnées du point final (100, 100), et passez du point de départ au point final. Comment se déplacer ? Laissez l'ordinateur le calculer lui-même. Le processus de mouvement produira une animation de déplacement, qui est une sorte d’animation interpolée.
Tween est l'objet principal qui contrôle l'animation des objets Konva.
Tween peut contrôler tous les attributs de type numérique pour l'animation, tels que : x, y, rotation, largeur, hauteur, rayon, traitLargeur, opacité, échelleX, etc.
L'animation dans ce cas est un type d'animation interpolation : animation de rotation. Un angle de départ de 0 et un angle final de 360 degrés sont donnés. Un temps d'animation de 6 secondes est également donné. Dans le même temps, afin d'obtenir un effet de boucle, après l'exécution de chaque animation, l'animation est réinitialisée (c'est-à-dire revenue à 0 degré) et l'animation est à nouveau exécutée.
<!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>
Recommandations associées :
canvas et JS pour implémenter une animation d'horloge dynamique
JS +canvas fait une animation de rotation
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!