H5JS二维动画制作！two.js的基本操作class2

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就简单的讲解到这里了，还有更多的属性方法等着大家去开发，有什么需要改进的欢迎指导