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>
复制代码

效果如图: