So erstellen Sie Übergangsanimationen in Uniapp

Mit der Beliebtheit mobiler Geräteanwendungen sind farbenfrohe dynamische Effekte zu einem notwendigen Element für die Entwicklung vieler Anwendungen geworden. Unter diesen ist die Übergangsanimation ein wichtiges Mittel zur Verbesserung der Benutzererfahrung. Im plattformübergreifenden Anwendungsentwicklungsframework uniapp ist es auch sehr einfach und leicht, Übergangsanimationen zu implementieren.

Übergangsanimationen in Uniapp können in zwei Kategorien unterteilt werden: native Übergänge und benutzerdefinierte Übergänge. Native Übergänge sind die Standardübergangseffekte des Systems, während benutzerdefinierte Übergänge an Ihre eigenen Bedürfnisse angepasst werden können.

1. Native Übergangsanimation

Die Implementierung der nativen Übergangsanimation in uniapp ist sehr einfach. Sie müssen nur das Attribut "animationType" in der Datei pages.json hinzufügen Konfigurationsdatei. Im Folgenden sind einige gängige Übergangsanimationseffekte aufgeführt: 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

Wenn Sie über uni.navigateTo auf Seite A zu Seite B springen, können Sie Folgendes festlegen Übergangsanimation zu Push: 🎜rrreee🎜Der Effekt ist wie folgt: 🎜🎜🎜

2. Pop

🎜Wenn Sie über uni.navigateBack auf Seite B zu Seite A zurückkehren, Sie können die Übergangsanimation auf Pop einstellen: 🎜rrreee🎜Der Effekt ist wie folgt: 🎜🎜🎜

3. Fade

🎜Sie können die Übergangsanimation auf den Fade-Effekt einstellen: 🎜rrreee🎜Der Effekt lautet wie folgt: 🎜🎜🎜

Keine

🎜Sie können die Übergangsanimation ohne Wirkung auf „Keine“ setzen: 🎜rrreee🎜Der Effekt ist wie folgt: 🎜🎜🎜🎜2. Benutzerdefinierte Übergangsanimation🎜🎜Die benutzerdefinierte Übergangsanimation in Uniapp muss kombiniert werdenuni-app-plus Plug-in und vue-router Routing-Komponente sind implementiert. Lassen Sie uns den Implementierungsprozess der benutzerdefinierten Übergangsanimation im Detail vorstellen. 🎜

1. Installieren Sie das uni-app-plus-Plug-in

🎜Mit dem uni-app-plus-Plug-in können wir einige native APIs verwenden und Plug-ins in uniapp, einschließlich UIKit in iOS und android.view in Android. Daher müssen wir bei der Verwendung einer benutzerdefinierten Übergangsanimation dieses Plug-In verwenden. 🎜🎜Führen Sie den folgenden Befehl im Projektverzeichnis aus, um ihn zu installieren: 🎜rrreee

2. Vue-Router-Konfiguration ändern

🎜Zuerst müssen wir router installieren . Fügen Sie der js-Konfigurationsdatei Routing-Guards hinzu, damit wir das Ereignis des Sprungs von Seite A zu Seite B erfassen können, um eine benutzerdefinierte Übergangsanimation zu implementieren. 🎜rrreee🎜In diesem Code haben wir einen Routing-Guard beforeEach hinzugefügt. Wenn die Seite, zu der gesprungen werden soll, mit einer benutzerdefinierten Übergangsanimation konfiguriert ist, werden die Animationseffekte der aktuellen Seite und der vorherigen Seite festgelegt Es lässt sich nach links und nach rechts schieben, sodass Sie benutzerdefinierte Übergangsanimationen implementieren können. 🎜

3. Benutzerdefinierte Übergangsanimation implementieren

🎜In der Datei App.vue können wir dies erreichen, indem wir Seitenwechselereignisse abhören. Benutzerdefiniert Übergangsanimation. Zuerst fügen wir den folgenden Code im Lebenszyklus mount hinzu: 🎜rrreee🎜Der obige Code implementiert hauptsächlich die folgenden Funktionen: 🎜

1. Erkennen Sie, ob das aktuelle Gerät ein iOS-Gerät ist (weil Android-Geräte unterstützen dies standardmäßig. (Benutzerdefinierte Übergangsanimation). Wenn ja, führen Sie die folgenden Schritte aus. Wenn nicht, überspringen Sie diesen Vorgang direkt.
2. Senden Sie über UniViewJSBridge eine Nachricht an den Einheimischen, bevor sich die Route ändert, und teilen Sie ihm mit, dass die Animation aktiviert werden muss.
3. Hören Sie sich die von UniViewJSBridge gesendete Nachricht an. Wenn die native Animation ausgeführt wird, weisen Sie router.app.animation einer leeren Zeichenfolge zu, um die Animation darzustellen Wirkung. Es ist vorbei.

🎜Dann fügen Sie den folgenden Code in das <template></template>-Tag ein: 🎜rrreee🎜Hier verwenden wir die Animationsbibliothek animate.css, um Um einen Animationseffekt zu erzielen, muss er in die Seite eingefügt werden: 🎜rrreee🎜Fügen Sie abschließend den folgenden Code in das Tag <script></script> ein: 🎜rrreee🎜Ändern Sie transTypeAuf "custom" setzen: 🎜rrreee🎜Auf diese Weise haben wir den gesamten Prozess der Anpassung der Übergangsanimation abgeschlossen. In der tatsächlichen Entwicklung können Sie auch Animationstypen und Animationseffekte entsprechend Ihren eigenen Anforderungen definieren. 🎜🎜Zusammenfassung🎜🎜In uniapp ist es sehr einfach, Übergangsanimationen zu implementieren. Wir können die native Übergangsanimation verwenden oder das Plug-in uni-app-plus und vue kombinieren -routerRouting-Komponente zum Implementieren einer benutzerdefinierten Übergangsanimation. Während des Entwicklungsprozesses müssen wir basierend auf den tatsächlichen Anforderungen verschiedene Übergangsanimationseffekte auswählen, um das Benutzererlebnis zu verbessern. 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Übergangsanimationen in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!