JS 라이브러리로 SVG 파일에 애니메이션을 적용하려면 어떻게해야합니까? 분재는 이상적입니까?

Question

Illustrator에서 만든 SVG 파일을 애니메이션으로 만들 수있는 js 라이브러리를 찾고 배우고 싶습니다. After Effects와 모션 그래픽에 큰 배경이 있습니다. 그래서 저는 많은 애니메이션 기능을 제공 할 JS 라이브러리를 찾고 있습니다.

지금 BonsaiJS를 확인 중이며 Bondsai에서 SVG 파일을 애니메이션으로 만들 수 있는지 여부를 알려 줄 수 있는지 궁금합니다. 그렇다면이 작업을 시작하는 방법을 보여주세요.

지금 당장은 내 사이트의 이미지 태그에 SVG가 내장되어 있습니다. Bonsai로 SVG에 애니메이션을 적용하는 방법에 대한 내 생각을 설명하기 위해 몇 가지 샘플 코드를 빠르게 작성했습니다. 그러나 형상이 아닌 기존 SVG 파일을 다루기위한 특별한 요구 사항이 있습니까? 애매한 SVG 형식을 들으면서 죄송합니다. JS 애니메이션 라이브러리는 저에게 새로운 것입니다. js 라이브러리로 SVG 애니메이션을 만들기위한 튜토리얼로 나를 안내하는 것은 엄청난 도움이 될 것입니다.

<img src="graphic.svg" id="graphic"> 

bonsai.run(document.getElementById('graphic'), { 
code: function() { 

}, 

}); 

Answer 1

분재는 이미지를 포함하고 애니메이션을 적용하기위한 API를 모두 제공합니다. 나는 그것에 익숙해에 대한 http://orbit.bonsaijs.org에 자산과 분재의 애니메이션 API와 장난 제안

bonsai.run(document.body, { 
    width: 300, 
    height: 300, 
    code: function() { 
    // url that points to the image 
    var url = 'https://upload.wikimedia.org/wikipedia/commons/7/72/Variable_Resistor.svg'; 
    new Bitmap(url).on('load', function() { 
     // adjust size 
     this.attr('width', 200); 
     // add it to the stage 
     this.addTo(stage); 
     // animate arbitrary attributes 
     this.animate('3s', { 
     x: 200 
     }); 
    }); 
    } 
}); 

.

• 근무 예 : http://jsbin.com/icuqon/2/edit
• 애니메이션 문서는 : http://docs.bonsaijs.org/overview/Animation.html

Answer 2

난 당신이 SVG를 시작하기 위해 라파엘보다는 분재로 시작하는 것이 좋습니다 것입니다. 더 많은 인기를 얻었고 귀하의 질문에 대답 할 수있는 사람들을 더 많이 찾을 수 있습니다. 또한 Bonsai와 함께 사용하는 JS 디버깅은 매우 어렵습니다.