Two.js是一个支持SVG、Canvas和WebGL的二维绘图API，内置动画循环。本文通过一个星球环绕太阳的示例，展示如何利用Two.js创建可伸缩矢量图形，并实现行星旋转动画效果，帮助开发者快速掌握其核心用法。
Two.js 简介与特性
Two.js 是一个专为现代 Web 浏览器设计的二维绘图 API。它支持多种渲染后端，包括 SVG、Canvas 和 WebGL，旨在简化平面图形绘制与动画开发的流程，使代码更加简洁高效。
该库内置了动画循环机制，并兼容其他主流动画库。Two.js 包含一个可伸缩矢量图形解释器，允许开发者和设计师在 Adobe Illustrator 等专业工具中创建 SVG 元素，随后直接导入 Two.js 环境中使用，提升了工作流的灵活性。
最终实现的视觉效果如下所示：
星球环绕动画代码实现
以下是核心 JavaScript 代码，HTML 结构部分省略，实际使用时需引入 two.js 库文件：
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();
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。