Maison > Article > interface Web > Comment implémenter la fonction d'animation dans two.js

Comment implémenter la fonction d'animation dans two.js

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

Cette fois, je vais vous montrer comment implémenter la fonction d'animation dans two.js. Quelles sont les précautions pour implémenter la fonction d'animation dans two.js. Ce qui suit est un cas pratique, prenons un. regarder.

Qu'est-ce que two.js ?

Two.js est une API de dessin bidimensionnel pour les navigateurs Web modernes. Two.js peut être utilisé dans plusieurs situations : SVG, Canvas et WebGL, et est conçu pour rendre la création de formes plates et d'animations plus facile et plus simple.

Two.js possède une boucle d'animation intégrée qui fonctionne avec d'autres bibliothèques d'animation. Two.js comprend un interpréteur de forme vecteur évolutif, ce qui signifie que les développeurs et les concepteurs peuvent créer des éléments SVG dans des applications commerciales telles qu'Adobe Illustrator et les intégrer dans les scénarios d'utilisation de Two.js.

Utiliser two.js pour implémenter l'animation

1) Un simple petit dôme

<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) Mettre en œuvre un

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

plus complexe

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Two.js crée un objet entourant une animation

Comment utiliser Node.js pour envoyer des e-mails

Explication détaillée de l'utilisation de apply et call in js (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php node.js 循环 JS canvas webgl

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Two.js crée une animation entourant l'objetArticle suivant：Two.js crée une animation entourant l'objet

Articles Liés

Voir plus