Teilen Sie die praktische 3D-Entwicklung von Konva basierend auf Canvas in JS am Beispiel des rotierenden fünfzackigen Sterns

php是最好的语言

Freigeben： 2018-07-23 17:46:55

Original

2909 Leute haben es durchsucht

Dieser Artikel ist eine auf Canvas basierende Entwicklung. Er verwendet hauptsächlich das Tween-Objekt in Konva. Die Animation ist in diesem Fall eine Art Tween-Animation: Rotationsanimation. Gegeben ist ein Startwinkel von 0 und ein Endwinkel von 360 Grad. Gleichzeitig ist eine Animationszeit von 6 Sekunden angegeben, um einen Schleifeneffekt zu erzielen. Nach jeder Animation wird die Animation zurückgesetzt (dh auf 0 Grad zurückgesetzt) und die Animation erneut ausgeführt.

1. Wirkung

Teilen Sie die praktische 3D-Entwicklung von Konva basierend auf Canvas in JS am Beispiel des rotierenden fünfzackigen Sterns

2. Idee

Verwenden Sie hauptsächlich das Tween-Objekt in Konva.

Tween bedeutet auf Englisch zwischen den beiden, was eigentlich Tweened Aniamation (die Animation zwischen den beiden, also die Tween-Animation) ist. Was ist Tween-Animation? Um es ganz klar auszudrücken: Es gibt Ihnen einen Ausgangszustand und ermöglicht Ihnen, schrittweise in einen anderen Zustand zu wechseln. Geben Sie beispielsweise die Anfangskoordinaten (0, 0) und die Endpunktkoordinaten (100, 100) an und bewegen Sie sich vom Startpunkt zum Endpunkt. Lassen Sie den Computer es selbst berechnen. Der Bewegungsprozess erzeugt eine Verschiebungsanimation, eine Art Tween-Animation.

Tween ist das Kernobjekt, das die Animation von Konva-Objekten steuert.
Tween kann alle numerischen Typattribute für Animationen steuern, wie zum Beispiel: x, y, Drehung, Breite, Höhe, Radius, Strichbreite, Deckkraft, SkalierungX usw.

Die Animation ist in diesem Fall eine Art Tween-Animation: Rotationsanimation. Gegeben ist ein Startwinkel von 0 und ein Endwinkel von 360 Grad. Gleichzeitig ist eine Animationszeit von 6 Sekunden angegeben, um einen Schleifeneffekt zu erzielen. Nach jeder Animation wird die Animation zurückgesetzt (dh auf 0 Grad zurückgesetzt) und die Animation erneut ausgeführt.

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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Canvas und JS zur Implementierung dynamischer Uhranimationen

JS+ Leinwand Erstellen Sie eine Rotationsanimation

Das obige ist der detaillierte Inhalt vonTeilen Sie die praktische 3D-Entwicklung von Konva basierend auf Canvas in JS am Beispiel des rotierenden fünfzackigen Sterns. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!