Home > Article > Web Front-end > How to implement animation function in two.js

How to implement animation function in two.js

php中世界最好的语言Original: 2018-04-16 09:57:411559browse

This time I will show you how two.js implements the animation function. What are the precautions for two.js to implement the animation function. The following is a practical case, let's take a look.

What is two.js?

Two.js is a 2D drawing API for modern web browsers. Two.js can be used in multiple situations: SVG, Canvas and WebGL, and is designed to make the creation of flat shapes and animations easier and simpler.

Two.js has a built-in animation loop that works with other animation libraries. Two.js includes a scalable vector graphics interpreter, which means developers and designers can create SVG elements in commercial applications such as Adobe Illustrator and bring them into Two.js usage scenarios middle.

Use two.js to implement animation 1) A simple small dome

<script type="text/javascript">
 //在整个body中绘制绘图区
 var two = new Two({
  fullscreen:true,//设置是否全屏
  autostart:true,//是否自动启动动画 
 }).appendTo(document.body);
   
 var star = two.makeStar(two.width/2,two.height/2,50,125);
 //two.update();//映射到页面上
 two.bind('update',function(frameCount){
  star.rotation +=0.03;
 })
</script>

2) Implement a more complex

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   svg{
    background-color: black;
   }
  </style>
  <script src="js/two.JS.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <!--创建p绘图区-->
  <p id="draw-shapes">
  </p>
  <script type="text/javascript">
   var elem = document.getElementById("draw-shapes");
   var params = {width:400,height:400};
   var two = new Two(params).appendTo(elem);
   var circle = two.makeCircle(-72,0,50);//前两个是x轴y轴，然后是圆的半径
   var star = two.makeStar(75,0,75,35,5);
//   var ss = two.makeCurve(250,30,46,50,465,48,79,36,94);
   circle.fill = "#ccd0d5";//填充颜色
   circle.lineWidth = 15;//边线的宽度
   circle.stroke = "#FED519";//边线的颜色
   star.fill = "yellow";
   star.opacity = 0.5;//设置透明度
   circle.noStroke();//去掉边线
   var group = two.makeGroup(circle,star);//将两个图形合并到一个组中
//   group.fill = "#ffffff";
   group.translation.set(two.width/2,two.height/2);
   group.rotation = Math.PI;
   group.scale = 0.1;
   two.update();
   two.bind('update',function(frameCount){
    if(group.scale>0.99999){
     //将缩放与旋转的度数变成0
     group.scale = group.rotation = 0;
    }
    var t = (1- group.scale) * 0.3;
    group.scale +=t;
    group.rotation +=t *3*Math.PI;
   }).play();
  </script>
 </body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to implement animation function in two.js

Related articles