콘텐츠
이 튜토리얼에서는 SVG 삼각형으로 다양한 이미지를 만들고 클릭시 한 이미지에서 다른 이미지로 애니메이션 전환을 설정합니다. Faces of Power 웹 사이트처럼 보일 것입니다. 이러한 애니메이션은 사이트, 특히 랜딩 페이지에 흥미를 더할뿐만 아니라 사용자 경험을 향상시킬 수 있습니다. 유지 관리해야 할 복잡한 사이트가있는 경우 슈퍼 웹 호스팅 서비스가 필요합니다. 덜 복잡한 것을 구축하고 있습니까? 웹 사이트 빌더가 그 일을 할 수 있습니다.
시작하기 위해 두 개의 배열로 시작할 것입니다. 하나는 애니메이션 대상 값을 포함하고 다른 하나는 애니메이션 대상 값을 포함합니다. 링크를 클릭 할 때마다 일치하는 SVG를 찾습니다. href 그 링크의 포인트들 특정 SVG에있는 각 다각형의 속성입니다.
모든 좌표를 추출 할 것입니다. 포인트들 속성에서 다각형의 채우기 색상을 가져온 다음이를 개체의 속성으로 추가합니다. 그런 다음 이러한 모든 객체를 두 배열 중 하나에 추가합니다. ...에 정렬.
TweenMax를 사용하여 ...에서 배열의 값에 ...에 정렬. 애니메이션이 완료되면 ...에 새로운 것이 될 배열 ...에서 정렬.
처음 실행할 때 ...에서 배열에는 현재 보이는 다각형의 모든 포인트 값과 모든 채우기 색상이 포함됩니다.
a href = "# nat"> Nat / a> a href = "# bwl"> bwl / a> a href = "# kevin"> kevin / a> svg> #nat의 다각형 여기로 이동 / svg> svg id = "nat"> 다각형에 대한 #nat 이동 / svg> svg id = "bwl"> 다각형에 대한 #bwl 이동 / svg> svg id = "kevin"> #kevin에 대한 다각형 이동 / svg>
01. 이미지를 다각형으로 변환
첫 번째 단계는 실제로 이미지를 만드는 것입니다. 이를 위해 Primitive라는 도구를 사용했습니다 (GitHub 저장소를 확인하세요). 튜토리얼에 사용 된 이미지는 몇몇 친구의 개인 이미지입니다.
명령 줄을 사용하여 기본 유틸리티를 통해 선택한 이미지를 실행합니다.
기본 -i input.webp -o output.svg -n 250 -m 1
-n 250 250 개의 다각형을 지정합니다. -m 1 삼각형 모양을 지정하고 -i input.webp -o output.svg 입력 및 출력입니다. 모든 SVG가 동일한 수의 다각형을 갖고 동일한 모양을 갖는 것이 중요합니다. Output.svg 다각형 모음이됩니다.
02. SVG를 HTML에 붙여 넣기
SVG를 만든 후 HTML 본문에 붙여 넣습니다. 첫 번째 SVG를 복제하고 복제본 중 하나에 클래스를 제공하십시오. .svg-holder.
그만큼 .svg-holder 기술적으로 볼 수있는 유일한 사람이 될 것입니다. 내부 및 외부에서 애니메이션되는 모든 다각형의 홀더가됩니다. 소유자를 제외한 모든 SVG에 클래스 제공 숨겨진 그리고 신분증 고유 한 이름으로. 이것은 href 링크에서. 숨겨진 SVG는 디스플레이 : 없음;. 확인하는 것이 중요합니다 href 각 링크의 신분증 각각의 SVG의.
그런 다음 변수를 선언합니다.
let toPolygonArray = []; let fromPolygonArray = [];
03. 다각형 좌표 추출
이제 각 폴리곤을 살펴보고 points 속성에서 좌표를 얻어야합니다. 정규식을 사용하여이를 수행 할 수 있습니다.
const getCoordinates = (polygon) => {return polygon.getAttribute ( "points"). match (/ (-? [0-9] [0-9 .] *), (-? [0-9] [ 0-9 .] *) (-? [0-9] [0-9 .] *), (-? [0-9] [0-9 .] *) (- ? [0-9] [0-9 .] *), (-? [0-9] [0-9 .] *) /);};
04. 다각형 배열 업데이트
링크를 클릭 할 때마다 클릭 한 링크의 href를 인수로 사용하고 일치하는 SVG를 찾고 포인트 값을 가져 와서 애니메이션하고 from 배열을 업데이트하는 함수를 실행합니다.
const updatePolygonArrays = (idToAnimateTo) => {toPolygonArray = createPolygonPointsObject (document.getElementById (idToAnimateTo) .querySelectorAll ( "polygon")); animatePolygons (); fromPolygonArray = toPolygonArray;}
이 함수는 두 개의 다른 함수를 호출합니다. createPolygonPointsObject 과 animatePolygons.
createPolygonPointsObject 모든 다각형 요소를 값을 애니메이션 할 수있는 객체로 변환합니다. animatePolygons 내부 다각형을 애니메이션 .svg-holder.
const createPolygonPointsObject = (다각형) => {const polygonsArray = []; polygons.forEach ((polygon, i) => {const coordinates = getCoordinates (polygon); polygonsArray.push ({fill : polygon.getAttribute ( "fill"), one : coordinates [1], two : coordinates [2], three : 좌표 [3], 4 : 좌표 [4], 5 : 좌표 [5], 6 : 좌표 [6]});}); return polygonsArray;}
이것은 우리를 사용합니다 getCoordinates 함수는 points 속성의 모든 좌표를 가져오고 각 좌표와 채우기로 객체를 만듭니다. 객체의 배열을 반환합니다. 한 번에 많은 값을 애니메이션 할 때 데이터 유형이 작업하기 더 쉬워 보이기 때문에 객체로 만들기로 결정했습니다.
05. 다각형 애니메이션
TweenMax를 사용하여 다각형에 애니메이션을 적용 해 보겠습니다.
const animatePolygons = () => {const polygons = document.querySelector ( ". svg-holder"). querySelectorAll ( "polygon"); fromPolygonArray = createPolygonPointsObject (polygons); fromPolygonArray.forEach ((obj, i) => {TweenMax.to (obj, 1, {one : toPolygonArray [i] .one, two : toPolygonArray [i] .two, three : toPolygonArray [i] .three, four : toPolygonArray [i] .four, five : toPolygonArray [i] .five, six : toPolygonArray [i] .six, ease : Power3.easeOut, onUpdate : () => {polygons [i] .setAttribute ( "points",` $ {obj.one}, $ {obj.two} $ {obj.three}, $ {obj.four} $ {obj.five}, $ {obj.six}`);}});});}
애니메이션의 모든 프레임에서이 루프는 현재 보이는 폴리곤의 포인트 속성을 .svg-holder 위에 설정된 새 값으로. 그만큼 onUpdate 방법 TweenMax.to 애니메이션이 업데이트 될 때마다 호출되므로 여기에서는 값이 변경 될 때마다 실행됩니다. obj.one, obj.two, obj.three, 등등. 이렇게하면 포인트 값이 애니메이션되고 모양이 다른 좌표를 갖도록 모핑됩니다.
다음으로 채우기를 애니메이션 할 수 있습니다. 의 각 다각형에 대해 .svg-holder, 채우기를 채우기로 설정하십시오. toPolygonArray 동일한 색인에 있습니다.
polygons.forEach ((polygon, i) => {const toColor = toPolygonArray [i] .fill; TweenLite.to (polygon, 1, {fill : toColor, ease : Power3.easeOut});});
이제 다각형은 예상대로 좌표와 채우기 색상을 애니메이션합니다. 그리고 끝났습니다! 페이지를 저장 하시겠습니까? PDF로 내보내고 클라우드 스토리지에 놓습니다.
웹 디자인 기술을 더욱 향상 시키려면 컨퍼런스로 이동하십시오. 업계를 선도하는 강연자, 워크숍 및 소중한 네트워킹 기회로 가득 찬 일정을 생성하고 경험하십시오. 놓치지 마세요!지금 생성 티켓 받기.
