Raphael.js에서 바 애니메이션 올리기

Question

애니메이션을 제대로 만들려면 어떻게해야하나요? 바 인상을하고 싶다는 뜻이야. 하지만 이제 오른쪽 꼭대기 점이 왼쪽처럼 정적으로 유지되지 않습니다. 애니메이션으로 왼쪽에서 오른쪽으로 이동합니다. 상기 제 1 경로에 5 3 포인트가 있으므로

https://jsfiddle.net/kholmukhamedovme/m4q4Lmbr/

var paper = Raphael("paper", 500, 500); 

var bar = paper.path(
    "M 100, 500" + 
    "L 200, 450" + 
    "L 300, 500" + 
    "Z" 
).animate({ 
    path: 
     "M 100, 350" + 
     "L 200, 300" + 
     "L 300, 350" + 
     "L 300, 500" + 
     "L 100, 500" + 
     "Z" 
}, 1000).attr("fill", "green").attr("stroke", "none"); 

Answer 1

선이 왼쪽 아래로부터 오는 이유이다. 애니메이션을 만들려면 첫 번째 점의 기본 시작점이 여분의 점에 주어집니다. (100, 500).

참고 : attr 기능도 확인하십시오. attr을 여러 번 호출하는 대신 원하는 모든 특성을 포함하는 JSON 객체를 전달할 수 있습니다.

$(function(){ 

    var paper = Raphael("paper", 500, 500); 

    var bar = paper.path(
    "M 100, 500" + 
    "L 200, 450" + 
    "L 300, 500" + 
    "L 300, 500" + 
    "L 100, 500" + 
    "Z" 
).animate({ 
    path: 
     "M 100, 350" + 
     "L 200, 300" + 
     "L 300, 350" + 
     "L 300, 500" + 
     "L 100, 500" + 
     "Z" 
    }, 500).attr({ 
    fill: "green", 
    stroke: "none" 
    }); 

}); 

JSFiddle