H5JS二維動畫製作！two.js的基本操作class1

標籤：order   stroke   點贊   旋轉   over   pes   rip   技術   white   

今天介紹一個網路上並不常用的外掛程式two.js，剛開始學習的過程中，發現網上並沒有合適的教程，在此發表基本操作

two.js是一款網頁二維繪圖軟體，可以在指定地區內產生自設的各種動畫效果

下載網址如下： https://two.js.org/#download

class1：

一：如何使用：

首先在頁面中引入js檔案：

    <script src="js/two.js" type="text/javascript" charset="utf-8"></script>

開啟網頁控制台console，輸入Two，如果返回一個數組，證明已生效，

建立一個div，作為選區

<div id="draw-shapes"></div>        <style type="text/css">                        #draw-shapes{                border: 1px  solid blue;                width: 400px;                height: 300px;                background-color: green;            }                </style>    

在JS中選取上面的div

var elem = document.getElementById(‘draw-shapes‘);//選中頁面上的div

二：建立空間與空間中的形狀：

完成上述操作以後，進行建立二維空間操作

var params = { width: 300, height: 200 };//二維空間寬高（overflow hidden） 

var two = new Two(params).appendTo(elem);//建立一個在div中的二維空間

建立圖形：

var circle = two.makeCircle(72, 100, 50);//建立圓形（x座標，y座標，半徑）var rect = two.makeRectangle(213, 100, 100, 100);//建立矩形（x，y，寬，高）

三：調整圖形屬性：

// 具體設定不同的屬性        circle.fill = ‘#FF8000‘;//fill填充色        circle.stroke = ‘red‘; // 邊線顏色        circle.linewidth = 5;//邊線寬        circle.opacity = 0.5;//透明度                rect.fill = ‘blue‘;        rect.opacity = 0.75;        rect.stroke = "white";        rect.linewidth = 5;
　　　　 rect.noStroke();//去掉邊線

四：投射到網頁上：

將產生的空間，圖形投射到網頁上，需要輸入如下指令：

two.update();

在網頁中的效果

五：組的作用與建立：

組可以將數個圖形合并到一個組中，一個組可以設定相同的屬性與效果

在建立完圖形之後，可以執行如下代碼：

var group = two.makeGroup(circle, rect);

將兩個圖形放到一個組中

// 可以對組內所有形狀進行屬性設定        group.translation.set(two.width / 2, two.height / 2);//讓一個組內所有的形狀位移，使中心保持在二維空間的什麼位置        group.rotation = Math.PI;//旋轉        group.scale = 0.75;//縮放                group.linewidth = 7;//統一設定線寬

通過以上指令對組內所有形狀進行相同的操作

 

 為操作後的兩個形狀的效果。

今天就先介紹這麼多，下次會詳細說明如何形成動畫效果

學會了的小夥伴記得點贊哦！

 

H5JS二維動畫製作！two.js的基本操作class1