사용자 정의 디렉토리를 사용하여 Vue 애니메이션 관리

개요

여러분 인터넷 스크롤 애니메이션 좋아하세요?
나는 보는 것을 좋아하지만, 매번 애니메이션을 다시 쓸 때마다 매우 번거롭다고 느낀다.
창의학과 웹사이트에서 넥스트가 사용된 느낌이에요.js(Vue.js)입니다. 그러나 표준 기능인 사용자 정의 지시를 사용한 애니메이션 관리는 유지하기 쉬우므로 공유합니다.

이 기사에서 할 일

할 일

지도적 소개

사용자 정의 디렉토리 소개

스크롤 지시 구현

화면 내 판정 설치

카탈로그 및 애니메이션 처리 연결 사용자화

하지 않는 일

vue와 gsap의 기법 설명

풍부한 애니메이션 모델에 대한 소개

개발 환경

Mac Big Sur(v11.6)
Google Chrome ver:100.0.4896.75(Official Build)(x86_64)
Nuxt.js(@nuxt/cli v2.15.8)

지시성

무엇을 지시라고 하는가

Vue에 표준v-model과 v-show 등의 지시가 탑재됐다.
일부를 제외하고는 모두 JS의 공식과 함께 사용된다.
예를 들어 v-if 조건식'진짜','가짜'를 통해 화면 표시를 제어할 수 있다.

// これは画面に表示されます。
<div v-if="1 + 1　== 2">
    <p>Hello World!</p>
</div>

// これはif以降の式がfalseなので表示されません。
<div v-if="1 + 1 == 5">
    <p>Hello World!</p>
</div>

공식 정의(출전: Vue.공식 사이트
디렉터리는 v-에서 시작하는 특수 속성입니다.디렉토리 속성 값은 단일 JavaScript 방정식이 필요합니다. 그러나 v-for는 예외입니다. 아래에 설명되어 있습니다.지도 작업은 속성 값의 공식이 변경될 때 부작용을 DOM에 다시 적용하는 것이다.이 슬라이드에서 살펴본 예를 살펴보겠습니다.

사용자 정의 디렉토리

Vue에는 스크롤 동작 및 양에 해당하는 지침이 없습니다.
따라서 v-xxxx처럼 자신이 미리 설치한 사용자 정의 디렉터리에 로그인함으로써 더욱 풍부한 표현을 할 수 있다.
https://jp.vuejs.org/v2/guide/custom-directive.html

스크롤 지시 만들기

우선 스크롤을 만들 때 스크롤의 양을 출력합니다.
customDirectives.js

// Vueオブジェクトをインポート
import Vue from "vue";

// 第一引数にディレクティブ名を入れます(v-xxxxのxxxx部分)
// 今回の場合はv-scrollとなります
Vue.directive("scroll", {
  inserted: () => {
    const handleOnScroll = () => console.log(window.scrollY);
    window.addEventListener("scroll", function);
  }
});

sample.vue

<template>
    <div v-scroll></div>
</template>

이렇게 굴리면 트리거의 굴림량을 증가시킬 수 있다⏬

Vue 실례를 사용할 때 데이터나 methods와 같은 층에서directives를 지정합니다.
Nuxt.js를 사용할 때cumtomDirectives입니다.pluggin 디렉터리에서 js 등 파일을 만들고 nuxt.config.js에 읽기 처리를 씁니다.

화면 내 판정을 하도록 하겠습니다.

전형v-scroll은 전체 창의 스크롤 양을 표시하기 때문에 UI에 따라 구분해서 사용할 수 없습니다.
따라서 설치된 UI가 전체 창의 어디에 있는지 확인하십시오.
interted의 첫 번째 매개 변수에서 사용자 정의 지시를 가진 요소를 얻을 수 있습니다.
customDirectives.js

Vue.directive("scroll", {
  // 第１引数: elでHTML要素を取得
  inserted: (el) => {
    let handleOnScroll = () => {
      const positionTop = el.getBoundingClientRect().top;
      console.log(positionTop);
    };
    window.addEventListener("scroll", function);
  }
});

이렇게 v-scroll하면 출력됩니다.
이것을 응용하여 굴러갈 때 요소가 화면 안에 있는지 아닌지를 판단한다.
화면 내 판정

画面下端 < HTML要素の下端 && HTML要素の上端 < 画面上端

에서 진행됩니다.
이걸 js로 표현하면...
customDirectives.js

Vue.directive("scroll", {
  inserted: (el) => {
    let handleOnScroll = () => {
      // 画面内判定がtrueの際に実行
      if (isInScreen(el)) {
        console.log("画面の中にいるよ〜〜");
        window.removeEventListener("scroll", handleOnScroll);
      }
    };
    window.addEventListener("scroll", handleOnScroll);
  },
});
// 画面内判定処理の切り出し
const isInScreen = (el) => {
  const { top: elementTop, bottom: elementBottom } = el.getBoundingClientRect();
  // 画面下端 < HTML要素の下端 && HTML要素の上端 < 画面上端
  return (window.screenTop < elementTop && elementBottom < window.innerHeight);
};

그러니까HTML要素の上端と画面最上端の距離의 UI가 화면에 표시되면 v-scroll입니다.

애니메이션 처리에 연결

스크롤하는 동안 UI 화면에서 판단이 제거됩니다.
그리고 잘린 애니메이션과 연결합시다.
이번에는 애니메이션 라이브러리에서 gsap을 사용합니다.
우선 bind로 HTML 요소의 투명도를 0으로 설정합니다
bind는 사용자 정의 지시가 있는 HTML 요소를 렌더링할 때 수행되는 함수입니다.
customDirectives.js

import Vue from "vue";
import gsap from "gsap";

Vue.directive("animateFadeIn", {
  // 
  bind: (el) => gsap.set(el, {
    opacity: 0,
  }),
  inserted: (el) => {
    let handleOnScroll = () => {
      // 画面内判定がtrueの際に実行
      if (isInScreen(el)) {
        window.removeEventListener("scroll", handleOnScroll);
	//アニメーション関数にHTML要素を引渡し
        animateFadeIn(el);
      }
    };
    window.addEventListener("scroll", handleOnScroll);
  },
});

const isInScreen = (el) => {
  const { top: elementTop, bottom: elementBottom } = el.getBoundingClientRect();
  return window.screenTop < elementTop && elementBottom < window.innerHeight);
};

// 1秒間で透明度を1にフェードイン
const animateFadeIn = (el) => gsap.to(el, 1, {
  opacity: 1,
});

이런 느낌으로 스크롤하면 요소가 화면 안에 들어갈 때 애니메이션에 담겨진다.

이렇게 되면

카탈로그 처리

화면 내 판정(사용자 동작의 수치 판정)

애니메이션 처리

분리 관리 가능.
애니메이션과 화면 내 판정은 画面の中にいるよ〜〜 디렉터리 등으로 나눌 수 있다.

끝맺다

내가 이 방법으로 애니메이션을 관리하는 것은 이미 매우 수월하지만 아마도 가장 좋은 방법은 아닐 것이다.
물론 프로젝트와 조직 단위에 따라 개발 환경과 문화도 달라진다.
참고로
인생에서 이런 기사는 처음이에요.
유지 보수가 더욱 쉽도록 CPU(GPU)를 부드럽게 애니메이션 학습할 수 있습니다.
대마하리 주세요.
시청해 주셔서 감사합니다.