H5转场动画

Watch a free video lesson on official

在 uni-simple-router V3 版本中，默认为 H5 端加载了转场动画引擎，这使得你能够在 H5 端实现类似于 APP 的转场动画效果。转场动画引擎允许你使用任何 CSS3 动画来创建自定义的转场动画效果。

你可以根据自己的创意和感性思维，设计出独特的转场动画效果。如果你不想从头开始定义转场动画效果，你还可以直接使用非常受欢迎的 animate.css 库。这个库提供了几十种动画效果供你选择，总有一款适合你的需求。

安装 `animate.css`

npm install animate.css --save

装载动画效果

App.vue

html

// App.vue
<script setup lang="ts">
  import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
  onLaunch(() => {
    console.log("App Launch");
  });
</script>
<style>
  @import "animate.css";  
</style>

将我们已经下载好的 animate.css 库导入进项目。使得我们只需要使用该库中的动画名关键字即可得到动画，动画名关键字你可以在 animate.css 演示场找到。

router.js

// router.js
import {
    createRouter,
    type platformRule
} from '@/uni-simple-router'

const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM as platformRule,
    h5: {
        animation: {
            // 什么动作下执行动画
            includeNavtype: [`push`, `back`],
            // 动画时长单位秒
            animationTime: 0.3,
            // 做动画的节点 整个应用都做
            animationAppEl: `#app`,
            // 默认做动画名
            defaultAnimationType:`animate__slideInRight`,
            // 装载的动画库
            animationNodeMap: {
                // 动画名
                'animate__slideInRight': [
                    // 前进时触发的动画
                    [`animate__slideInRight`, `animate__slideOutLeft`],
                    // 后退时触发的动画
                    [`animate__slideInLeft`, `animate__slideOutRight`],
                ],
            }
        }
    },
    routes: [
      //...
    ]
})

如上所示，在你的 uni-simple-router 配置中，只需在 h5 选项下创建 animation 对象参数即可完成转场动画引擎的配置。如果你正在使用 TypeScript 进行开发，你可以轻松获得每个参数的提示和类型检查，提高开发效率。

以下是一些关键参数的说明：

includeNavtype: 指定触发动画的导航类型，这里设置为 push 和 back，表示在页面跳转和返回时执行动画。
animationTime: 动画的时长，以秒为单位。
animationAppEl: 设置动画应用的节点选择器，这里设置为 #app，表示整个应用都会执行动画。
defaultAnimationType: 根据 animationNodeMap 里面的动画配置，设置需要执行的动画名称。
animationNodeMap: 定义不同动画名称及其对应的前进和后退动画效果。在示例中，使用了 animate__slideInRight 作为动画名称，并定义了前进和后退时的动画效果。

通过以上配置，你可以为 push 和 back 导航动作中获得左右推拉挤压的转场动画效果。

随机动画效果

如果你喜欢无规律的动画效果，你可以在 animationNodeMap 中创建多组动画，并将 defaultAnimationType 设置为一个函数来控制动画的随机性。

// router.js
import {
    createRouter,
    type H5AnimationNodeMapRule
} from '@/uni-simple-router'

// 多组动画
const animationNodeMap:H5AnimationNodeMapRule = {
    'animate__slideInRight': [
        // 前进
        [`animate__slideInRight`, `animate__slideOutLeft`],
        // 后退
        [`animate__slideInLeft`, `animate__slideOutRight`],
    ],
    'animate__bounceInRight': [
        // 前进
        [`animate__bounceInRight`, `animate__bounceOutLeft`],
        // 后退
        [`animate__bounceInLeft`, `animate__bounceOutRight`],
    ],
    'animate__rotateInDownLeft': [
        // 前进
        [`animate__rotateInDownLeft`, `animate__rotateOutDownLeft`],
        // 后退
        [`animate__rotateInDownRight`, `animate__rotateOutDownRight`],
    ],
}

const router = createRouter({
  // 其他配置...
  h5: {
    animation: {
      // 其他参数...
      defaultAnimationType:(to,from)=>{
          const animations = Object.keys(animationNodeMap);
          const randomIndex = Math.floor(Math.random() * animations.length);
          return animations[randomIndex];
      },
      animationNodeMap
      // 其他参数...
    },
  },
  // 路由配置...
});

通过将 defaultAnimationType 设置为一个函数，你可以轻松实现随机动画效果。此外，你还可以利用 to 和 from 参数来实现更复杂的动画控制。

控制动画的开关

有时候你可能需要为某个页面关闭动画效果，或者只对页面中的某一块元素应用动画效果。在 uni-simple-router 中，你可以通过将 animationAppEl 参数设置为一个函数来轻松实现这些控制。

通过设置 animationAppEl 为一个函数，你可以根据需要动态决定应用动画的元素。函数接收一个参数 to，代表目标路由信息。你可以根据 to 的值来判断是否需要关闭动画或者只对特定元素应用动画。

下面是一个示例：

const router = createRouter({
  // 其他配置...
  h5: {
    animation: {
      // 其他参数...
      animationAppEl: (to, from) => {
          if (to.path === '/disable-animation') {
              // 关闭动画效果，返回null
              return null;
          } else if (to.path === '/partial-animation') {
              // 只对特定元素应用动画，返回元素的选择器
              return document.querySelector('#partial-animation-element');
          }
          // 默认应用动画效果，返回整个应用的根元素选择器
          return document.querySelector('#app');
      },
      // 其他参数...
    },
  },
  // 路由配置...
});

在上面的示例中，我们根据目标路径 to.path 的值来判断动画的应用情况。如果目标路径是 "/disable-animation"，则返回null，表示关闭动画效果。如果目标路径是 "/partial-animation"，则返回特定元素的选择器 "#partial-animation-element"，只对该元素应用动画效果。对于其他路径，则返回整个应用的根元素选择器 "#app"，以应用默认的动画效果。

通过灵活地配置 animationAppEl 参数，你可以实现为页面关闭动画效果或者局部应用动画效果的需求。这样，你可以更加细致地控制页面的过渡效果，提供更好的用户体验。

动画节点 `animationNodeMap`

在 h5->animation->animationNodeMap 中，允许你构建多组动画。你只要满足以下动画配置规则即可。

animationNodeMap 类型约束

interface H5AnimationNodeMapRule {
    [propName:string]:[
        /**
         * 前进时触发的动画规则
         * 数组第一位为新开窗口动画
         * 数组第二位为底层旧窗口动画
         */
        [string,string|undefined],
        /**
         * 后退时触发的动画规则
         * 数组第一位为新开窗口动画
         * 数组第二位为底层旧窗口动画
         */
        [string,string|undefined]|undefined
    ]
}

H5转场动画 ​

安装 animate.css ​

装载动画效果 ​

App.vue ​

router.js ​

随机动画效果 ​

控制动画的开关 ​

动画节点 animationNodeMap ​

animationNodeMap 类型约束 ​