Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
scroll Draw SVG에서 실선이 아닌 점선으로 그리고 싶어요
Đã giải quyết
Viết
·
176
1
안녕하세요.
강의를 통해 gsap을 입문한 학생입니다.
현재 강의는 스크롤 시 실선이 나타나는데
점선으로 나타내고 싶습니다.
현재 강의에서의 설정부분인데
pathLength = document.querySelector(element).getTotalLength();
gsap.set(element,{
strokeDasharray:pathLength,
strokeDashoffset:pathLength,
})
strokeDasharray 설정 부분에 dashArray 간격이 16을 넣었더니 이미 실선이 그려진채로 나오더라구요.
드래그하면서 실선이 그려져야하는데...
실선이 아닌 점선으로도 구현할 수 있는지 궁금합니다
javascript애니메이션인터랙티브-웹gsapscrolltrigger
Câu trả lời 1
1
kindtiger
Người chia sẻ kiến thức
안녕하세요 ssooya90 님 😀
strokeDasharray만으로는 dotted stroke의 애니메이션을 구현하기에 한계가 있습니다.
(점들이 모여 선을 이루는 구조이기 때문에 그렇습니다)
그래서 점선 한칸씩 애니메이션의 반복을 주어 dotted stroke를 그려나가는 방식을 사용해야 합니다.
아래의 코드를 참고해보세요
https://codepen.io/kindtigerr/pen/bNbaowq
감사합니다 :)
안녕하세요!
답변 주셔서 감사합니다.
여쭤보면서 찾아보다가 mask 방식으로 해결했습니다ㅎㅎ
알려주신 방식으로도 구현해보면서 공부해보겠습니다.
감사합니다.