2017-10-03 9 views
0

Animejs로 삼각형을 그려야합니다. 삼각형은 매우 느리게 그려야합니다. 슬프게도 삼각형이 그려지기 전에 오랜 지연 시간이 생기고 삼각형의 한쪽면이 사라집니다.Anime.js의 선 그리기 svg가 길어지며 라인이 누락되었습니다.

내 삼각형 SVG :

<div id="lineDrawing"> <svg viewBox="0 0 280 100"> 
    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="8" class="lines"> 
    <path d="m 29.188247,410.49128 338.094613,0 L 198.23555,47.968205 29.188247,410.49128 Z" stroke-dasharray="300" style="stroke-dashoffset: 316.855px;"> 

    </g> 
</svg> </div> 

내 JS : 나는 그것이 cornor 삼각형 중 하나처럼 보이게하려는 결국

anime({ 
    targets: '#lineDrawing path', 
    strokeDashoffset: [anime.setDashoffset, 0], 
    duration: 80000, 
    delay: 0, 
    direction: 'alternate', 
    loop: true 
}); 

. 나쁜 js, css 또는 html 오류가 발생하면 죄송합니다. 웹 디자인을 처음 접했습니다. https://youtu.be/JTNgpQWcDIA?t=1m1s

답변

0

SVG 삼각형이 대부분 viewBox에서 벗어나는 것처럼 보입니다. 보이지 않는 부분도 애니메이션이므로 아무 일도 일어나지 않은 것처럼 보입니다.