博客站

在 UniApp 中，动画是提升用户体验的重要手段。UniApp 提供了多种方式来实现动画效果，包括 CSS 动画、JavaScript 动画 和 使用第三方动画库。以下是 UniApp 处理动画的常用方法：

一、CSS 动画

CSS 动画是通过 CSS 属性实现的动画效果，适合简单的过渡和变换。

1. 使用 transition

• 通过 transition 实现平滑的过渡效果。
• 示例：

  <template>
    <view class="box" :class="{ active: isActive }"></view>
    <button @click="toggle">切换状态</button>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isActive: false
      };
    },
    methods: {
      toggle() {
        this.isActive = !this.isActive;
      }
    }
  };
  </script>
  
  <style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: transform 0.5s;
  }
  .active {
    transform: translateX(100px);
  }
  </style>
  

2. 使用 @keyframes

• 通过 @keyframes 定义复杂的动画效果。
• 示例：

  <template>
    <view class="box"></view>
  </template>
  
  <style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 2s infinite;
  }
  
  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(0); }
  }
  </style>
  

二、JavaScript 动画

JavaScript 动画是通过 JavaScript 动态修改样式实现的动画效果，适合复杂的交互动画。

1. 使用 uni.createAnimation

• uni.createAnimation 是 UniApp 提供的动画 API，支持多种动画效果。
• 示例：

  <template>
    <view :animation="animationData" class="box"></view>
    <button @click="startAnimation">开始动画</button>
  </template>
  
  <script>
  export default {
    data() {
      return {
        animationData: {}
      };
    },
    methods: {
      startAnimation() {
        const animation = uni.createAnimation({
          duration: 1000,
          timingFunction: 'ease'
        });
        animation.translateX(100).rotate(45).step();
        this.animationData = animation.export();
      }
    }
  };
  </script>
  
  <style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }
  </style>
  

2. 使用 requestAnimationFrame

• 通过 requestAnimationFrame 实现高性能的 JavaScript 动画。
• 示例：

  <template>
    <view :style="{ transform: `translateX(${position}px)` }" class="box"></view>
    <button @click="startAnimation">开始动画</button>
  </template>
  
  <script>
  export default {
    data() {
      return {
        position: 0
      };
    },
    methods: {
      startAnimation() {
        const animate = () => {
          this.position  = 1;
          if (this.position < 100) {
            requestAnimationFrame(animate);
          }
        };
        animate();
      }
    }
  };
  </script>
  
  <style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }
  </style>
  

三、使用第三方动画库

对于复杂的动画需求，可以使用第三方动画库，如 Animate.css 或 Tween.js。

1. 使用 Animate.css

• Animate.css 是一个流行的 CSS 动画库，提供了丰富的动画效果。
• 示例：
  1. 引入 Animate.css：

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
     

  2. 在 UniApp 中使用：

     <template>
       <view class="animate__animated animate__bounce">Hello UniApp</view>
     </template>
     

2. 使用 Tween.js

• Tween.js 是一个 JavaScript 动画库，适合实现复杂的补间动画。
• 示例：
  1. 安装 Tween.js：

     npm install @tweenjs/tween.js
     

  2. 在 UniApp 中使用：

     <template>
       <view :style="{ transform: `translateX(${position}px)` }" class="box"></view>
       <button @click="startAnimation">开始动画</button>
     </template>
     
     <script>
     import TWEEN from '@tweenjs/tween.js';
     
     export default {
       data() {
         return {
           position: 0
         };
       },
       methods: {
         startAnimation() {
           const tween = new TWEEN.Tween({ x: this.position })
             .to({ x: 100 }, 1000)
             .onUpdate((obj) => {
               this.position = obj.x;
             })
             .start();
     
           const animate = () => {
             requestAnimationFrame(animate);
             TWEEN.update();
           };
           animate();
         }
       }
     };
     </script>
     
     <style>
     .box {
       width: 100px;
       height: 100px;
       background-color: red;
     }
     </style>
     

四、总结

UniApp 提供了多种方式来实现动画效果：

1. CSS 动画：通过 transition 和 @keyframes 实现简单的动画。
2. JavaScript 动画：通过 uni.createAnimation 或 requestAnimationFrame 实现复杂的交互动画。
3. 第三方动画库：使用 Animate.css 或 Tween.js 实现丰富的动画效果。

以下是一个完整的 uni.createAnimation 示例：

<template>
  <view :animation="animationData" class="box"></view>
  <button @click="startAnimation">开始动画</button>
</template>

<script>
export default {
  data() {
    return {
      animationData: {}
    };
  },
  methods: {
    startAnimation() {
      const animation = uni.createAnimation({
        duration: 1000,
        timingFunction: 'ease'
      });
      animation.translateX(100).rotate(45).step();
      this.animationData = animation.export();
    }
  }
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

通过合理使用这些方法，可以为 UniApp 应用添加丰富的动画效果，提升用户体验。