suchen

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

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

php是最好的语言
php是最好的语言Original
2018-07-23 17:46:552886Durchsuche

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>

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!

循环 数字类型 JS 对象 canvas
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Sie müssen die relevante Syntax zum Erstellen regulärer Ausdrücke über das Literal RegExp in JS verstehenNächster Artikel：Sie müssen die relevante Syntax zum Erstellen regulärer Ausdrücke über das Literal RegExp in JS verstehen

In Verbindung stehende Artikel

Mehr sehen