首頁 > web前端 > js教程 > 分享js中konva基於canvas的3d實戰開發,以旋轉五角星為例

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

php是最好的语言
發布: 2018-07-23 17:46:55
原創
2910 人瀏覽過

本文是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>
登入後複製

 相關推薦:

canvas與JS實作動態時鐘動畫

JS canvas做出圍繞旋轉動畫

以上是分享js中konva基於canvas的3d實戰開發,以旋轉五角星為例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板