둥근 사각형을 원으로 변환

Question

애니메이션으로 변환하여 둥근 사각형 모양을 원으로 변환해야하는 특정 애니메이션 작업을했습니다. 나는 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 예를 준비했다.

다른 모든 객체 유형을 사용하여 전체 애니메이션을 만들 수 있다면 잘 될 것입니다. 지금은 둥근 사각형을 원형으로 변형시킬 수있는 속성을 찾을 수 없습니다.

개체의 색상과 위치를 애니메이션으로 나타낼 수도 있습니다. 컬러 애니메이션을 찾으려면 많은 문서를 살펴 보았습니다.

추신 : 객체의 색상을 애니메이트하는 다른 (더 좋은) 기법이있는 경우이를 공유하십시오.

Answer 1

의 코너킥 크기는 먼저 둥근 사각형과 같은 경로를 만들어야합니다. 그런 다음 애니메이션의 각 단계마다 경로의 8 개 세그먼트를 수정해야합니다. 이것은 Path 오브젝트에서만 작동하며, 직사각형이 Shape 인 경우에는 유효하지 않습니다.

세그먼트 포인트와 핸들과 같이 설정되어야한다 : 는

κ (카파) Numerical.KAPPA (카파 here에 대한) paper.js 같이 정의된다.

이 (Click here for the Sketch)처럼 보일 수있는 반경을 변경하는 코드 :

var rect = new Path.Rectangle(new Point(100, 100), new Size(100, 100), 30); 
rect.fullySelected = true; 

var step = 1; 
var percentage = 0; 

function onFrame(event) { 
    percentage += step; 
    setCornerRadius(rect, percentage) 
    if (percentage > 50 || percentage < 0) { 
     step *= -1; 
    } 
} 

function setCornerRadius(rectPath, roundingPercent) { 
    roundingPercent = Math.min(50, Math.max(0, roundingPercent)); 
    var rectBounds = rectPath.bounds; 
    var radius = roundingPercent/100 * Math.min(rectBounds.width, rectBounds.height); 
    var handleLength = radius * Numerical.KAPPA; 

    l = rectBounds.getLeft(), 
    t = rectBounds.getTop(), 
    r = rectBounds.getRight(), 
    b = rectBounds.getBottom(); 

    var segs = rectPath.segments; 
    segs[0].point.x = segs[3].point.x = l + radius; 
    segs[0].handleOut.x = segs[3].handleIn.x = -handleLength; 
    segs[4].point.x = segs[7].point.x = r - radius; 
    segs[4].handleOut.x = segs[7].handleIn.x = handleLength; 
    segs[1].point.y = segs[6].point.y = b - radius; 
    segs[1].handleIn.y = segs[6].handleOut.y = handleLength; 
    segs[2].point.y = segs[5].point.y = t + radius; 
    segs[2].handleOut.y = segs[5].handleIn.y = -handleLength; 
} 

편집 : 난 그냥 모양을 사용하여 훨씬 쉬운 방법을 발견했다. 어느 접근법이 더 빨리 수행되는지 확실하지 않습니다.

다음은 Shape (Click here for the Sketch)을 사용한 구현입니다.

var size = 100; 
var rect = new Shape.Rectangle(new Rectangle(new Point(100, 100), new Size(size, size)), 30); 
rect.strokeColor = "red"; 

var step = 1; 
var percentage = 0; 

function onFrame(event) { 
    percentage = Math.min(50, Math.max(0, percentage + step)); 
    rect.radius = size * percentage/100; 
    if (percentage >= 50 || percentage <= 0) { 
     step *= -1; 
    } 
} 

Answer 2

변경 다음

var cornerSize = circle.radius/1;