簡單又炫酷的two.js 二維動畫教程

時間 2019-11-25

原文原文鏈接

前言javascript

S N
css

　今天呢給你們介紹一個小js框架，Two.JS。其實在本身學習的過程當中並無找到合適的教程，因此我這種學習延遲的同窗是有必定難度的，而後準備給你們整理一份，簡單易懂的小教程。html

來吧！！java

讓咱們打開TWO.JS這個二維空間之門。web

　　　　　　　　　　　　　　　　 (圖1-1)canvas

1-1簡介

Two.js 是二維畫圖腳本，它的最大優勢是支持 svg , canvas , webGL不一樣種類的技術。
（svg：SVG,簡單來講就是矢量圖，一種使用XML技術描述二維圖形的語言。)
( canvas：HTML5 <canvas> 元素用於圖形的繪製，經過腳本 (一般是JavaScript)來完成.)
( webGL：一項容許開發人員在瀏覽器裏操縱GPU來顯示圖形的技術。讓咱們一塊兒走進WebGL的世界。）
Two.js 有一個內置的動畫循環，可搭配其餘動畫庫，包含可伸縮矢量圖形解釋器。使平面形狀和動畫的建立更方便，更簡潔。

在Two.js中和Canvas、SVG都不一樣的有這麼幾個地方：瀏覽器

　　① Two.js中全部的旋轉都是以本身爲中心app

　　② Two.js中的旋轉不會累加框架

　　③ Two.js中不使用定時器，使用Two.play()方法，相似於Flash動畫（但它的底層是有定時器的，該方法每秒鐘調用60次two.update()方法）svg

Two.js的特性：

一、繪製矢量圖形 -受平面運動圖形的啓發,two.js更偏向於製做平面運動圖形，因此它不支持文本和圖片。

2 、場景圖 -基於對象。建立一個two對象,能夠隨意的操做該對象。

3 、動畫效果 - two.js自己帶有本身的動畫效果庫，也能夠和其它的動畫效果庫合做實現複雜的動畫效果。

4 、支持SVG - 它能夠建立可伸縮的矢量圖形，擴展性強，能夠和Adobe的svg工具結合畫圖。

好了很少說了！固然引入Two.js的文件是必不可少的，那下面就是 ↓

！！！引入Two.js後在Console中輸入Two可查詢是否引入成功。（以下圖 ↓）

two.js下載地址就分享給你們：https://two.js.org/ （雖然大家在網上也能找的到的，但不是仍是爲了你們的方便嘛！）

固然我是用的瀏覽器的翻譯，像我這種看英文就跟就看BUG同樣的，怎麼都得都得依靠外力。

我想你們對Two.js也是有了必定的瞭解了，那麼我也就廢話很少說了。我們一塊兒看看Two.js的神奇之處吧。

2-1繪製二維空間建立圖形

建立圖形代碼：

Two.Path
這是在two.js中建立全部可繪製形狀的基類。除非指定的方法返回其Two.Path連接目的的實例。

<body>
    <!--建立一個div做爲一個選區 也就是svg 我就是介麼理解地-->
    <div id="draw-shapes">
                        
    </div>
        
        
        
    <script type="text/javascript">
         
    var elem = document.getElementById('draw-shapes');/*原生的JS代碼 取到你所建立的Div*/
    var params = { width: 400, height: 400}; //設置二維空間的寬高
    var two = new Two(params).appendTo(elem); //新建一個在div中的二維空間
        
        
    var circle = two.makeCircle(100, 200, 45); // 建立圓形（x座標，y座標，半徑）
    var star = two.makeStar(245, 200, 65,30,5);//建立五角星（x座標，y座標，內半徑，外半徑，幾角星） 

    // 設置不一樣的樣式屬性:
    circle.fill = '#CCD0D5';  // 填充色
    circle.stroke = '#D3C294'; // 邊線顏色
    circle.linewidth = 5;// 邊線的寬度
    
    star.fill = '#FFD31C';//填充色
    star.opacity = 0.5;//透明度
    star.noStroke();//去掉邊線
    two.update();// 將生成的空間，圖形投射到網頁上，
    
    </script>
    </body>

下圖是給你們簡單整理的建立圖形的一些屬性，能夠每一個都試試仍是蠻有意思。↓↓↓

2-2組的創建與做用

組的建立與做用代碼：

　　Two.Group，就是吧兩個圖形和併到一個圖形，進行統一的設置啊什麼的。

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

下面設置的樣式與Two.Path裏面的差很少只不過多了個旋轉，把兩個圖形左右調換個位置，請看註釋，自我感受註釋地比較清楚，不理解呢請去Two.js網站對比理解。。。

var group = two.makeGroup(circle, star);
    //組能夠將數個圖形合併到一個組中，一個組能夠設置相同的屬性與效果    
    group.translation.set(two.width /2, two.height /2);
    //讓一個組內全部的形狀位移，使中心保持在二維空間的什麼位置.
    group.rotation = Math.PI;//以組中心旋轉默認值180。
    group.scale =0.75;//統一設置縮放（0——1）       
    group.linewidth = 7;//若是有邊線的統一設置線寬
    group.opacity = 1; //統一透明度（0——1）

3-1建立動畫(閃爍）

閃爍動畫代碼：

　bind能夠綁定一個函數來在函數中表達動畫屬性。

　.play() 啓動動畫

 two.bind('update', function(frameCount) {

　　// 兩個參數，第一個參數是string格式，表示要監聽的事件，第二個參數是一個函數,函數中的參數爲幀數

　　　　 }).play();  // 最後.play();啓動動畫;

↓ 閃爍代碼。（多多的嘗試，就會有不少意想不到的動畫誕生）

         two.bind('update', function(frameCount) {
          // 代碼的意思是每調用一次，執行一次two.update();  幀數爲每秒60次即每秒鐘執行60次
               
              if ( group.opacity > 0.9999) {

               group.opacity =0;//使透明度變成0，就是初始位置
          }
          
　　　　　　//設置時間與動畫變化的屬性關聯方程式
          var t = (1 - group.opacity) * 0.5;//聲明一個t變量，若是透明度能夠到1，time會變成0
          group.opacity += t;
　　　　　　//使透明度不斷+=time，第一個關係式會使time減少，因此透明度的增長速度會一點一點減慢。假設透明度能夠到1，那麼透明度會中止增長
                               
        }).play();  // 最後.play();啓動動畫;

3-1縮放旋轉動畫

縮放旋轉動畫代碼：

　注意：建立動畫以後要調整兩個圖形的 x、y 的位置，否則會出現不一樣的動畫效果呢。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                background-color: #000000;
            }
            svg{
                background-color: #FEF1F2;
            }
        </style>
        <script type="text/javascript" src="js/two.JS.js" ></script>

</head>
<body>
    <!--建立一個div做爲一個選區-->
    <div id="draw-shapes">
            
            
    </div>
        
        
        
    <script type="text/javascript">         
    var elem = document.getElementById('draw-shapes');/*原生的JS代碼 取到你所建立的Div*/
    var params = { width: 400, height: 400}; //設置二維空間的寬高
    var two = new Two(params).appendTo(elem); //新建一個在div中的二維空間    
    var circle = two.makeCircle(-72, 0, 50); // 建立圓形（x座標，y座標，半徑）
    var star = two.makeStar(75,0, 75,35,5);//建立五角星（x座標，y座標，內半徑，外半徑，幾角星） 

    // 設置不一樣的樣式屬性:
    circle.fill = '#CCD0D5';  //fill 填充色
    circle.stroke = '#D3C294'; // 邊線顏色
    circle.linewidth = 5;// 邊線的寬度
    
    star.fill = '#FFD31C';
    star.opacity = 0.5;//透明度
    star.noStroke();//去掉邊線
    
    var group = two.makeGroup(circle, star);
    //組能夠將數個圖形合併到一個組中，一個組能夠設置相同的屬性與效果    
    group.translation.set(two.width /2, two.height /2);
    //讓一個組內全部的形狀位移，使中心保持在二維空間的什麼位置.
    group.rotation = Math.PI;//以組中心旋轉默認值180。
    group.scale =0;//統一設置縮放（1——0）       
     group.linewidth = 7;//若是有邊線的統一設置線寬
     group.opacity = 1; //透明度
    two.update();// 將生成的空間，圖形投射到網頁上。
    
        // bind能夠綁定一個函數來在函數中表達動畫屬性。
    
        // 兩個參數，第一個參數是string格式，表示要監聽的事件，第二個參數是一個函數,函數中的參數爲幀數
         two.bind('update', function(frameCount) {
             
          // 代碼的意思是每調用一次，執行一次two.update();  幀數爲每秒60次即每秒鐘執行60次 
              if (group.scale > 0.9999) {
               group.scale = group.rotation = 0
               //使縮放與迴轉變成0，就是初始位置
          }
          
            //設置時間與動畫變化的屬性關聯方程式
          var t = (1 - group.scale) * 0.125;
          
          //聲明一個t變量，隨着縮放的增大而減少而且肯定其餘關係，若是縮放能夠到1，time會變成0
         
         group.scale += t;
         
          //使縮放不斷+=time，因爲縮放的增大，第一個關係式會使time減少，因此縮放的增長速度會一點一點減慢。假設縮放能夠到1，那麼縮放會中止增長
         
         group.rotation += t * 4* Math.PI;//迴轉幅度不斷+=time的4倍(math.pi是180度)
        
          
        }).play();  // 最後.play();啓動動畫;
       
     
    </script>
    </body>
</html>

(圖 1-1) 代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                background-color: #000000;
            }
            svg{
                background-color: #FEF1F2;
            }
        </style>
        <script type="text/javascript" src="js/two.JS.js" ></script>

</head>
<body>
    <!--建立一個div做爲一個選區-->
    <div id="draw-shapes">
            
            
    </div>
        
        
        
    <script type="text/javascript">         
    var elem = document.getElementById('draw-shapes');/*原生的JS代碼 取到你所建立的Div*/
    var params = { width: 400, height: 400}; //設置二維空間的寬高
    var two = new Two(params).appendTo(elem); //新建一個在div中的二維空間    
    var circle = two.makeCircle(-72, 0, 50); // 建立圓形（x座標，y座標，半徑）
    var star = two.makeStar(75,0, 75,35,5);//建立五角星（x座標，y座標，內半徑，外半徑，幾角星） 

    // 設置不一樣的樣式屬性:
    circle.fill = '#CCD0D5';  //fill 填充色
    circle.stroke = '#D3C294'; // 邊線顏色
    circle.linewidth = 5;// 邊線的寬度
    
    star.fill = '#FFD31C';
    star.opacity = 0.5;//透明度
    star.noStroke();//去掉邊線
    
    var group = two.makeGroup(circle, star);
    //組能夠將數個圖形合併到一個組中，一個組能夠設置相同的屬性與效果    
    group.translation.set(two.width /2, two.height /2);
    //讓一個組內全部的形狀位移，使中心保持在二維空間的什麼位置.
    group.rotation = Math.PI;//以組中心旋轉默認值180。
    group.scale =0;//統一設置縮放（1——0）       
     group.linewidth = 7;//若是有邊線的統一設置線寬
     group.opacity = 1; //透明度
    two.update();// 將生成的空間，圖形投射到網頁上。
    
        // bind能夠綁定一個函數來在函數中表達動畫屬性。
    
        // 兩個參數，第一個參數是string格式，表示要監聽的事件，第二個參數是一個函數,函數中的參數爲幀數
         two.bind('update', function(frameCount) {
             
          // 代碼的意思是每調用一次，執行一次two.update();  幀數爲每秒60次即每秒鐘執行60次 
              if (group.scale > 0.9999) {
               group.scale = group.rotation = 0
               //使縮放與迴轉變成0，就是初始位置
          }
          
            //設置時間與動畫變化的屬性關聯方程式
          var t = (1 - group.scale) * 0.125;
          
          //聲明一個t變量，隨着縮放的增大而減少而且肯定其餘關係，若是縮放能夠到1，time會變成0
         
         group.scale += t;
         
          //使縮放不斷+=time，因爲縮放的增大，第一個關係式會使time減少，因此縮放的增長速度會一點一點減慢。假設縮放能夠到1，那麼縮放會中止增長
         
         group.rotation += t * 4* Math.PI;//迴轉幅度不斷+=time的4倍(math.pi是180度)
        
          
        }).play();  // 最後.play();啓動動畫;
       
     
    </script>
    </body>
</html>