H5JS二維動畫製做！two.js的基本操做class2

上一節咱們講到如何建立圖形與創建組，這節咱們具體講解如何構建動畫效果

　　　　 var elem = document.getElementById('draw-animation');
        var two = new Two({ width: 285, height: 200 }).appendTo(elem);

        var circle = two.makeCircle(-70, 0, 50);
        var rect = two.makeRectangle(70, 0, 100, 100);
        circle.fill = '#FF8000';
        circle.stroke = 'orangered';
        rect.fill = 'rgba(0, 200, 255, 0.75)';
        rect.stroke = '#1C75BC';
        
        
        var group = two.makeGroup(circle, rect);
        group.translation.set(two.width / 2, two.height / 2);
        group.linewidth =5;
        two.update();

根據以前的講解，先繪製出如圖的兩個形狀

建立一個由小到大並旋轉的動畫，須要先將圖形縮小

group.scale = 0.1;

建立動畫的代碼以下：

　　　　 // bind能夠綁定一個函數來在函數中表達動畫屬性
        // 兩個參數，第一個參數是string格式，表示要監聽的事件，第二個參數是一個函數,函數中的參數爲幀數
        two.bind('update', function(frameCount) {
          // 代碼的意思是每調用一次，執行一次two.update();  幀數爲每秒60次即每秒鐘執行60次

          if (group.scale > 0.9999) {
            group.scale = 0.1;//使縮放與迴轉變成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度)
        
          
        });
        
        two.play();  // 最後.play();啓動動畫

這裏須要注意，two.play()與two.update()不能同時使用，會失去效果，因此使用two.play()之後，要把原來的two.update()刪掉

如上代碼的動畫效果如圖

若是想本身進行修改，須要對下面的方程式進行自我調整，好比說要添加一個透明度的效果

          if(group.opacity<0){
              group.opacity=1;
          }
          group.opacity -= 0.01;

在bind中添加如上代碼，能夠產生的效果如圖：

是否是很好玩呢？

 

下面是一個行星軌跡的簡單代碼，你們根據代碼本身進行修改，能夠作出簡單的行星運行軌跡動畫

<script type="text/javascript">
        var elem = document.getElementById('draw-animation');
        var two = new Two({ width: 700, height: 700 }).appendTo(elem);
        //track 外層大運行軌跡
        var track = two.makeCircle(0, 0, 200);
        track.fill='transparent';//透明的
        track.stroke='#3366FF';
        track.linewidth=3;
        //恆星
        var sun = two.makeCircle(0,0,80);
        sun.fill='#FF8000';
        sun.stroke='#FF0000';
        sun.linewidth=5;
        //地球
        var earth = two.makeCircle(0,0,50);
        earth.fill='#9ACD32';
        //月球
        var moon = two.makeCircle(100,0,30);
        moon.fill='#1C75BC';
        //inline 小的運行軌跡
        var inline = two.makeCircle(0,0,100);
        inline.stroke='#3366FF';
        inline.fill='transparent';
        inline.linewidth=3;
        //group 分組 一類型爲一組
        var group = two.makeGroup(inline,earth,moon);
        
        var group1 = two.makeGroup(sun,track,group);
        
        
        group1.translation.set(two.width / 2, two.height / 2); //總體向什麼方位平移
        group.translation.set(200, 0); 
        group.scale = 0.7; //比例
        
        
        two.bind('update', function(frameCount) {//執行動畫

        
           group1.rotation += 0.003 *2* Math.PI;
           group.rotation += 0.003 * Math.PI;

           
        }).play();
        
    </script>

效果如圖：

 

那麼two.js就簡單的講解到這裏了，還有更多的屬性方法等着你們去開發，有什麼須要改進的歡迎指導