Partagez le développement 3D pratique de konva basé sur Canvas en js, en prenant comme exemple l'étoile rotative à cinq branches

php是最好的语言

Libérer： 2018-07-23 17:46:55

original

2910 Les gens l'ont consulté

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.

1. Effet

Partagez le développement 3D pratique de konva basé sur Canvas en js, en prenant comme exemple létoile rotative à cinq branches

2.Idé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.

3. Code

<!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: &#39;red&#39;,
    });
    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>

Copier après la connexion

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!