uniapp转场动画怎么做-uni-app-PHP中文网

uniapp转场动画怎么做

WBOY

发布： 2023-05-22 10:24:36

原创

2013人浏览过

随着移动设备应用的普及，丰富多彩的动态效果已经成为了许多应用开发的必备要素。其中，转场动画就是提高用户使用体验的一种重要手段。在uniapp这个跨平台应用开发框架中，实现转场动画也非常简单易行。

uniapp中的转场动画可以分为两类：原生转场和自定义转场。原生转场就是系统默认的转场效果，而自定义转场则可以根据自己的需求进行定制。

一、原生转场动画

uniapp中原生转场动画的实现非常简单，只需要在pages.json配置文件中添加"animationType"属性即可。以下是几种常见的转场动画效果：

Push

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

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

登录后复制

效果如下：

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

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

登录后复制

效果如下：

Fade

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

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

登录后复制

效果如下：

None

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

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

登录后复制

效果如下：

二、自定义转场动画

啵啵动漫

一键生成动漫视频，小白也能轻松做动漫。

298

查看详情

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

安装uni-app-plus插件

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

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

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

登录后复制

修改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，当跳转到的页面配置了自定义转场动画时，就将当前页面和上一个页面的动画效果设置为左滑和右滑，这样就可以实现自定义转场动画了。

实现自定义转场动画

在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 = '';
      }
    });
  }
},

登录后复制

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

检测当前设备是否为iOS设备（因为Android设备默认支持自定义转场动画），如果是则执行以下步骤。如果不是，则直接跳过本流程。
在路由变化之前通过UniViewJSBridge发送消息给原生，告诉它需要开启动画。
监听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路由组件来实现自定义转场动画。在开发过程中，我们要根据实际需求选择不同的转场动画效果，以提高用户的使用体验。

以上就是uniapp转场动画怎么做的详细内容，更多请关注php中文网其它相关文章！