> 웹 프론트엔드 > uni-app > uniapp에서 전환 애니메이션을 만드는 방법

uniapp에서 전환 애니메이션을 만드는 방법

WBOY
풀어 주다: 2023-05-22 10:24:36
원래의
1900명이 탐색했습니다.

모바일 장치 애플리케이션의 인기로 인해 다채로운 동적 효과는 많은 애플리케이션 개발에 필수 요소가 되었습니다. 그 중 전환 애니메이션은 사용자 경험을 향상시키는 중요한 수단입니다. 크로스 플랫폼 애플리케이션 개발 프레임워크 uniapp에서는 전환 애니메이션을 구현하는 것도 매우 간단하고 쉽습니다.

uniapp의 전환 애니메이션은 기본 전환과 사용자 정의 전환이라는 두 가지 범주로 나눌 수 있습니다. 기본 전환은 시스템의 기본 전환 효과이며 사용자 정의 전환은 필요에 따라 사용자 정의할 수 있습니다.

1. 네이티브 전환 애니메이션

uniapp에서 네이티브 전환 애니메이션을 구현하는 방법은 매우 간단합니다. pages.json"animationType" 속성만 추가하면 됩니다. 구성 파일. 다음은 몇 가지 일반적인 전환 애니메이션 효과입니다. pages.json配置文件中添加"animationType"属性即可。以下是几种常见的转场动画效果:

  1. Push

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

uni.navigateTo({
  url: '/pages/b-page/b-page',
  animationType: 'push',
  animationDuration: 500
});
로그인 후 복사

效果如下:

uniapp에서 전환 애니메이션을 만드는 방법

  1. Pop

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

uni.navigateBack({
  animationType: 'pop',
  animationDuration: 500
});
로그인 후 복사

效果如下:

uniapp에서 전환 애니메이션을 만드는 방법

  1. Fade

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

uni.navigateTo({
  url: '/pages/b-page/b-page',
  animationType: 'fade',
  animationDuration: 500
});
로그인 후 복사

效果如下:

uniapp에서 전환 애니메이션을 만드는 방법

  1. None

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

uni.navigateTo({
  url: '/pages/b-page/b-page',
  animationType: 'none',
  animationDuration: 500
});
로그인 후 복사

效果如下:

uniapp에서 전환 애니메이션을 만드는 방법

二、自定义转场动画

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

  1. 实现自定义转场动画

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. 푸시
페이지 A에서 uni.navigateTo를 통해 페이지 B로 이동할 때 애니메이션을 푸시로 전환: 🎜rrreee🎜효과는 다음과 같습니다: 🎜🎜 uniapp에서 전환 애니메이션을 만드는 방법🎜
🎜B페이지에서 uni.navigateBack을 통해 A페이지로 돌아갈 때, 전환 애니메이션을 팝으로 설정할 수 있습니다: 🎜rrreee🎜효과는 다음과 같습니다: 🎜🎜uniapp에서 전환 애니메이션을 만드는 방법🎜
  1. 페이드
🎜전환 애니메이션을 페이드 효과로 설정할 수 있습니다: 🎜rrreee🎜효과 :🎜🎜uniapp에서 전환 애니메이션을 만드는 방법🎜
  • 없음
  • 🎜효과 없이 전환 애니메이션을 없음으로 설정할 수 있습니다: 🎜rrreee🎜효과는 다음과 같습니다: 🎜🎜uniapp에서 전환 애니메이션을 만드는 방법🎜🎜2. 사용자 정의 전환 애니메이션🎜🎜uniapp의 사용자 정의 전환 애니메이션 uni-app-plus 플러그인과 vue-router 라우팅 구성 요소를 결합해야 합니다. 커스텀 전환 애니메이션 구현 과정을 자세히 소개하겠습니다. 🎜
    1. uni-app-plus 플러그인 설치
    🎜 uni-app-plus 플러그인을 사용하면 일부 기본 API를 사용할 수 있습니다. iOS의 UIKit 및 Android의 android.view를 포함한 uniapp의 플러그인. 따라서 사용자 정의 전환 애니메이션을 사용할 때는 이 플러그인을 사용해야 합니다. 🎜🎜설치하려면 프로젝트 디렉터리에서 다음 명령을 실행하세요. 🎜rrreee
    1. vue-router 구성 수정
    🎜먼저 라우터를 설치해야 합니다. . 사용자 정의 전환 애니메이션을 구현하기 위해 페이지 A에서 페이지 B로 이동하는 이벤트를 캡처할 수 있도록 js 구성 파일에 라우팅 가드를 추가합니다. 🎜rrreee🎜이 코드에서는 beforeEach 라우팅 가드를 추가했습니다. 이동할 페이지가 사용자 정의 전환 애니메이션으로 구성되면 현재 페이지와 이전 페이지의 애니메이션 효과가 설정됩니다. 왼쪽으로 슬라이드하고 오른쪽으로 슬라이드하여 사용자 정의 전환 애니메이션을 구현할 수 있습니다. 🎜
    1. 사용자 정의 전환 애니메이션 구현
    🎜 App.vue 파일에서 페이지 전환 이벤트를 수신하여 이를 달성할 수 있습니다. 전환 애니메이션. 먼저 마운트된 라이프 사이클에 다음 코드를 추가합니다. 🎜rrreee🎜위 코드는 주로 다음 기능을 구현합니다. 🎜
    1. 현재 기기가 iOS 기기인지 감지합니다(왜냐하면 Android 장치는 기본적으로 사용자 정의 전환 애니메이션을 지원합니다. 그렇다면 다음 단계를 수행하십시오. 그렇지 않은 경우 이 프로세스를 직접 건너뛰세요.
    2. 경로가 변경되기 전에 UniViewJSBridge를 통해 네이티브에 메시지를 보내 애니메이션을 켜야 한다고 알려줍니다.
    3. UniViewJSBridge에서 보낸 메시지를 듣습니다. 네이티브 애니메이션이 실행되면 router.app.animation을 빈 문자열에 할당하여 애니메이션을 나타냅니다. 효과가 끝났습니다.
    🎜그런 다음 <template> 태그에 다음 코드를 추가하세요. 🎜rrreee🎜여기서 애니메이션 라이브러리 animate.css를 사용하여 애니메이션 효과를 얻으려면 페이지에 도입해야 합니다. 🎜rrreee🎜마지막으로 <script> 태그에 다음 코드를 추가합니다. 🎜rrreee🎜A 페이지에 들어가기 전에 transType"custom"으로 설정: 🎜rrreee🎜 이로써 전환 애니메이션을 사용자 정의하는 전체 프로세스가 완료되었습니다. 실제 개발에서는 필요에 따라 애니메이션 유형과 애니메이션 효과를 정의할 수도 있습니다. 🎜🎜요약🎜🎜uniapp에서는 전환 애니메이션을 구현하는 것이 매우 간단합니다. 기본 전환 애니메이션을 사용하거나 uni-app-plus 플러그인과 vue를 결합할 수 있습니다. -router사용자 정의 전환 애니메이션을 구현하는 라우팅 구성 요소입니다. 개발 과정에서 사용자 경험을 개선하기 위해 실제 요구 사항에 따라 다양한 전환 애니메이션 효과를 선택해야 합니다. 🎜

    위 내용은 uniapp에서 전환 애니메이션을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿