简单又炫酷的two.js 二维动画教程

时间 2019-11-25

原文原文链接

前言javascript

S N
css

　今天呢给你们介绍一个小js框架，Two.JS。其实在本身学习的过程当中并无找到合适的教程，因此我这种学习延迟的同窗是有必定难度的，而后准备给你们整理一份，简单易懂的小教程。html

来吧！！java

让咱们打开TWO.JS这个二维空间之门。web

　　　　　　　　　　　　　　　　 (图1-1)canvas

1-1简介

Two.js 是二维画图脚本，它的最大优势是支持 svg , canvas , webGL不一样种类的技术。
（svg：SVG,简单来讲就是矢量图，一种使用XML技术描述二维图形的语言。)
( canvas：HTML5 <canvas> 元素用于图形的绘制，经过脚本 (一般是JavaScript)来完成.)
( webGL：一项容许开发人员在浏览器里操纵GPU来显示图形的技术。让咱们一块儿走进WebGL的世界。）
Two.js 有一个内置的动画循环，可搭配其余动画库，包含可伸缩矢量图形解释器。使平面形状和动画的建立更方便，更简洁。

在Two.js中和Canvas、SVG都不一样的有这么几个地方：浏览器

　　① Two.js中全部的旋转都是以本身为中心app

　　② Two.js中的旋转不会累加框架

　　③ Two.js中不使用定时器，使用Two.play()方法，相似于Flash动画（但它的底层是有定时器的，该方法每秒钟调用60次two.update()方法）svg

Two.js的特性：

一、绘制矢量图形 -受平面运动图形的启发,two.js更偏向于制做平面运动图形，因此它不支持文本和图片。

2 、场景图 -基于对象。建立一个two对象,能够随意的操做该对象。

3 、动画效果 - two.js自己带有本身的动画效果库，也能够和其它的动画效果库合做实现复杂的动画效果。

4 、支持SVG - 它能够建立可伸缩的矢量图形，扩展性强，能够和Adobe的svg工具结合画图。

好了很少说了！固然引入Two.js的文件是必不可少的，那下面就是 ↓

！！！引入Two.js后在Console中输入Two可查询是否引入成功。（以下图 ↓）

two.js下载地址就分享给你们：https://two.js.org/ （虽然大家在网上也能找的到的，但不是仍是为了你们的方便嘛！）

固然我是用的浏览器的翻译，像我这种看英文就跟就看BUG同样的，怎么都得都得依靠外力。

我想你们对Two.js也是有了必定的了解了，那么我也就废话很少说了。我们一块儿看看Two.js的神奇之处吧。

2-1绘制二维空间建立图形

建立图形代码：

Two.Path
这是在two.js中建立全部可绘制形状的基类。除非指定的方法返回其Two.Path连接目的的实例。

<body>
    <!--建立一个div做为一个选区 也就是svg 我就是介么理解地-->
    <div id="draw-shapes">
                        
    </div>
        
        
        
    <script type="text/javascript">
         
    var elem = document.getElementById('draw-shapes');/*原生的JS代码 取到你所建立的Div*/
    var params = { width: 400, height: 400}; //设置二维空间的宽高
    var two = new Two(params).appendTo(elem); //新建一个在div中的二维空间
        
        
    var circle = two.makeCircle(100, 200, 45); // 建立圆形（x坐标，y坐标，半径）
    var star = two.makeStar(245, 200, 65,30,5);//建立五角星（x坐标，y坐标，内半径，外半径，几角星） 

    // 设置不一样的样式属性:
    circle.fill = '#CCD0D5';  // 填充色
    circle.stroke = '#D3C294'; // 边线颜色
    circle.linewidth = 5;// 边线的宽度
    
    star.fill = '#FFD31C';//填充色
    star.opacity = 0.5;//透明度
    star.noStroke();//去掉边线
    two.update();// 将生成的空间，图形投射到网页上，
    
    </script>
    </body>

下图是给你们简单整理的建立图形的一些属性，能够每一个都试试仍是蛮有意思。↓↓↓

2-2组的创建与做用

组的建立与做用代码：

　　Two.Group，就是吧两个图形和并到一个图形，进行统一的设置啊什么的。

var group = two.makeGroup(circle, star);

下面设置的样式与Two.Path里面的差很少只不过多了个旋转，把两个图形左右调换个位置，请看注释，自我感受注释地比较清楚，不理解呢请去Two.js网站对比理解。。。

var group = two.makeGroup(circle, star);
    //组能够将数个图形合并到一个组中，一个组能够设置相同的属性与效果    
    group.translation.set(two.width /2, two.height /2);
    //让一个组内全部的形状位移，使中心保持在二维空间的什么位置.
    group.rotation = Math.PI;//以组中心旋转默认值180。
    group.scale =0.75;//统一设置缩放（0——1）       
    group.linewidth = 7;//若是有边线的统一设置线宽
    group.opacity = 1; //统一透明度（0——1）

3-1建立动画(闪烁）

闪烁动画代码：

　bind能够绑定一个函数来在函数中表达动画属性。

　.play() 启动动画

 two.bind('update', function(frameCount) {

　　// 两个参数，第一个参数是string格式，表示要监听的事件，第二个参数是一个函数,函数中的参数为帧数

　　　　 }).play();  // 最后.play();启动动画;

↓ 闪烁代码。（多多的尝试，就会有不少意想不到的动画诞生）

         two.bind('update', function(frameCount) {
          // 代码的意思是每调用一次，执行一次two.update();  帧数为每秒60次即每秒钟执行60次
               
              if ( group.opacity > 0.9999) {

               group.opacity =0;//使透明度变成0，就是初始位置
          }
          
　　　　　　//设置时间与动画变化的属性关联方程式
          var t = (1 - group.opacity) * 0.5;//声明一个t变量，若是透明度能够到1，time会变成0
          group.opacity += t;
　　　　　　//使透明度不断+=time，第一个关系式会使time减少，因此透明度的增长速度会一点一点减慢。假设透明度能够到1，那么透明度会中止增长
                               
        }).play();  // 最后.play();启动动画;

3-1缩放旋转动画

缩放旋转动画代码：

　注意：建立动画以后要调整两个图形的 x、y 的位置，否则会出现不一样的动画效果呢。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                background-color: #000000;
            }
            svg{
                background-color: #FEF1F2;
            }
        </style>
        <script type="text/javascript" src="js/two.JS.js" ></script>

</head>
<body>
    <!--建立一个div做为一个选区-->
    <div id="draw-shapes">
            
            
    </div>
        
        
        
    <script type="text/javascript">         
    var elem = document.getElementById('draw-shapes');/*原生的JS代码 取到你所建立的Div*/
    var params = { width: 400, height: 400}; //设置二维空间的宽高
    var two = new Two(params).appendTo(elem); //新建一个在div中的二维空间    
    var circle = two.makeCircle(-72, 0, 50); // 建立圆形（x坐标，y坐标，半径）
    var star = two.makeStar(75,0, 75,35,5);//建立五角星（x坐标，y坐标，内半径，外半径，几角星） 

    // 设置不一样的样式属性:
    circle.fill = '#CCD0D5';  //fill 填充色
    circle.stroke = '#D3C294'; // 边线颜色
    circle.linewidth = 5;// 边线的宽度
    
    star.fill = '#FFD31C';
    star.opacity = 0.5;//透明度
    star.noStroke();//去掉边线
    
    var group = two.makeGroup(circle, star);
    //组能够将数个图形合并到一个组中，一个组能够设置相同的属性与效果    
    group.translation.set(two.width /2, two.height /2);
    //让一个组内全部的形状位移，使中心保持在二维空间的什么位置.
    group.rotation = Math.PI;//以组中心旋转默认值180。
    group.scale =0;//统一设置缩放（1——0）       
     group.linewidth = 7;//若是有边线的统一设置线宽
     group.opacity = 1; //透明度
    two.update();// 将生成的空间，图形投射到网页上。
    
        // bind能够绑定一个函数来在函数中表达动画属性。
    
        // 两个参数，第一个参数是string格式，表示要监听的事件，第二个参数是一个函数,函数中的参数为帧数
         two.bind('update', function(frameCount) {
             
          // 代码的意思是每调用一次，执行一次two.update();  帧数为每秒60次即每秒钟执行60次 
              if (group.scale > 0.9999) {
               group.scale = group.rotation = 0
               //使缩放与回转变成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度)
        
          
        }).play();  // 最后.play();启动动画;
       
     
    </script>
    </body>
</html>

(图 1-1) 代码以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                background-color: #000000;
            }
            svg{
                background-color: #FEF1F2;
            }
        </style>
        <script type="text/javascript" src="js/two.JS.js" ></script>

</head>
<body>
    <!--建立一个div做为一个选区-->
    <div id="draw-shapes">
            
            
    </div>
        
        
        
    <script type="text/javascript">         
    var elem = document.getElementById('draw-shapes');/*原生的JS代码 取到你所建立的Div*/
    var params = { width: 400, height: 400}; //设置二维空间的宽高
    var two = new Two(params).appendTo(elem); //新建一个在div中的二维空间    
    var circle = two.makeCircle(-72, 0, 50); // 建立圆形（x坐标，y坐标，半径）
    var star = two.makeStar(75,0, 75,35,5);//建立五角星（x坐标，y坐标，内半径，外半径，几角星） 

    // 设置不一样的样式属性:
    circle.fill = '#CCD0D5';  //fill 填充色
    circle.stroke = '#D3C294'; // 边线颜色
    circle.linewidth = 5;// 边线的宽度
    
    star.fill = '#FFD31C';
    star.opacity = 0.5;//透明度
    star.noStroke();//去掉边线
    
    var group = two.makeGroup(circle, star);
    //组能够将数个图形合并到一个组中，一个组能够设置相同的属性与效果    
    group.translation.set(two.width /2, two.height /2);
    //让一个组内全部的形状位移，使中心保持在二维空间的什么位置.
    group.rotation = Math.PI;//以组中心旋转默认值180。
    group.scale =0;//统一设置缩放（1——0）       
     group.linewidth = 7;//若是有边线的统一设置线宽
     group.opacity = 1; //透明度
    two.update();// 将生成的空间，图形投射到网页上。
    
        // bind能够绑定一个函数来在函数中表达动画属性。
    
        // 两个参数，第一个参数是string格式，表示要监听的事件，第二个参数是一个函数,函数中的参数为帧数
         two.bind('update', function(frameCount) {
             
          // 代码的意思是每调用一次，执行一次two.update();  帧数为每秒60次即每秒钟执行60次 
              if (group.scale > 0.9999) {
               group.scale = group.rotation = 0
               //使缩放与回转变成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度)
        
          
        }).play();  // 最后.play();启动动画;
       
     
    </script>
    </body>
</html>

后序

S N
　　　　　　好啦！ Two.js就和你们学习到这了。但愿给你们多少都有点帮助，主要仍是多练习对吧。　　　　　　　学习使我快乐，哈哈！　　　　　　对了，我分享的不过是简单的一点，更多呢仍是要靠你们本身学习。　　　　　　　　　　　　不唠叨了，再见朋友们。