So implementieren Sie eine Animationsfunktion in two.js-js-Tutorial-php.cn

So implementieren Sie eine Animationsfunktion in two.js

php中世界最好的语言

Freigeben： 2018-04-16 09:57:41

Original

1519 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie die Animationsfunktion in two.js implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der Animationsfunktion in two.js? sehen.

Was ist two.js?

Two.js ist eine 2D-Zeichen-API für moderne Webbrowser. Two.js kann in mehreren Situationen verwendet werden: SVG, Canvas und WebGL und soll die Erstellung flacher Formen und Animationen einfacher und einfacher machen.

Two.js verfügt über eine integrierte Animationsschleife, die mit anderen Animationsbibliotheken funktioniert. Two.js enthält einen skalierbaren Vektor-Forminterpreter, was bedeutet, dass Entwickler und Designer SVG-Elemente in kommerziellen Anwendungen wie Adobe Illustrator erstellen und sie in die mittleren Nutzungsszenarien von Two.js integrieren können.

Two.js zum Implementieren von Animationen verwenden

1) Eine einfache kleine Kuppel

<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>

Nach dem Login kopieren

2) Implementieren Sie ein komplexeres

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Two.js erstellt Animationen rund um Objekte

So bedienen Sie Node.js zum Senden von E-Mails

Detaillierte Erläuterung der Verwendung von apply und call in js (mit Code)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Animationsfunktion in two.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!