애니메이션으로 변환하여 둥근 사각형 모양을 원으로 변환해야하는 특정 애니메이션 작업을했습니다. 나는 paper.js의 문서를 점검하고이를 달성하기 위해 미리 정의 된 함수를 찾지 못했습니다.둥근 사각형을 원으로 변환
애니메이션이 원활 할 필요가있다. 내가 사용하고있는 사각형의 수가 너무 많아서 "현재의 둥근 사각형을 제거하고 둥근 하나의 버전을 다시 그릴"방법을 사용할 수 없습니다. 그것은 performace를 줄이고 애니메이션은 느려집니다.
둥근 사각형을 생성하는 데 사용하는 코드입니다.
// Had to paste something to post the question
// Though the whole code can be seen on codepen link
var rect = new Rectangle();
var radius = 100, origin = {x: 100, y: 100};
rect.size = new Size(radius, radius);
rect.center = new Point(origin.x, origin.y);
var cornerSize = radius/4;
var shape = new Path.Rectangle(rect, cornerSize);
는 진행 상황을 표시하려면이
Codepen 예를 준비했다.
다른 모든 객체 유형을 사용하여 전체 애니메이션을 만들 수 있다면 잘 될 것입니다. 지금은 둥근 사각형을 원형으로 변형시킬 수있는 속성을 찾을 수 없습니다.
개체의 색상과 위치를 애니메이션으로 나타낼 수도 있습니다. 컬러 애니메이션을 찾으려면 많은 문서를 살펴 보았습니다.
추신 : 객체의 색상을 애니메이트하는 다른 (더 좋은) 기법이있는 경우이를 공유하십시오.
정말 고마워요. 그래서 저는 형상과 같은 기능이 없다는 것이 옳았습니다. 이제 모든 모양을 경로로 변경해야합니다. 그게 내가 필요한 것. –
@AkashK. 실제로 저는 Shape를 사용하는 방법을 발견했습니다. 새로운 접근법에 대한 내 대답의 편집을보십시오. – Waruyama
나는 이걸 어떻게 찾았는지 알고 싶어한다. 제가 놓친 도형에 대한 문서 나 기사가 있습니까?일반적으로 아무도 사각형의 반경 설정에 대해 생각하지 않습니다. p 답변을 다시 upvote 할 수 있기를 바랍니다. –