공중 번호 SVG 애니메이션 상호작용 실전 코드

점점 더 많은 대중 번호 가 그림 메시지 에 SVG 애니메이션 의 상호작용 효 과 를 추 가 했 습 니 다.SVG 는 이벤트 트리거 애니메이션 을 지원 합 니 다.단독 적 으로 H5 를 만 드 는 것 에 비해 대중 번호 정 보 는 위 챗 서버 에 의존 하기 때문에 광고 주 에 게 서버 트 래 픽 비용 을 절약 합 니 다.이번에 우 리 는 애플 공중 호의 상호작용 소식 을 예 로 들 어 그 안의 효과 가 어떻게 실현 되 었 는 지 분석 했다.

애플 공식 번호 SVG 상호작용
애니메이션 은 주로 두 화면 으로 나 뉘 는데 첫 번 째 화면 에 플래시 문자 가 나타 나 면 사용자 가 상호작용 을 클릭 하 라 고 알려 준다.사용자 가 클릭 한 후에 첫 번 째 화면 애니메이션 이 사라 진 다음 에 두 번 째 화면의 gif 애니메이션 을 재생 하고 마지막 화면 은 제품 이미지 프레임 에 멈 춘 다.
1.첫 번 째 애니메이션 구축:
1.1 SVG 의 기본 구조


<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg"></svg>

뷰 박스 속성 을 먼저 소개 하 겠 습 니 다.
viewBox=”x, y, w, h”
x.y 는 SVG 내 모든 요소 의 상대 적 인 위 치 를 제어 합 니 다.w,h 는 svg 의 너비 와 높이 를 제어 하 는 데 사 용 됩 니 다.여기 의 너비 와 높이 는 svg 요소 의 dom 크기 가 아니 라 svg 의 내 해상도 입 니 다.svg 의 width,height 와 preserve AspectRatio 등 속성 값 의 영향 을 받 습 니 다.
preserveAspectRatio=”xMinYMin meet”
preserve AspectRatio 속성 은 view Box 의 크기 조정 과 정렬 방식 을 설정 하 는 데 사 용 됩 니 다.xMinYMin meet 은 시야 의 너비 와 높이 에 따라 크기 를 조정 하 는 등 비례 적 으로 크기 를 조정 하 는 것 을 말 합 니 다.이곳 의 시 구 는 width 와 height 값 으로 구 성 된 사각형 구역 을 말 합 니 다.
1.2 플래시 문자 추가


<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <text x="340" y="1750" fill="#fff" >>     ，    <</text>
</svg>

텍스트 의 위치 와 색상 속성 을 설정 합 니 다.
1.3 텍스트 에 애니메이션 을 추가 하려 면와탭 을 사용 해 야 합 니 다.


<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <g>
   <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
   <text x="340" y="1750" fill="#fff" >>     ，    <</text>
 </g>
</svg>

4.567917.animate 라벨 은 요소 의 특정한 속성 을 애니메이션 하 는 데 사 용 됩 니 다

attributeName 속성 명 을 지정 합 니 다.투명 성 opacity 입 니 다

begin 은 애니메이션 이 시작 되 는 시간 을 지정 합 니 다.분점 으로 구 분 된 값 일 수 있 습 니 다

dur 가 지정 한 애니메이션 의 시간 이 길 고 값 이 작 을 수록 애니메이션 이 빠 르 며 반대로 도 마찬가지 입 니 다

values 는 attributeName 속성의 변화 값 을 지정 합 니 다.단일 값 일 수도 있 고 구분 할 수도 있 는 목록 입 니 다.여기 1;0;1.투명 도 를 0->1->0 사이 에 바 꾸 어 반 짝 이 는 효 과 를 지정 합 니 다

g 라벨 은 group 의 줄 임 말로 요 소 를 조합 하 는 데 사 용 됩 니 다.그러면 animate 효 과 는 그룹 내 에 제 한 됩 니 다

1.4 첫 화면 과 애니메이션 이미지 추가


<svg version="1.1" viewBox="0 0 1080 620" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <g>
  <g>
   <foreignObject x="0" y="0" width="1080" height="1950">
    <svg ></svg>
   </foreignObject>
   <foreignObject x="0" y="0" width="1080" height="1950" transform="translate(1080, 0)">
    <svg xmlns="http://www.w3.org/2000/svg" >
    </svg>
   </foreignObject>
   <g>
    <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
    <text x="340" y="1750" fill="#fff" >>     ，    <</text>
   </g>
  </g>
 </g>
</svg>

4.567917.여기 서 우 리 는 표지 와 gif 애니메이션 그림 을 표시 하기 위해 두 개의 foreign Object 대상 을 추가 했다

foreignObject 는 svg 용기 로 이해 할 수 있 습 니 다.x,y,width,height,transform 변위 등 속성 을 지원 합 니 다.여기 서 우 리 는 gif 애니메이션 그림 을 포함 한 foreignObject 변위 속성 을 transform="translate(1080,0)로 설정 하여 gif 애니메이션 이 x 축 을 따라 자신의 너비 거 리 를 오른쪽으로 이동 하여 애니메이션 을 숨 기 고 이벤트 가 발생 할 때 까지 기다 릴 것 입 니 다

4.567917.우 리 는 요 소 를 서로 다른 그룹 에 넣 어서 뒤에 사건 을 추가 하 는 데 편리 합 니 다1.5 가입 이벤트 촉발


<svg version="1.1" viewBox="0 0 1080 620" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
 <animate attributeName="height" begin="click+3.5s" restart="never" dur="0.01s" from="620" to="0" fill="freeze"></animate>
 <animate attributeName="opacity" begin="click+3.5s" restart="never" dur="0.02s" from="1" to="0" fill="freeze"></animate>
 <g>
  <animateTransform attributeName="transform" type="translate" fill="freeze" calcMode="discrete" restart="never" keyTimes="0;0.000001;1" values="0 0;-1080 0;-1080 0" dur="1200s" begin="click"></animateTransform>
  <g>
   <foreignObject x="0" y="0" width="1080" height="1950">
    <svg ></svg>
   </foreignObject>
   <foreignObject x="0" y="0" width="1080" height="1950" transform="translate(1080, 0)">
    <svg xmlns="http://www.w3.org/2000/svg" >
    </svg>
   </foreignObject>
   <g>
    <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
    <text x="340" y="1750" fill="#fff" >>     ，    <</text>
   </g>
  </g>
 </g>
</svg>

animateTransform 은 요소 에 대해 변위,회전,경사 등 조작 을 하 는 데 사용 된다

transform,translate,scale,rotate,skewX,skewY 일 수 있 습 니 다

4.567917.fill,애니메이션 간극 의 충전 방식 을 지정 합 니 다.지원 하 는 매개 변 수 는 freeze,remove 입 니 다.reove 는 애니메이션 이 끝나 면 바로 시작 하 는 곳 으로 돌아 가 는 기본 값 입 니 다.freeze 는 애니메이션 이 끝 난 후의 상 태 를 유지 하 는 것 을 나타 낸다

restart,지원 하 는 매개 변 수 는 always,when NotActive,never 입 니 다.always 는 기본 값 으로 매번 애니메이션 을 다시 실행 하 는 것 을 표시 합 니 다.whenNotActive 는 애니메이션 이 진행 중 일 때 애니메이션 을 다시 시작 할 수 없 음 을 표시 합 니 다.never 는 애니메이션 을 한 번 만 실행 하 는 것 을 표시 합 니 다

begin,지연 시간 은 이미 소개 되 었 습 니 다.여기 서 click 을 보충 하면 클릭 후 즉시 촉발 하 는 것 을 표시 합 니 다.click+2 는 클릭 후 2 초 에 촉발 하 는 것 을 표시 합 니 다


<animateTransform attributeName="transform" type="translate" fill="freeze" calcMode="discrete" restart="never" keyTimes="0;0.000001;1" values="0 0;-1080 0;-1080 0" dur="1200s" begin="click"></animateTransform>

이 코드 는 마 우 스 를 클릭 한 후에 우 리 는 gif 애니메이션 이 있 는 그룹 을 왼쪽으로 1080 거 리 를 이동 시 켜 원래 숨겨 진 애니메이션 을 드 러 내 게 한 다 는 뜻 입 니 다.우리 가 gif 애니메이션 을 어떻게 숨 겼 는 지 기억 하 십 니까?


<animate attributeName="height" begin="click+3.5s" restart="never" dur="0.01s" from="620" to="0" fill="freeze"></animate>
 <animate attributeName="opacity" begin="click+3.5s" restart="never" dur="0.02s" from="1" to="0" fill="freeze"></animate>

여기에 애니메이션 애니메이션 두 세트 가 추가 되 었 습 니 다.저 는 애니메이션 재생 이 끝 난 후에 현재 svg 층 을 숨 기 고 싶 습 니 다.여 기 는 클릭 이벤트 3.5 초 후에 촉발 하 는 것 이 애니메이션 재생 시간 입 니 다.
2.두 번 째 화면 애니메이션 구축:
두 번 째 화면 애니메이션 은 정적 이미지 로 gif 애니메이션 의 마지막 프레임 의 제품 그림 을 표시 하 는 데 사용 되 며 새로운 지식 이 없습니다.궁금 한 점 이 있 으 면 본 고의 소스 코드 를 참고 할 수 있 습 니 다.
마지막 으로 두 화면 애니메이션 의 조직 방식 을 소개 합 니 다.저 는 모든 화면 애니메이션 을 하나의 단독 div 태그 에 놓 고 div 태그 의 높이 를 0 으로 설정 합 니 다.svg 요소 의 높이 는 부모 용기 의 높이 에 영향 을 받 지 않 기 때문에 그 결 과 는 부모 용기 의 포 지 셔 닝 position:absolute 를 설정 하 는 것 과 같 습 니 다.


<div >
 <svg></svg>
</div>
<div >
 <svg></svg>
</div>

이렇게 하면 우 리 는 여러 개의 애니메이션 을 각자 의 div 에 놓 을 수 있 습 니 다.animate 애니메이션 으로 이 svg 요 소 를 숨 긴 후에 다음 층 의 svg 는 상호작용 을 기다 리 는 것 을 보 여 줍 니 다.
3.공중 번호 문장 에 삽입
현재 사용 하고 있 는 그림 은 모두 로 컬 에 있 습 니 다.먼저 사용 하고 있 는 그림 을 공중 번호 소재 라 이브 러 리 에 업로드 하고 url 주 소 를 추출 하여 로 컬 그림 주 소 를 교체 해 야 합 니 다.

공중 번호 그림 편집기 자체 가 코드 편집 을 지원 하지 않 기 때문에 chrome 개발 자 도 구 를 통 해 코드 를 편집기 에 삽입 하고 저장 해 야 합 니 다.

큰 성 과 를 거 두 었 으 니 빨리 효 과 를 보아 라!
원본 코드 와 효과 설명:
https://dev.xingway.com/experiments/wechat/svg/
여기 서 공중 호 SVG 애니메이션 의 상호작용 실전 코드 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 공중 호 SVG 애니메이션 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 십시오.앞으로 저 희 를 많이 사랑 해 주세요!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

draw.io에서 svg 아이콘을 추가하여 선과 채우기를 편집하고 싶습니다.

에서 SVG로 다운로드 한 것을 사용. 아마 baseline-face-24px.svg 와 같은 파일명이 되어 있으므로, 텍스트 에디터로 열린다. (아래는보기 쉽도록 약간 성형되었습니다.) <path fill="non...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

공중 번호 SVG 애니메이션 상호작용 실전 코드

좋은 웹페이지 즐겨찾기