分享js中konva基於canvas的3d實戰開發，以旋轉五角星為例

php是最好的语言

發布： 2018-07-23 17:46:55

原創

2867 人瀏覽過

本文是konva基於canvas的開發，主要使用到konva中的Tween對象，Tween是控制Konva物件進行動畫的核心物件。本案例中的動畫就是補間動畫的一種：旋轉動畫。給定了起始角度0和終點角度360度。也給定了6秒的動畫時間，同時為了實現循環效果，在執行完每一次動畫後，重設動畫（即回到0度）和再次執行動畫。

一、效果

分享js中konva基於canvas的3d實戰開發，以旋轉五角星為例

#二、思路

主要使用到konva中的Tween對象。 tween，英文意思時兩者之間，其實就是Tweened Aniamation（兩者之間的動畫，即補間動畫）。何為補間動畫？說穿了就是給你一個初始狀態，讓你逐漸變成另一個狀態。例如，指定初始（0，0）座標和終點座標(100,100)，從起點移動到終點，至於怎麼移動？讓計算機自己計算。移動過程就會產生位移動畫，而這種位移動畫就是一種補間動畫。

Tween是控制Konva物件進行動畫的核心物件。
#Tween可以控制所有數字類型的屬性進行動畫處理，例如：x, y , rotation, width, height, radius, strokeWidth, opacity, scaleX等

本案例中的動畫就是補間動畫的一種：旋轉動畫。給定了起始角度0和終點角度360度。也給定了6秒的動畫時間，同時為了實現循環效果，在執行完每一次動畫後，重設動畫（即回到0度）和再次執行動畫。

三、程式碼

<!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>

登入後複製