Two.js makes object surrounding animation

This time I will bring you Two.js to create object surrounding animationAnimation, what are the precautions for Two.js to create object surrounding animation, the following is a practical case, one Get up and take a look.

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. The following is the core js code. The HTML will not be pasted. You need to introduce two.js files:

var elem = document.getElementById('draw-animation');
var two = new Two({ width: 700, height: 700 }).appendTo(elem);
//外层大运行轨迹
var track = two.makeCircle(0, 0, 200);
track.fill='transparent';
track.stroke='#3366FF';
track.linewidth=3;
//sun
var sun = two.makeCircle(0,0,80);
sun.fill='#FF8000';
sun.stroke='#FF0000';
sun.linewidth=5;
//earth
var earth = two.makeCircle(0,0,50);
earth.fill='#9ACD32';
//moon
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);
console.dir(group);
var group1 = two.makeGroup(sun,track,group);
 
group1.translation.set(two.width / 2, two.height / 2); //平移(x,y)父元素的一半
group.translation.set(200, 0); 
group.scale = 0.8; //比例
two.bind('update', function(frameCount) {//执行动画
  group1.rotation += 0.01 *2* Math.PI;
  group.rotation += 0.01 * Math.PI;
}).play();

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!

Recommended reading:

The above is the detailed content of Two.js makes object surrounding animation. For more information, please follow other related articles on the PHP Chinese website!