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>标签中添加以下代码：

<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>标签中添加以下代码：

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

2. Pop

3. Fade

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

2. Modifier la configuration de vue-router

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

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.

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!