Comment créer une animation de transition dans Uniapp

Avec la popularité des applications pour appareils mobiles, les effets dynamiques colorés sont devenus un élément nécessaire pour le développement de nombreuses applications. Parmi eux, l’animation de transition est un moyen important pour améliorer l’expérience utilisateur. Dans le cadre de développement d'applications multiplateformes uniapp, il est également très simple et facile de mettre en œuvre une animation de transition.

Les animations de transition dans uniapp peuvent être divisées en deux catégories : les transitions natives et les transitions personnalisées. Les transitions natives sont les effets de transition par défaut du système, tandis que les transitions personnalisées peuvent être personnalisées en fonction de vos propres besoins.

1. Animation de transition native

L'implémentation de l'animation de transition native dans uniapp est très simple Il vous suffit d'ajouter l'attribut "animationType" dans le pages.json. fichier de configuration. Voici plusieurs effets d'animation de transition courants : pages.json配置文件中添加"animationType"属性即可。以下是几种常见的转场动画效果：

1. Push

在A页面中通过uni.navigateTo跳转到B页面时，可以设置转场动画为Push：

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

效果如下：

2. Pop

在B页面中通过uni.navigateBack返回到A页面时，可以设置转场动画为Pop：

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

效果如下：

3. Fade

可以设置转场动画为渐隐渐现的Fade效果：

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

效果如下：

4. None

可以设置转场动画为无效果的None：

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

效果如下：

二、自定义转场动画

uniapp中的自定义转场动画需要结合uni-app-plus插件和vue-router路由组件来实现。下面就来详细介绍一下自定义转场动画的实现过程。

1. 安装uni-app-plus插件

使用uni-app-plus插件可以让我们在uniapp中使用原生的一些API和插件，其中就包括iOS中UIKit和Android中android.view。因此，在使用自定义转场动画时，我们需要用到这个插件。

在项目目录下执行以下命令即可安装：

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

2. 修改vue-router配置

首先，我们需要在router.js配置文件中添加路由守卫，这样我们才能捕捉到从A页面跳转到B页面的事件，从而实现自定义转场动画。

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;

在这段代码中，我们添加了一个路由守卫beforeEach，当跳转到的页面配置了自定义转场动画时，就将当前页面和上一个页面的动画效果设置为左滑和右滑，这样就可以实现自定义转场动画了。

3. 实现自定义转场动画

在App.vue文件中，我们可以通过监听页面切换事件来实现自定义转场动画。首先，我们在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 = '';
      }
    });
  }
},

以上代码主要实现了以下功能：

1. 检测当前设备是否为iOS设备（因为Android设备默认支持自定义转场动画），如果是则执行以下步骤。如果不是，则直接跳过本流程。
2. 在路由变化之前通过UniViewJSBridge发送消息给原生，告诉它需要开启动画。
3. 监听UniViewJSBridge发送的消息，当原生的动画执行结束后，将router.app.animation赋为空字符串，代表动画效果已经结束。

然后，在<template></template>标签中添加以下代码：

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

这里我们使用了动画库animate.css来实现动画效果，因此需要在页面中引入：

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

最后，在<script></script>标签中添加以下代码：

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

在进入A页面前，将transType设置为"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'
});

这样，我们就完成了自定义转场动画的全部流程。在实际开发中，你也可以根据自己的需求来定义动画类型和动画效果。

总结

在uniapp中，实现转场动画非常简单，我们可以使用原生的转场动画，也可以通过结合uni-app-plus插件和vue-router

1. Push

Lorsque vous passez à la page B via uni.navigateTo dans la page A, vous pouvez définir le animation de transition vers Push : 🎜rrreee🎜L'effet est le suivant : 🎜🎜🎜

2. Pop

🎜Lorsque vous revenez à la page A via uni.navigateBack dans la page B , vous pouvez définir l'animation de transition sur Pop : 🎜rrreee🎜L'effet est le suivant : 🎜🎜🎜

3. Fade

🎜Vous pouvez définir l'animation de transition sur un effet de fondu : 🎜rrreee🎜L'effet C'est le suivant：🎜🎜🎜

Aucun

🎜Vous pouvez définir l'animation de transition sur Aucun sans effet : 🎜rrreee🎜L'effet est le suivant : 🎜🎜🎜🎜2. Animation de transition personnalisée🎜🎜L'animation de transition personnalisée dans uniapp doit être combiné. Le plug-in uni-app-plus et le composant de routage vue-router sont implémentés. Présentons en détail le processus de mise en œuvre de l’animation de transition personnalisée. 🎜

1. Installer le plug-in uni-app-plus

🎜L'utilisation du plug-in uni-app-plus nous permet d'utiliser certaines API natives et des plug-ins dans uniapp , notamment UIKit sur iOS et android.view sur Android. Par conséquent, lorsque nous utilisons une animation de transition personnalisée, nous devons utiliser ce plug-in. 🎜🎜Exécutez la commande suivante dans le répertoire du projet pour installer : 🎜rrreee

2. Modifier la configuration de vue-router

🎜Tout d'abord, nous devons installer le router . Ajoutez des gardes de routage au fichier de configuration js afin que nous puissions capturer l'événement de passage de la page A à la page B pour implémenter une animation de transition personnalisée. 🎜rrreee🎜Dans ce code, nous avons ajouté un garde de routage beforeEach Lorsque la page vers laquelle accéder est configurée avec une animation de transition personnalisée, les effets d'animation de la page actuelle et de la page précédente seront définis. faites-le glisser vers la gauche et vers la droite, afin que vous puissiez implémenter une animation de transition personnalisée. 🎜

3. Implémenter une animation de transition personnalisée

🎜Dans le fichier App.vue, nous pouvons y parvenir en écoutant les événements de changement de page. animations de transition. Tout d'abord, nous ajoutons le code suivant dans le cycle de vie monté : 🎜rrreee🎜Le code ci-dessus implémente principalement les fonctions suivantes : 🎜

1. Détecter si l'appareil actuel est un appareil iOS (car Les appareils Android le prennent en charge par défaut. Animation de transition personnalisée), si tel est le cas, effectuez les étapes suivantes. Sinon, ignorez directement ce processus.
2. Envoyez un message au natif via UniViewJSBridge avant que l'itinéraire ne change, lui indiquant que l'animation doit être activée.
3. Écoutez le message envoyé par UniViewJSBridge Lorsque l'animation native est exécutée, attribuez router.app.animation à une chaîne vide pour représenter l'animation. effet. C'est fini.

🎜Ensuite, ajoutez le code suivant dans la balise <template></template> : 🎜rrreee🎜Ici, nous utilisons la bibliothèque d'animation animate.css pour pour obtenir un effet d'animation, il doit donc être introduit dans la page : 🎜rrreee🎜Enfin, ajoutez le code suivant dans la balise <script></script> : 🎜rrreee🎜Avant d'entrer dans la page A, modifiez le transTypeDéfini sur "custom" : 🎜rrreee🎜De cette façon, nous avons terminé tout le processus de personnalisation de l'animation de transition. Dans le développement réel, vous pouvez également définir des types d'animation et des effets d'animation en fonction de vos propres besoins. 🎜🎜Résumé🎜🎜Dans uniapp, il est très simple d'implémenter une animation de transition. Nous pouvons utiliser l'animation de transition native, ou nous pouvons combiner le plug-in uni-app-plus et vue. -routercomposant de routage pour implémenter une animation de transition personnalisée. Au cours du processus de développement, nous devons choisir différents effets d'animation de transition en fonction des besoins réels pour améliorer l'expérience utilisateur. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!