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();启动动画

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

<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>