Fungsi animasi dalam Vue3: mencapai kesan animasi yang hebat

Vue3 ialah versi terbaharu Vue, dan ia juga telah dipertingkatkan dan dikemas kini dari segi animasi. Fungsi animasi dalam Vue3 dilaksanakan dengan menggunakan komponen API Komposisi dan Peralihan, membolehkan pembangun mencapai pelbagai kesan animasi yang hebat dengan lebih mudah.

1. API Komposisi

API Komposisi ialah ciri baharu yang diperkenalkan dalam Vue3, yang boleh mengoptimumkan kebolehbacaan, kebolehselenggaraan dan kebolehgunaan semula komponen. Dalam API Komposisi, kita boleh menggunakan ref dan reaktif untuk mencipta data responsif, menggunakan watchEffect dan dikira untuk memantau perubahan dalam pembolehubah dan sifat yang dikira, dan menggunakan onMounted dan onUnmounted untuk melaksanakan fungsi cangkuk kitaran hayat, dsb.

Dari segi animasi, API Komposisi menyediakan dua fungsi: useAnimation dan useTransition.

1. useAnimation

Fungsi useAnimation membolehkan kami mencipta fungsi animasi di dalam komponen untuk mengendalikan beberapa logik animasi yang kompleks. Sintaks asasnya adalah seperti berikut:

import { useAnimation } from 'vue';

export default {
  setup() {
    const {animate, stop} = useAnimation();
    
    return {
      animate,
      stop
    }
  }
}

Menggunakan fungsi yang dikembalikan oleh useAnimation, kita boleh mencipta satu siri bingkai utama animasi dan kemudian melaksanakan animasi ini melalui fungsi animasi. Sebagai contoh, kita boleh mencipta animasi penskalaan seperti ini:

const { animate, stop } = useAnimation();
  
const scale = animate({
  0: {
    transform: 'scale(1)',
  },
  0.5: {
    transform: 'scale(1.2)',
  },
  1: {
    transform: 'scale(1)',
  },
}, {
  duration: 1000,
  easing: 'ease-in-out',
  iterations: Infinity,
  direction: 'alternate',
});

Dalam contoh ini, kita menggunakan fungsi animasi untuk mencipta animasi penskalaan Dengan menentukan atribut transformasi kerangka utama, elemen boleh dibesarkan dan dikurangkan . Dalam parameter kedua fungsi animasi, kita boleh menetapkan tempoh, fungsi pelonggaran, bilangan lelaran, dan arah main balik animasi. Dengan cara ini, kami boleh melaksanakan kesan animasi zum dalam komponen Vue kami.

2. useTransition

Fungsi useTransition membolehkan kami melakukan beberapa operasi animasi peralihan apabila elemen masuk atau keluar. Sintaks asasnya adalah seperti berikut:

import { useTransition } from 'vue';

export default {
  setup() {
    const { enter, leave } = useTransition();

    return {
      enter,
      leave
    }
  }
}

Menggunakan fungsi masuk dan keluar, kita boleh menetapkan kesan peralihan animasi yang berbeza untuk gelagat masuk dan keluar elemen Sebagai contoh, dalam contoh berikut, kita menetapkan fade in dan fade out untuk elemen.

<template>
  <div :class="{'opacity-0': !show}" v-enter="fadeIn" v-leave="fadeOut"></div>
</template>

<script>
import { useTransition } from 'vue';

export default {
  setup() {
    const { enter, leave } = useTransition();

    const fadeIn = enter((el, done) => {
      el.style.opacity = '0';
      setTimeout(() => {
        el.style.opacity = '1';
        done();
      }, 1000)
    });

    const fadeOut = leave((el, done) => {
      el.style.opacity = '1';
      setTimeout(() => {
        el.style.opacity = '0';
        done();
      }, 1000)
    });

    return {
      fadeIn,
      fadeOut,
      show: true
    }
  }
}
</script>

Dalam contoh ini, kami melaksanakan fungsi fadeIn dan fadeOut masing-masing apabila elemen masuk dan keluar, dan melakukan kesan peralihan fade-in dan fade-out dengan menghantar yang berbeza fungsi panggil balik. Dalam fungsi panggil balik, kita boleh menggunakan fungsi setTimeout untuk melambatkan pelaksanaan animasi, dan menggunakan parameter yang telah dilakukan untuk mengenal pasti sama ada animasi selesai untuk mencapai kesan peralihan animasi.

2. Komponen Peralihan

Selain fungsi animasi yang disediakan oleh API Komposisi, Vue3 juga menyediakan komponen Peralihan untuk membantu kami mencapai beberapa kesan animasi peralihan asas, seperti fade in dan fade keluar, kiri Slaid, slaid ke atas, putar, dsb. Sintaks asasnya adalah seperti berikut:

<transition name="fade">
  <div v-if="show">HELLO VUE3</div>
</transition>

Dalam komponen Peralihan, kita boleh menentukan nilai nama yang berbeza untuk menggunakan kesan animasi peralihan yang berbeza, seperti pudar, slaid ke kiri, slaid ke atas, putar, dsb. Dalam Vue3, banyak kesan peralihan disediakan secara lalai, dan ia boleh dicapai dengan menetapkan nilai nama. Sebagai contoh, kita boleh melaksanakan kesan animasi fade-in dan fade-out yang mudah melalui contoh berikut:

<template>
  <div>
    <button @click="show = !show">Show/Hide</button>
    <hr>
    <transition name="fade">
      <p v-if="show">Hello Vue3</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease-in-out;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Dalam contoh ini, kita mencapai kesan fade-in dan fade-out dengan menetapkan nama untuk pudar , dan menukar paparan secara dinamik Nilai untuk mengawal paparan dan menyembunyikan unsur. Dalam kesan animasi, kita boleh menggunakan atribut peralihan CSS3 untuk menetapkan kesan animasi peralihan, menetapkan tempoh animasi dan fungsi pelonggaran melalui .fade-enter-active dan .fade-leave-active, dan tetapkan tempoh animasi dan fungsi pelonggaran melalui .fade-enter dan .fade -leave-untuk menetapkan keadaan apabila animasi bermula dan tamat.

Ringkasan:

Dalam Vue3, fungsi animasi dan komponen Peralihan ialah dua cara biasa untuk mencapai kesan animasi yang pertama adalah lebih fleksibel dan bebas serta boleh mengendalikan logik animasi yang lebih kompleks. Yang terakhir adalah lebih mudah dan lebih mudah untuk digunakan, sesuai untuk beberapa kesan animasi peralihan asas. Tidak kira kaedah yang digunakan, anda boleh menggunakan sifat dan fungsi CSS3 untuk mencapai pelbagai kesan animasi yang menarik dan menambah warna yang meriah pada aplikasi kami.

Atas ialah kandungan terperinci Fungsi animasi dalam Vue3: mencapai kesan animasi yang hebat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!