SVG(Scalable Vector Graphics) 점선 관련 속성 및 선 애니메이션 원리: 움직이는 선

黄舟

풀어 주다： 2017-02-27 15:16:59

원래의

3114명이 탐색했습니다.

SVG는 매우 멋진 라인 애니메이션을 구현할 수 있습니다

그런 웹 포털도

우리는 할 수 있습니다 먼저 간단한 SVG 라인 애니메이션을 구현하세요
이렇게

걱정하지 마세요. 그 전에 몇 가지 속성 값을 이해해야 합니다.

점선 속성

점선 속성에는 2개의 스트로크-다샤레이와 스트로크-대시오프셋이 포함됩니다

스트로크-다샤레이

다음 예를 살펴보겠습니다

 <svg width=300 height=300 viewbox="0 0 30 30">
    <path id="path_a" d="M 5 10 L 25 10"></path>
    <path id="path_b" d="M 5 15 L 25 15"></path>
    <path id="path_c" d="M 5 20 L 25 20"></path></svg>

로그인 후 복사

rrree

I 세 개의 선 세그먼트에 대해 각각 다른 스트로크 대시 배열을 설정하십시오.

이 속성이
값에 사용되는 내용을 이미 이해하셨을 것이라 믿습니다. 점선은 다음 위치에 그려집니다. 1px - 빈 1px - 그리기 1px - 빈 1px - ...
두 개의 값, 점선으로 1px 그리기 - 빈 2px - 1px 그리기 - 빈 2px - ...
세 개의 값, 점선으로 1px 그리기 - 빈 2px - 3px 그리기 - 빈 1px-...
내부에 루프가 있습니다

Stroke-dashoffset

이 속성은 점선의 위치를 조정하는 것입니다

path {    
stroke: #000;}#path_a {    
stroke-dasharray: 1;}#path_b {    
stroke-dasharray: 1 2;}#path_c {   
 stroke-dasharray: 1 2 3;}

로그인 후 복사

<svg width=300 height=300 viewbox="0 0 30 30">
    <path id="path_a" d="M 5 10 L 25 10"></path>
    <path id="path_b" d="M 5 15 L 25 15"></path>
    <path id="path_c" d="M 5 20 L 25 20"></path></svg>

로그인 후 복사

값이 양수이면 점선이 뒤로 이동
값이 음수이면 점선이 앞으로 이동
px 단위는 다음과 같습니다. 작성 여부

간단한 SVG 라인 애니메이션

위의 점선 관련 속성을 이해한 후
CSS
와 JS(또는 SMIL 없음)를 사용하여 위의 가장 간단한 라인 애니메이션을 쉽게 구현할 수 있습니다. animation)이 필요합니다
Stroke-dashoffset을 수정하는 것이 원칙입니다. 값을 설정하면 경로가 천천히 나타납니다

path {    
stroke: #000;    
stroke-dasharray: 5;    
}#path_a {    
stroke-dashoffset: 2;}#path_b {    
stroke-dashoffset: 0;}#path_c {    
stroke-dashoffset: -2;}

로그인 후 복사

<svg width=300 height=300 viewbox="0 0 30 30">
    <path d="M 5 15 L 25 15"></path></svg>

로그인 후 복사

처음에 획-대시오프셋과 획의 길이를 설정- dasharray 선분
이렇게 하면 선분을 볼 수 없게 됩니다
애니메이션 애니메이션을 사용하면 점차 스트로크-대시오프셋이 0이 됩니다
여기서 Forwards 속성값을 사용하면 선그리기 애니메이션을 구현할 수 있습니다. animation: act 1s linear forwards;
정말 영리한 방법입니다

Path length Get

위의 작은 예에서는 js를 사용하지 않지만
사실 여전히 js와 협력해야 합니다. 더 화려하고 복잡한 효과를 얻으려면
또 다른 예는 우리의 작은 예에서 경로 길이가 매우 쉽다는 것입니다.
을 알고 있지만 경로 길이를 알 수 없는 경우
js가 필요합니다

path {    
stroke: #000;    
stroke-dasharray: 20px;    
stroke-dashoffset: 20px;    
animation: act 1s linear infinite alternate;}@keyframes act {
    100% {        
    stroke-dashoffset: 0;    }}

로그인 후 복사

게다가 경로

의 시작점 x로부터의 거리 좌표를 얻을 수 있는 getPointAtLength(x)도 있습니다. (getElementsByTagNameNS는 XML 태그를 가져오는 데 사용됩니다. 실제로 getElementsByTagName 여기에서도 사용할 수 있습니다)

이를 통해 js를 사용하여 좀 더 복잡한 그래픽을 만들 수 있습니다

첫 번째 A 번개 그리기

var char = &#39;http://www.w3.org/2000/svg&#39;;var path = document.getElementsByTagNameNS(char, &#39;path&#39;)[0];
console.log(path.getTotalLength()); //20

로그인 후 복사

rrree

@keyframes 사전 규칙

js 스크립트로 해야 할 일은 경로 길이를 가져온 다음
스타일을 추가하는 것입니다

<svg width="580" height="400">
    <path d="m262.59622,90.56177l34.74561,60.80042l-14.32703,7.17541l43.75135,52.09264l-14.32061,
    8.69967l54.08581,87.23186l-91.73919,-66.84884l17.49797,-9.28344l-57,-42.81731l20.425,-13.23194l-60.18379,-44.91723l67.06487,-38.90124z"></svg>

로그인 후 복사