클릭하면 경로가 애니메이션으로 바뀝니다 - css timeframes 또는 js/jquery?

-1

여정/타임 라인과 같은 경로의 애니메이션을 만들고 싶습니다. 사용자는 원 (결국 이미지 임)을 표시합니다.이 원을 클릭하면 애니메이션이 시작되고 페이드 효과가 적용된 다른 원을 애니메이션/경로로 이동하는 경로가 표시됩니다. 내 아이디어를 가장 잘 묘사 한 이미지를 첨부했습니다.클릭하면 경로가 애니메이션으로 바뀝니다 - css timeframes 또는 js/jquery?

제 질문은 -이 작업을 수행하는 데 권장되는 방법은 무엇입니까? CSS 애니메이션 또는 도움이 될 jquery 라이브러리가 있습니까?

는

출처

2016-11-01 user3005003

[jQuery 경로 라이브러리] (https://github.com/weepy/jquery.path)를 사용해보십시오. 데모 페이지를 확인하십시오 - 여러분의 필요에 맞게 쉽게 수정할 수있는 사인파 예제가 있습니다 –

이 질문은 의견이 너무 광범위하거나 의견이 필요하거나 토론이 필요하기 때문에 스택 오버플로에 대한 주제는 아닙니다. 구체적이고 신뢰할 수있는 프로그래밍 문제가있는 경우 자세한 정보를 제공해주십시오. –

내가 기지로 SVG를 취할 것 감사드립니다. 그런 잉크 스케이프 (또는 이와 유사한)를 사용하면 경로를 시각적으로 디자인하고 파란색 원을 포함시킬 수 있습니다. 당신은 다음처럼 HTML로 SVG-코드를 삽입 (생성 된 파일에서 SVG 코드를 복사) 할 수있는 것보다

마지막으로

<div class="svg-container"> 
    <svg>…</svg> 
</div>

당신이 원하고 경로 참조하기 위해 자바 스크립트를 사용할 수 있습니다

를

var path = document.querySelector('.path'), //these selectors are just arbitrary 
    circle = document.querySelector('.circle');

경로에 포인트를 얻으려면, 당신은 사용할 수 있습니다 : 애니메이션

var point = path.getPointAtLength();

, 나는 당신이 기본적으로 그렇게하는 법을 알고 있다고 가정하십시오, 왜냐하면 여기에서 설명하기에는 너무 어려울 것이기 때문입니다. 그러나 p이 당신의 애니메이션 진행 상황이고 [0,1] 범위에있을 것이라고 가정 해 보겠습니다. 주어진 p에 점을 계산하기 때문에 같이 할 수있다 :

let pointAtT = (path, t) => { 
    let l_total = path.getTotalLength(); 
    return path.getPointAtLength(l_total * t); 
}

가 갖는, 당신은 x 및 y가 원을 조작하는 좌표 사용할 수 있습니다. 적용 할 수있는 변환을 알고 있어야합니다. 즉, 모든 것을 전역 좌표 공간으로 변환하고 거기에서 계산 한 다음 결과를 항목의 좌표 공간으로 다시 변환하는 것이 좋습니다. svg.js, snap.svg 및 Raphaël : mdn

에

문서는 당신을 도울 수있는 몇 가지 SVG 라이브러리가 있습니다.

출처

2016-11-01 11:17:50 philipp

클릭하면 경로가 애니메이션으로 바뀝니다 - css timeframes 또는 js/jquery?

답변

관련 문제