Bagaimana untuk membuat animasi peralihan dalam uniapp

Dengan populariti aplikasi peranti mudah alih, kesan dinamik berwarna-warni telah menjadi elemen penting untuk banyak pembangunan aplikasi. Antaranya, animasi peralihan adalah cara penting untuk meningkatkan pengalaman pengguna. Dalam uniapp rangka kerja pembangunan aplikasi merentas platform, ia juga sangat mudah dan mudah untuk melaksanakan animasi peralihan.

Animasi peralihan dalam uniapp boleh dibahagikan kepada dua kategori: peralihan asli dan peralihan tersuai. Peralihan asli ialah kesan peralihan lalai sistem, manakala peralihan tersuai boleh disesuaikan mengikut keperluan anda sendiri.

1. Animasi peralihan asli

Pelaksanaan animasi peralihan asli dalam uniapp adalah sangat mudah Anda hanya perlu menambah atribut pages.json dalam fail konfigurasi "animationType". Berikut ialah beberapa kesan animasi peralihan biasa:

1. Tolak

Apabila melompat ke halaman B hingga uni.navigateTo di halaman A, anda boleh menetapkan animasi peralihan Untuk Tekan:

uni.navigateTo({
  url: '/pages/b-page/b-page',
  animationType: 'push',
  animationDuration: 500
});

Kesannya adalah seperti berikut:

2. Pop

kembali melalui uni.navigateBack di halaman B Apabila mencapai halaman A, anda boleh menetapkan animasi peralihan kepada Pop:

uni.navigateBack({
  animationType: 'pop',
  animationDuration: 500
});

Kesannya adalah seperti berikut:

3. Pudar

Anda boleh menetapkan animasi peralihan kepada kesan pudar:

uni.navigateTo({
  url: '/pages/b-page/b-page',
  animationType: 'fade',
  animationDuration: 500
});

Kesannya adalah seperti berikut:

4. Tiada

Anda boleh menetapkan animasi peralihan kepada Tiada tanpa kesan:

uni.navigateTo({
  url: '/pages/b-page/b-page',
  animationType: 'none',
  animationDuration: 500
});

Kesannya adalah seperti berikut:

2. Sesuaikan animasi peralihan

Animasi peralihan tersuai dalam uniapp perlu dilaksanakan dengan menggabungkan pemalam uni-app-plus dan komponen penghalaan vue-router. Mari perkenalkan proses pelaksanaan animasi peralihan tersuai secara terperinci.

1. Pasang pemalam uni-app-plus

Menggunakan pemalam uni-app-plus membolehkan kami menggunakan beberapa API asli dan pemalam dalam uniapp, termasuk dalam iOSUIKit dan android.view dalam Android. Oleh itu, apabila menggunakan animasi peralihan tersuai, kita perlu menggunakan pemalam ini.

Laksanakan arahan berikut dalam direktori projek untuk dipasang:

npm install uni-app-plus --save-dev

2. Ubah suai konfigurasi vue-router

Pertama, kita perlu mengkonfigurasi dalam router.js Tambah pengawal penghalaan pada fail supaya kami boleh menangkap peristiwa melompat dari halaman A ke halaman B untuk melaksanakan animasi peralihan tersuai.

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, from, next) => {
  if (to.meta.animation === 'custom') {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const prevPage = pages[pages.length - 2];
    currentPage.animation = 'slide-left';
    prevPage.animation = 'slide-right';
  }
  next();
});

export default router;

Dalam kod ini, kami menambah pengawal penghalaanbeforeEach Apabila halaman yang hendak dilompat dikonfigurasikan dengan animasi peralihan tersuai, kesan animasi halaman semasa dan halaman sebelumnya akan ditetapkan. Leret ke kiri dan kanan, supaya anda boleh melaksanakan animasi peralihan tersuai.

3. Melaksanakan animasi peralihan tersuai

Dalam fail App.vue, kami boleh melaksanakan animasi peralihan tersuai dengan mendengar peristiwa penukaran halaman. Mula-mula, kami menambah kod berikut dalam kitaran hayat mounted:

mounted() {
  if (uni.getSystemInfoSync().platform === 'ios') {
    const router = this.$router;
    router.beforeEach(function(to, from, next) {
      if (from.meta.animation === 'custom') {
        UniViewJSBridge.publishHandler('animation', {
          type: 'set',
          pageParam: {
            animationEnabled: true
          }
        }, function() {
          router.app.animation = uni.createFromIconfontCN({
            scriptUrl: "//at.alicdn.com/t/font_2581006_ourmsf7tpoi.js"
          }).css({
            animationDuration: '0.4s',
            animationTimingFunction: 'ease-in'
          }).toStyle();
          next();
        })
      } else {
        router.app.animation = '';
        next();
      }
    });
    UniViewJSBridge.subscribeHandler('animation', function(dat) {
      if (dat.type === 'finish') {
        router.app.animation = '';
      }
    });
  }
},

Kod di atas terutamanya melaksanakan fungsi berikut:

1. Mengesan sama ada peranti semasa ialah peranti iOS ( kerana peranti Android lalai Menyokong animasi peralihan tersuai), jika ya, lakukan langkah berikut. Jika tidak, langkau proses ini secara langsung.
2. Hantar mesej kepada orang asli melalui UniViewJSBridge sebelum laluan berubah, memberitahu bahawa animasi perlu dihidupkan.
3. memantau mesej yang dihantar oleh UniViewJSBridge Apabila pelaksanaan animasi asli tamat, tetapkan router.app.animation pada rentetan kosong, menunjukkan bahawa kesan animasi telah tamat.

Kemudian, tambahkan kod berikut dalam tag <template>:

<view :class="{ 'animated': animation }">
  <router-view class="page"></router-view>
</view>

Di sini kami menggunakan perpustakaan animasi animate.css untuk mencapai kesan animasi, jadi ia perlu diperkenalkan dalam halaman:

<link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css">

Akhir sekali, tambah kod berikut dalam teg <script>:

data() {
  return {
    animation: ''
  };
},

Sebelum memasuki halaman A, tetapkan transType kepada "custom":

uni.navigateTo({
  url: '/pages/b-page/b-page',
  animationType: 'pop',
  animationDuration: 500,
  events: {
    finish: () => {
      console.log('finish');
    }
  },
  complete: () => {
    setTimeout(() => {
      this.animation = '';
    }, 500);
  },
  fail: () => {
    console.log('fail');
  },
  transType: 'custom'
});

Dengan cara ini, kami telah menyelesaikan keseluruhan proses menyesuaikan animasi peralihan. Dalam pembangunan sebenar, anda juga boleh menentukan jenis animasi dan kesan animasi mengikut keperluan anda sendiri.

Ringkasan

Dalam uniapp, sangat mudah untuk melaksanakan animasi peralihan Kita boleh menggunakan animasi peralihan asli, atau kita boleh melaksanakannya sendiri dengan menggabungkan pemalam uni-app-plus dan pemalam. vue-router komponen penghalaan. Semasa proses pembangunan, kita perlu memilih kesan animasi peralihan yang berbeza berdasarkan keperluan sebenar untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk membuat animasi peralihan dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!