[번역]Snake Highlight 정보
기타 [번역]Snake Highlight
본문
https://sir.kr/so_ok365/1273 의 글을 보고 찾아 보니
https://codepen.io/ainalem/pen/EQXjOR
https://blog.prototypr.io/how-to-create-the-snake-highlight-animation-with-anime-js-bf9c6cb66434
How to create the snake highlight animation with anime-js
몇 년 전 SVG 라인 애니메이션을 접했을 때 나는 즉시 놀랐다. 이것이 내가 전에 보지 못했던 것임을 나는 기억한다. 웹에서 애니메이션의 새로운 방향을 느꼈습니다. 신선한 것. 라인 애니메이션은 당시 2013/2014 년에 사용 된 대부분의 효과와 완전히 다른 시점이었습니다. 그런 다음 대부분의 애니메이션은 CSS 전환이었으며 모든 부분에서 부품을 움직였습니다. SVG는 드물게 사용되었습니다. 이것은 실제 인물을 그리거나 종이에 스케치하는 누군가를 닮았습니다.
다음은 기술을 보여주는 두 가지 초기 데모입니다.
https://jakearchibald.com/2013/animated-line-drawing-svg/
https://tympanus.net/Development/SVGDrawingAnimation/index.html
이 기술이 어떻게 작동하는지 익숙하지 않다면 CSS 트릭에 대한 간략한 개요가 있습니다. 효과를 창출하는 데 필요한 기본적인 부분을 다룰 때 읽을 가치가 있습니다.
https://css-tricks.com/svg-line-animation-works/
트릭은 SVG 스트로크에서 대시와 틈새 패턴을 사용하는 것입니다. CSS 규칙 인 stroke-dasharray 및 stroke-dashoffset이 함께 이 패턴의 형식을 제어합니다. 대시 사이의 간격을 경로의 길이보다 크거나 같게 만드는 경우 그런 다음 패턴의 오프셋을 변경하여 경로를 따라 움직이는 선으로 나타납니다.
Slithering serpents
뱀 하이라이트 데모는 Codepen의 펜 중 하나입니다. 그것은 라인 애니메이션 기술을 사용합니다. 데모에서는 웹 로그인 양식에서 찾을 수있는 일반적인 이메일, 비밀번호 및 제출 버튼이있는 로그인 화면을 보여줍니다. 여기서 아이디어는 밑줄 / 강조 표시로 사용자를 안내하는 효과를 만드는 것입니다. 사용자가 하나의 입력에서 다른 입력으로 포커스를 변경하면 선은 입력 사이를 부드럽게 미끄러 뜨립니다. 모션을 사용하여 사용자가 양식을 작성하고 안내하도록 안내합니다. 데모는 다음과 같습니다.
https://blog.prototypr.io/how-to-create-the-snake-highlight-animation-with-anime-js-bf9c6cb66434
Finding the inspiration
종종이 데모를 만드는 영감의 원천이 하나도 없었습니다. 아이디어는 온 곳에서 왔습니다. Codrops 데모는 아래에 있습니다. 또한 SVG 라인 애니메이션 기법을 사용하지만 약간의 변형이 있습니다. 여기에서는 빈 종이로 시작하기보다 두 개의 잘 정의 된 모양 사이를 움직이게하는 데 사용됩니다. 데모는 햄버거 메뉴와 메뉴 그림 (X) 사이를 전환합니다. 나는 잘 정의 된 서로 다른 시각적 상태 사이에서 움직이기 위해 같은 원리를 재사용하고있다.
https://tympanus.net/Tutorials/AnimatedMenuIcon/
dribbble과 유사한 아이디어를 보여주는 다른 데모도 많이 있습니다. 다음은 두 가지 예입니다.
https://dribbble.com/shots/2580453-Health-App-Login
https://dribbble.com/shots/4163669-Journey-App-Login-Part-1-2
What goes where?
양식은 HTML 초기부터 변경되지 않았습니다. 이것은 입력과 레이블이있는 <form> 요소입니다. 라인 부분은 절대 위치한 <svg> 요소에 있습니다. 폼 아래에 배치되어 사용자가 다른 입력 요소에 포커스를 설정할 수 있습니다. 라인 애니메이션 기법이 스트로크에 의존하기 때문에 분명히 SVG가 필요합니다. 이 기술은 당시에 한 행으로 작동합니다. 따라서 선은 사이에 애니메이션을 적용 할 모든 시각적 상태를 포함해야합니다. 나. 우리는 펜을 들어 올리지 않고 한 획을 그려야합니다. 생성 할 세 가지 시각적 상태는 다음과 같습니다. 1. 두 입력 (전자 메일 및 암호)에 각각 밑줄을 긋습니다. 2. 제출 버튼 주위에 둥근 모서리가있는 윤곽선.
위 그림은 전체 경로가 벡터 편집기 (Inkscape)에 표시된 것과 같습니다. 선은 맨 위 왼쪽 구석에서 시작됩니다. 거기에서부터 아래쪽에있는 닫힌 수퍼 타원까지 두 개의 곡선을 따라 계속됩니다. 그것은 자전거 경주처럼 보이는 부분입니다. 선의 마지막 점은 맨 아래에있는 가장 오른쪽 쌍의 왼쪽 노드입니다. 이것은 제출 버튼을 둘러싼 폐 루프 (자전거 경주)에 앉아있는 쌍입니다. 라인은 조금 느슨해지기 위해 결국 약간 겹칩니다. 즉, 애니메이션의 마지막 부분이 다른 부분만큼 정확할 필요는 없습니다. 주의해야 할 또 다른 사항은 시각적 상태를 연결하는 곡선입니다. 이러한 부분은 애니메이션에 필수적입니다. 그것들은 라인이 입력 사이에서 미끄러지는 것을 가능하게합니다.
Moving things
애니메이션을 별도의 단계로 나누어 보겠습니다. 사이에 애니메이션을 적용 할 세 가지 상태가 있기 때문에 더 분명한 문제 중 하나입니다. 이러한 애니메이션을 트리거하기 위해 focus 이벤트를 사용합니다. 브라우저 중 하나가 입력에 집중하면이 이벤트가 시작됩니다. 입력이 포커스를받는 방식에 관계없이 발생합니다. 예 : 키보드, 마우스, 터치 등으로 처리기로 시작합시다.
const email = document.querySelector('#email'),
password = document.querySelector('#password'),
submit = document.querySelector('#submit');
email.addEventListener('focus', (e) => { ... });
password.addEventListener('focus', (e) => { ... });
submit.addEventListener('focus', (e) => { ... });
이러한 핸들러에서 수행해야 할 첫 번째 작업은 이전 애니메이션이있는 경우 중지 (일시 중지)하는 것입니다. 이렇게하면 사용자가 애니메이션을 중단 할 수 있습니다.
if (current) { current.pause(); }
위의 내용은 동시에 두 개 이상의 애니메이션이 실행되지 않도록합니다.
Dashes and gaps
다음은 애니메이션 트리거입니다. 애니메이션 구문에 들어가기 전에 대쉬와 갭 속성을 알아 내야합니다. 이것은 까다로운 부분이므로 비디오보다는이 값을 찾는 방법을 설명하는 것이 더 좋습니다.
동영상을 살펴 보겠습니다. 가장 먼저 할 일은 초기 단계를 만드는 것입니다. 밑줄이 전자 메일 입력 아래에있는 단계입니다. 이렇게하기 위해서는 밑줄의 길이와 전체 경로의 길이의 두 가지가 필요합니다. 전체 길이가 필요한 이유는 위에서 설명한 바와 같이 넓은 간격을 만드는 것입니다. 밑줄이 240 픽셀 너비임을 알게되었습니다. 나는 입력이 CSS에서 지정된 너비를 가지고 있기 때문에 이것을 안다. 경로의 전체 길이를 결정하기 위해 getTotalLength ()라는 API가 있습니다. SVG 경로 요소에서이 함수를 호출하면 1391 픽셀의 길이가 완성됩니다. 이 두 값은 첫 번째 및 첫 번째 시각 단계에 대한 획 속성을 제공합니다. 대시의 길이와 간격의 길이. 이것은 CSS에서 다음과 같이 보입니다.
/* stroke-dasharray: <dash> <gap> */ stroke-dasharray: 240 1391
두 번째 단계에서는 파선 패턴을 어느 정도 상쇄 할 필요가 있는지 알아야합니다. 두 입력이 똑같이 넓기 때문에 대시 길이와 간격을 변경할 필요가 없습니다. 패스워드 입력을 위해 줄을 얼마나 많이 움직이는 지 알면됩니다. dev 도구를 사용하면 해당 값을 쉽게 찾을 수 있습니다.
stroke-dashoffset: -336
마지막으로 중요한 것은 외곽선입니다. 외곽선이 길어지기 때문에 대시 속성을 모두 변경해야합니다. 개요는 밑줄만큼 두 배 이상입니다. 다음은 개요 값입니다.
stroke-dasharray: 553 1391 stroke-dashoffset: -728
The animation syntax
이제 값을 얻었으므로 코드에서 애니메이션 트리거가 어떻게 보이는지 살펴 보겠습니다. 이것은 애니메이션을 사용하는 형식으로 변환하는 문제입니다. animejs 라이브러리에서 anime 함수를 호출하면 애니메이션이 생성되고 시작됩니다. 첫 번째 시각적 상태에 애니메이션을 적용하면 다음과 같이 표시됩니다.
current = anime({
targets: 'path',
strokeDashoffset: {
value: 0,
duration: 700,
easing: 'easeOutQuart'
},
strokeDasharray: {
value: '240 1386',
duration: 700,
easing: 'easeOutQuart'
}
});
위의 세 가지 사항 1. '경로'선택기를 사용하는 것은 다소 바람직하지 않습니다. 여기에는 하나의 경로 만 있기 때문에 여기에서 빠져 나옵니다. 이것은 데모입니다. 프로덕션 코드에서는 CSS / 마크 업을 구조화하기 위해 클래스 계층 구조와 메소드를 사용해야합니다. 2. 애니메이션이 끝나는 곳과 끝나는 곳을 지정합니다. Animejs는 암시 적 및 명시 적 시작 값을 모두 지원합니다. 암시 적 시작 값을 사용하면 위에서 설명한 것처럼 애니메이션이 중단 될 수 있습니다. 이렇게하면 라인이 위치간에 절대로 점프하지 않습니다. 3. 마지막으로 적절한 기간과 여유를 찾기 위해 시간을 할애하는 것이 중요합니다. 애니메이션은 부드럽고 유동적이어야하지만 동시에 미묘하고 방해가되지 않아야합니다.
Under the hood
아래는 간단한 데모 버전입니다.이 데모는 양식 안의 애니메이션을 보여줍니다. 후드에서 애니메이션이 어떻게 보이는지 보여줍니다. 나. 선의 배치와 입력 간의 이동 방법
https://codepen.io/ainalem/pen/YebGGY
A splash of color
2018 년에 나는 데모에 색채를 더할 것을 의무화했다. 가급적 그라디언트. 몇 년 전에 # f00과 # f0f를 제안한다면 사람들은 저를 비웃었을 것입니다. 오늘날, 평범한 것이 아닙니다.
Wrapping it up
SVG 라인 애니메이션은 대체 효과를 만드는 재미 있고 독창적 인 기술입니다. 보다 생생하고 매력적인 로그인과 같은 지루한 사용자 작업을 수행하는 데 사용할 수 있습니다. 초점을 따르기 위해 모션과 애니메이션을 사용하는 것이 좋은 UX 패턴입니다. 사용자를 올바른 방향으로 안내하고 안내합니다.
이것은 anime-js로 애니메이트하는 것에 대한 제 3 회 기사입니다. anime-js에 대해 더 많이 읽고 싶다면 이전 기사를 추천합니다.
항상 그래 왔듯이, 배우고 참여하십시오. 모든 (거의) 의견을 환영합니다! 웹에 대한 내 모험에 대해 더 알고 싶다면 Twitter & Codepen에서 나를 팔로우 할 수 있습니다. 당신의 애니메이션에 행운을 빕니다!
0
댓글 0개