How to make transition animation in uniapp

With the popularity of mobile device applications, colorful dynamic effects have become an essential element for many application development. Among them, transition animation is an important means to improve user experience. In the cross-platform application development framework uniapp, it is also very simple and easy to implement transition animation.

Transition animations in uniapp can be divided into two categories: native transitions and custom transitions. Native transitions are the default transition effects of the system, while custom transitions can be customized according to your own needs.

1. Native transition animation

The implementation of native transition animation in uniapp is very simple. You only need to add "animationType in the pages.json configuration file " attributes are sufficient. The following are several common transition animation effects:

1. Push

When jumping to page B through uni.navigateTo in page A , you can set the transition animation to Push:

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

The effect is as follows:

2. Pop

on page B When returning to page A through uni.navigateBack, you can set the transition animation to Pop:

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

The effect is as follows:

3. Fade

You can set the transition animation to the fade effect of fading in and out:

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

The effect is as follows:

4. None

You can set the transition animation to None with no effect:

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

The effect is as follows:

2. Custom transition animation

The custom transition animation in uniapp needs to be implemented in combination with the uni-app-plus plug-in and vue-router routing component. . Let’s introduce the implementation process of custom transition animation in detail.

1. Install the uni-app-plus plug-in

Using the uni-app-plus plug-in allows us to use some native APIs and APIs in uniapp Plug-ins, including UIKit in iOS and android.view in Android. Therefore, when using custom transition animation, we need to use this plug-in.

Execute the following command in the project directory to install:

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

2. Modify vue-router configuration

First, we need to install it in router .jsAdd routing guards to the configuration file so that we can capture the event of jumping from page A to page B to achieve custom transition animation.

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;

In this code, we added a routing guardbeforeEach. When the page to be jumped to is configured with a custom transition animation, the current page and the previous page will be The animation effect is set to slide left and right, so that you can implement custom transition animation.

3. Implementing custom transition animation

In the App.vue file, we can implement custom transitions by listening to page switching events animation. First, we add the following code in the mounted life cycle:

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

The above code mainly implements the following functions:

1. Detect whether the current device is an iOS device ( Because Android devices support custom transition animations by default), if so, perform the following steps. If not, skip this process directly.
2. Send a message to the native through UniViewJSBridge before the routing changes, telling it that animation needs to be turned on.
3. Listen to the message sent by UniViewJSBridge. When the native animation execution ends, assign router.app.animation to an empty string, indicating that the animation effect has ended.

Then, add the following code in the <template></template> tag:

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

Here we use the animation library animate.css To achieve the animation effect, it needs to be introduced in the page:

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

Finally, add the following code in the <script></script> tag:

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

Before entering page A , set transType to "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'
});

In this way, we have completed the entire process of customizing the transition animation. In actual development, you can also define animation types and animation effects according to your own needs.

Summary

In uniapp, it is very simple to implement transition animation. We can use the native transition animation, or we can combine the uni-app-plus plug-in and vue-routerRouting component to implement custom transition animation. During the development process, we need to choose different transition animation effects based on actual needs to improve the user experience.

The above is the detailed content of How to make transition animation in uniapp. For more information, please follow other related articles on the PHP Chinese website!