回転する五芒星を例として、js のキャンバスに基づいた konva の実践的な 3D 開発を共有します。

php是最好的语言

リリース： 2018-07-23 17:46:55

オリジナル

2910 人が閲覧しました

この記事は、Canva をベースにした konva の開発です。Tween は、Konva オブジェクトのアニメーションを制御するコアオブジェクトです。この場合のアニメーションは、トゥイーンアニメーションの一種である回転アニメーションです。開始角度 0 と終了角度 360 度が与えられます。同時に、ループ効果を実現するために、アニメーション時間が 6 秒に設定され、アニメーションが実行されるたびにアニメーションがリセットされ (つまり、0 度に戻され)、アニメーションが再度実行されます。

1. 効果

回転する五芒星を例として、js のキャンバスに基づいた konva の実践的な 3D 開発を共有します。

2. アイデア

主にkonvaのTweenオブジェクトを使用します。トゥイーンとは、英語で「2 つの間の」という意味で、実際には Tweened Animation (2 つの間のアニメーション、つまりトゥイーンアニメーション) のことです。トゥイーンアニメーションとは何ですか？率直に言うと、初期状態を提供し、徐々に別の状態に変更できるようにします。例えば、初期座標(0,0)と終点座標(100,100)を指定して、始点から終点まで移動するにはどうすればよいでしょうか。コンピューターに自動で計算させましょう。移動プロセスでは、トゥイーンアニメーションの一種であるディスプレイスメントアニメーションが生成されます。

Tween は、アニメーション用の Konva オブジェクトを制御するコアオブジェクトです。
Tween は、x、y、回転、幅、高さ、半径、ストローク幅、不透明度、スケール X など、アニメーション処理のすべての数値型属性を制御できます。この場合のアニメーションはトゥイーンアニメーションの一種、回転アニメーションです。開始角度 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: &#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>

ログイン後にコピー