two.js之实现动画效果示例

一、什么是二。js？

Two.js是面向现代网浏览器的一个二维绘图原料药. Two.js可以用于多个场合：SVG，画布和WebGL，旨在使平面形状和动画的创建更方便，更简洁。

Two.js有一个内置的动画循环，可搭配其他动画库两个包含可伸缩矢量图形解释器，这意味着开发人员和设计人员都可以在商业应用中，如Adobe Illustrator中创建挽救(保存的简写)元素，并把它引入Two.js使用场景中。

二、导入two.js

三、用two.js实现动画

1)一个简单的小圆屋顶

脚本类型='text/javascript' //在整个身体中绘制绘图区var Two=new Two({全屏： true，//设置是否全屏autostart:true，//是否自动启动动画}).附录(文档。身体)；var星=二。makestar(两个。宽度/2，高度/2，50，125)；//两个。update()；//映射到页面上two.bind('update '，函数(帧数){ star。旋转=0.03；})/脚本

2)实现一个比较复杂一些的

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style type=' text/CSS ' SVG {底色：黑色；}/style script src=' http : js/two .js。js ' type=' text/JavaScript ' charset=' utf-8 '/script/head body！-创建差异绘图区- div id='draw-shapes' /div脚本类型=' text/JavaScript ' var elem=document。getelementbyid(' draw-shapes ')；var params={width:400，height :400 }；变量二=新的二（参数)。appendo(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)；圆圈。填充=' # CCD 0 D5 '；//填充颜色circle.lineWidth=15//边线的宽度circle.stroke=' # FED519//边线的颜色star.fill='黄色；明星。不透明度=0.5;//设置透明度圆圈。nostroke()；//去掉边线var group=two.makeGroup(圆形、星形);//将两个图形合并到一个组中//分组。fill=' # ffffff团体。翻译。第二集。宽度/2，两个。高度/2)；组。旋转=数学；group.scale=0.1two。update()；two.bind('update '，函数(帧数){ if(group。刻度0。99999){//将缩放与旋转的度数变成0组。规模=群体。旋转=0；} var t=(1组。比例尺)* 0.3；团体。比例尺=t；组.旋转=t * 3 *数学.PI；}).play()；/脚本/正文/html

其中的背景是这个函数制作曲线会改变为什么样的背景取决于所给的数是多大以及多少个

四、二。射流研究…官网链接

https://two.js.org/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。