제작 : Netlify ' S Million Devs SVG 애니메이션 사이트

이 기사는 애니메이션 프로세스에 중점을 둔 NetLify의 "Million Devs"마이크로 사이트의 생성에 대해 자세히 설명합니다. 이 사이트는 대형 SVG를 기초로 사용하며, 관리 가능한 VUE 구성 요소로 영리하게 분류하여 쉽게 관리 및 조작을합니다.

SVG 내에서 VUE 앱 구축

SVG는 X, Y, 너비 및 높이 정의 요소와 함께 좌표계 (전함을 생각하십시오!) 역할을합니다. 메인 VUE 앱에는 헤더와 단일 대규모 SVG가 포함되어 있습니다. 이 SVG는 더 작고 재사용 가능한 VUE 구성 요소로 더욱 분해됩니다.

• 경로 : Vuex State에 의해 제어되는 데스크탑 및 모바일 뷰를위한 별도의 구성 요소.
• 스테이션 : 27 개 개별 스테이션 구성 요소 (텍스트 라벨), 더 나은 조직을 위해 연도별로 구성된 장식 요소 (나무, 부시 등)와 함께.
• "당신은 여기 있습니다"마커 : 데스크탑보기 및 로그인 사용자를 위해 조건부로 렌더링됩니다.

SVG의 유연성은 중첩 된 SVG를 허용하여 각 어린이 SVG의 x, y, 너비 및 높이를 정의하여 부모 내에 정확하게 배치 할 수 있습니다.<g></g> 요소 (HTML divs와 유사) 그룹 구성 요소. 연도 구성 요소 예 :

<template>
  <g>
    <app-tree x="650" y="5500"></app-tree>
    <app-tree x="700" y="5550"></app-tree>
    <app-bush x="750" y="5600"></app-bush>
    <app-virtual x="1200" xsmall="50" y="6000" ysmall="15100"></app-virtual>
    <app-text num="20" url-slug="jamstack-conf-virtual" x="1400" xsmall="50" y="6500" ysmall="15600">
      <template v-slot:date>2020 년 5 월 27 일</template>
      <template v-slot:event>Jamstack Conf Virtual</template>
    </app-text>
    ...
  </g>
</template>

<script>
import {
  AppText,
  AppTree,
  AppBush,
  AppStreetlamp2,
} from "@/components";
export default {
  components: {
    AppText,
    AppTree,
    AppBush,
    AppStreetlamp2,
    AppBuildPlugins: () => import("@/components/AppBuildPlugins.vue"),
    AppMillion: () => import("@/components/AppMillion.vue"),
    AppVirtual: () => import("@/components/AppVirtual.vue"),
  },
};
</script>

성능 최적화를 위해 구성 요소의 동기 및 비동기로드에 유의하십시오.

GSAP 및 ScrollTrigger를 사용한 SVG 애니메이션

애니메이션은 GREENSOCK (GSAP) 및 ScrollTrigger 플러그인을 활용합니다. 핵심 애니메이션 논리 :

 "gsap"에서 {gsap} 가져 오기;
"gsap/scrolltrigger.js"에서 {scrolltrigger} 가져 오기;
"vuex"에서 {mapstate} 가져 오기;

gsap.registerplugin (scrolltrigger);

내보내기 기본값 {
  계산 : {
    ... MapState ([ "ToggleConfig", "StartConfig", "IsanimationDisabled", "viewportsize")),
  },
  방법 : {
    Millionanim () {
      vm = 이것;
      TL을하자;
      const isscrollelconfig = {
        Scrolltrigger : {
          트리거 :`. million $ {vm.num}`,
          토글 반응 : this.toggleconfig,
          시작 : this.StartConfig,
        },
        기본값 : {
          기간 : 1.5,
          편의 : "사인",
        },
      };
      // ... 애니메이션 논리 ...
    },
  },
  마운트 () {
    this.millionanim ();
  },
};

Vuex는 toggleConfig (애니메이션 트리거 제어) 및 startConfig (애니메이션 시작점 정의)를 관리합니다. 배너 애니메이션은 스크롤 트리거 애니메이션과 다르게 처리됩니다. 타임 라인은 정확한 애니메이션 컨트롤을 위해 레이블을 사용합니다. 레그 스윙 애니메이션의 예 :

 tl.add (`million $ {vm.num}})
  .에서(
    "#Front-Leg-R",
    {
      기간 : 0.5,
      회전 : 10,
      Transformorigin : "50% 0%",
      반복 : 6,
      요요 : 사실,
      편의 : "sine.inout",
    },
    `Million $ {vm.num}`
  ))
  .에서(
    "#Front-Leg-L",
    {
      기간 : 0.5,
      회전 : 10,
      Transformorigin : "50% 0%",
      반복 : 6,
      요요 : 사실,
      편의 : "sine.inout",
    },
    `million $ {vm.num} = 0.25`
  );

애니메이션 토글 및 접근성

Vuex-Controlled Toggle을 사용하면 사용자가 애니메이션을 비활성화 할 수 있습니다. isAnimationDisabled 상태가 시청되고 스크롤 트리거 애니메이션은 .kill() 사용하여 다시 시작할 수 있도록 정지 또는 재설정됩니다.

접근성 고려 사항에는 장식 요소에 role="img" 사용하는 것이 포함됩니다. 텍스트 구성 요소 예제는 SVG 텍스트에 액세스 할 수있는 방법을 보여줍니다.

<template>
  <a :href="https://www.php.cn/link/8f7f2375ba3e2ee3adf67d0e32c683d5">
    </a>
      <title id="analyticsuklaunch">분석 출시</title>
      <g>
        <text transform="translate(7.6 14)"><slot name="date">2016 년 7 월 13 일</slot></text>
        <text transform="translate(16.5 48.7)"><slot name="event">여기 뭔가</slot></text>
        <text transform="translate(16.5 70)"><slot name="event2"></slot></text>
        <text transform="translate(164.5 104.3)">이정표를보십시오</text>
      </g>
    
  
</template>

프로젝트의 Github 저장소는 오픈 소스입니다. 저자는 동료의 기여를 인정합니다.

위 내용은 제작 : Netlify ' S Million Devs SVG 애니메이션 사이트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!