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中添加如上代码，可以产生的效果如图：

是不是很好玩呢？

 

下面是一个行星轨迹的简单代码，大家根据代码自己进行修改，可以做出简单的行星运行轨迹动画

效果如图：