집 >웹 프론트엔드 >JS 튜토리얼 >two.js에서 애니메이션 기능을 구현하는 방법

two.js에서 애니메이션 기능을 구현하는 방법

php中世界最好的语言원래의: 2018-04-16 09:57:411574검색

이번에는 two.js에서 애니메이션 기능을 구현하는 방법을 보여드리겠습니다. two.js에서 애니메이션 기능을 구현하기 위한 주의사항은 무엇인가요? 다음은 실제 사례입니다.

two.js가 무엇인가요?

Two.js는 최신 웹 브라우저를 위한 2차원 드로잉 API입니다. Two.js는 SVG, Canvas, WebGL 등 다양한 상황에서 사용할 수 있으며 평면 모양과 애니메이션을 더 쉽고 간단하게 만들 수 있도록 설계되었습니다.

Two.js에는 다른 애니메이션 라이브러리와 함께 작동하는 내장 애니메이션 루프가 있습니다. Two.js에는 확장 가능한 벡터모양 해석기가 포함되어 있습니다. 즉, 개발자와 디자이너 모두 Adobe Illustrator와 같은 상용 애플리케이션에서 SVG 요소를 만들고 이를 Two.js 사용 시나리오로 가져올 수 있습니다.

two.js를 사용하여 애니메이션 구현

1) 심플한 작은 돔

<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) 더 복잡한

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

구현

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!