Two.js 기반 별 서 라운드 애니메이션 효과 구현 예시

Two.js 는 현대 웹 브 라 우 저 를 위 한 2 차원 그래 픽 API 입 니 다.Two.js 는 여러 장소 에 사용 할 수 있 습 니 다.SVG,Canvas,WebGL 은 평면 모양 과 애니메이션 의 생 성 을 더욱 편리 하고 간결 하 게 하기 위 한 것 입 니 다.
Two.js 는 다른 애니메이션 라 이브 러 리 와 어 울 릴 수 있 는 내 장 된 애니메이션 순환 이 있 습 니 다.Two.js 는 신축 벡터 그래 픽 해석 기 를 포함 하고 있 습 니 다.이 는 개발 자 와 디자이너 가 Adobe Illustrator 에서 SVG 요 소 를 만 들 고 Two.js 사용 장면 에 도입 할 수 있 음 을 의미 합 니 다.
효 과 는 다음 과 같 습 니 다:

다음은 핵심 js code HTML 을 붙 이지 않 고 to.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(); 

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.