UniApp动画全解析：让你的应用动起来

最新推荐文章于 2025-07-09 15:59:46 发布

原创

最新推荐文章于 2025-07-09 15:59:46 发布 · 918 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

🎭 UniApp动画全解析：让你的应用动起来

🌟 总览：UniApp动画体系的多彩世界

在App开发中，动画就像是为静态界面注入的灵魂，让用户体验从"看得见"升级为"能感受"。UniApp提供了丰富多样的动画解决方案，从简单的过渡效果到复杂的交互反馈，满足各种应用场景的需求。就像一位魔术师，有多种魔法可以让界面栩栩如生。

让我们踏上这段动画探索之旅，发现如何让你的UniApp动起来！

🎨 UniApp动画的五大类型

1️⃣ CSS动画 - 优雅简洁的基础魔法

就像学习魔术的第一课是掌握基本手法，CSS动画是最基础也最常用的动画实现方式：

/* 过渡动画 */
.fade-element {
   
   
  transition: opacity 0.3s ease-in-out;
}
.fade-element.active {
   
   
  opacity: 0;
}

/* 关键帧动画 */
@keyframes bounce {
   
   
  0% {
   
    transform: translateY(0); }
  50% {
   
    transform: translateY(-20px); }
  100% {
   
    transform: translateY(0); }
}

.bounce-element {
   
   
  animation: bounce 1s infinite;
}

CSS动画就像轻巧的魔杖，挥一挥就能产生效果，适合简单的UI元素变化，如颜色渐变、大小缩放、位置移动等。

优点：性能优良、实现简单、代码量少
限制：交互性有限、复杂动画难以精确控制

2️⃣ uni.createAnimation - 专属的动画魔法棒

UniApp提供了专门的动画API，像是给了你一根更强大的魔法棒，能实现更精准的动画控制：

// 创建动画实例
const animation = uni.createAnimation({
   
   
  duration: 1000,
  timingFunction: 'ease',
});

// 定义动画
animation.scale(1.5).rotate(45).step();
animation.translate(100, 0).step({
   
   duration: 500});

// 应用动画
this.animationData = animation.export();

<view :animation="animationData" class="animated-box"></view>

uni.createAnimation流程图：

┌───────────────┐     ┌───────────────┐     ┌───────────────┐
│ 创建动画实例  │────►│定义动画变化序列│────►│   导出动画    │
└───────────────┘     └───────────────┘     └───────┬───────┘
                                                   │
                                                   ▼
                                           ┌───────────────┐
                                           │  绑定到视图   │
                                           └───────────────┘

优点：精确控制动画过程、支持链式操作、兼容性好
限制：对于非常复杂的动画编写较繁琐

3️⃣ 路由/页面切换动画 - 场景切换的魔术

当你需要从一个场景过渡到另一个场景时，页面切换动画能提供流畅的体验：

// API方式设置页面切换动画
uni.navigateTo({
   
   
  url: 'pages/detail/detail',
  animationType: 'slide-in-right',
  animationDuration: 300
});

// 返回时的动画
uni.navigateBack({
   
   
  delta: 1,
  animationType: 'slide-out-right',
  animationDuration: 300
});

也可以在pages.json中全局配置：

{
   
   
  "pages": [
    {
   
   
      "path": "pages/index/index",
      "style": {
   
   
        "app-plus": {
   
   
          "animationType": "fade-in",
          "animationDuration": 300
        }
      }
    }
  ]
}