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>
I 세 개의 선 세그먼트에 대해 각각 다른 스트로크 대시 배열을 설정하십시오.
이 속성이
값에 사용되는 내용을 이미 이해하셨을 것이라 믿습니다. 점선은 다음 위치에 그려집니다. 1px - 빈 1px - 그리기 1px - 빈 1px - ...
두 개의 값, 점선으로 1px 그리기 - 빈 2px - 1px 그리기 - 빈 2px - ...
세 개의 값, 점선으로 1px 그리기 - 빈 2px - 3px 그리기 - 빈 1px-...
내부에 루프가 있습니다
이 속성은 점선의 위치를 조정하는 것입니다
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 단위는 다음과 같습니다. 작성 여부
위의 점선 관련 속성을 이해한 후
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;
정말 영리한 방법입니다
위의 작은 예에서는 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 = 'http://www.w3.org/2000/svg';var path = document.getElementsByTagNameNS(char, 'path')[0]; console.log(path.getTotalLength()); //20
@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>
물론 더 복잡하고 멋진 라인 애니메이션을 구현하려면
더 복잡한 경로와 스크립트가 필요합니다
예를 들어 아래
위 내용은 SVG(Scalable Vector Graphics) 점선 관련 속성 및 선 애니메이션 원리: 움직이는 선의 내용을 참조하세요. PHP 중국어 홈페이지(www.php.cn)를 팔로우하세요!