H5+JS二維動畫製作的一個實例

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

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

下載網址如下：

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

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

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

  = { width: , height:  }; 

 two =  Two().appendTo(elem);

建立圖形：

var circle = two.makeCircle(72, 100, 50);//创建圆形（x坐标，y坐标，半径）var rect = two.makeRectangle(213, 100, 100, 100);//创建矩形（x，y，宽，高）

三：調整圖形屬性：

circle.fill = ;circle.stroke = ; circle.linewidth = ;circle.opacity = ;= = = = ;
　　　　 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;//统一设置线宽

透過以上指令對群組內所有形狀進行相同的動作

 

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

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

學會了的小夥伴記得按讚哦！

 

以上是H5+JS二維動畫製作的一個實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！