动画视图组件

animation-view 组件是 Uniapp 中用于播放 Lottie 动画的组件，基于 Lottie 官方 SDK 实现，支持复杂的动画效果。该组件在移动端的 nvue/uvue 页面上提供了原生支持，适用于动画效果较为复杂的场景，如动态图标、插画等。

1. 什么是 animation-view 组件？

animation-view 组件用于播放 Lottie 动画。Lottie 是一种轻量级的动画格式，支持复杂的动画效果并且具有较小的体积。通过 animation-view 组件，开发者可以在 Uniapp 应用中轻松集成 Lottie 动画文件并实现动画控制。

使用场景

• 加载动画：用于展示复杂的加载动画，替代静态图片或简单的 CSS 动画。
• 引导页动画：在应用引导页中，播放动态效果以提升视觉体验。
• 动态图标：将静态图标替换为动态 Lottie 图标，提升应用的互动性和趣味性。

2. animation-view 组件的常用属性

animation-view 组件提供了多种属性，用于控制动画的路径、播放行为、循环设置以及隐藏状态等。下表列出了常用的属性及其说明。

属性名	类型	默认值	说明
path	String	无	动画资源的路径，支持本地路径和网络路径
loop	Boolean	false	动画是否循环播放
autoplay	Boolean	true	是否自动播放动画
action	String	play	控制动画的操作，取值为 play、pause、stop
hidden	Boolean	true	是否隐藏动画组件
@bindended	EventHandle	无	动画播放到末尾时触发的事件（自然结束触发，循环播放结束不会触发）

2.1 动画路径 path

• 说明：该属性指定 Lottie 动画文件的路径，支持本地路径和网络路径。
• 类型：String
• 默认值：无

<template>
  <view>
    <animation-view class="animation" :path="animationPath" />
  </view>
</template>

<script setup>
const animationPath = '/static/lottie-animation.json';
</script>

<style scoped>
.animation {
  width: 750rpx;
  height: 300rpx;
}
</style>

2.2 循环播放 loop

• 说明：该属性控制动画是否循环播放。
• 类型：Boolean
• 默认值：false

<template>
  <view>
    <animation-view class="animation" :path="animationPath" :loop="true" />
  </view>
</template>

<script setup>
const animationPath = '/static/lottie-animation.json';
</script>

2.3 自动播放 autoplay

• 说明：是否在加载后自动播放动画。
• 类型：Boolean
• 默认值：true

<template>
  <view>
    <animation-view class="animation" :path="animationPath" :autoplay="false" />
  </view>
</template>

<script setup>
const animationPath = '/static/lottie-animation.json';
</script>

2.4 控制动画状态 action

• 说明：该属性用于控制动画的播放状态，可以设置为 play、pause、stop。
• 类型：String
• 默认值：play

<template>
  <view>
    <animation-view class="animation" :path="animationPath" :action="animationAction" />
    <button @click="togglePlayPause">{{ buttonLabel }}</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const animationPath = '/static/lottie-animation.json';
const animationAction = ref('play');
const buttonLabel = ref('暂停动画');

const togglePlayPause = () => {
  if (animationAction.value === 'play') {
    animationAction.value = 'pause';
    buttonLabel.value = '播放动画';
  } else {
    animationAction.value = 'play';
    buttonLabel.value = '暂停动画';
  }
};
</script>

<style scoped>
.animation {
  width: 750rpx;
  height: 300rpx;
  background-color: #f0f0f0;
}
</style>

2.5 隐藏动画 hidden

• 说明：控制是否隐藏动画组件。
• 类型：Boolean
• 默认值：true

<template>
  <view>
    <animation-view class="animation" :path="animationPath" :hidden="false" />
  </view>
</template>

<script setup>
const animationPath = '/static/lottie-animation.json';
</script>

2.6 监听动画结束事件 @bindended

• 说明：当动画自然播放结束时，会触发该事件，循环播放或手动停止动画不会触发。
• 类型：EventHandle

<template>
  <view>
    <animation-view class="animation" :path="animationPath" @bindended="handleAnimationEnd" />
  </view>
</template>

<script setup>
const animationPath = '/static/lottie-animation.json';

const handleAnimationEnd = () => {
  console.log('动画播放结束');
};
</script>

3. 控制动画的播放与暂停

以下案例展示了如何使用 animation-view 组件，结合动画路径、播放控制和事件处理，灵活控制 Lottie 动画的播放与暂停。

<template>
  <view>
    <!-- Lottie 动画播放区域 -->
    <animation-view class="animation" :path="animationPath" :loop="true" :autoplay="false" :action="animationAction" @bindended="handleAnimationEnd" />
    
    <!-- 控制按钮，点击切换播放/暂停状态 -->
    <button @click="togglePlayPause">{{ buttonLabel }}</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const animationPath = '/static/lottie-animation.json';
const animationAction = ref('play');
const buttonLabel = ref('暂停动画');

const togglePlayPause = () => {
  if (animationAction.value === 'play') {
    animationAction.value = 'pause';
    buttonLabel.value = '播放动画';
  } else {
    animationAction.value = 'play';
    buttonLabel.value = '暂停动画';
  }
};

const handleAnimationEnd = () => {
  console.log('动画播放结束');
  buttonLabel.value = '播放动画';
};
</script>

<style scoped>
.animation {
  width: 750rpx;
  height: 300rpx;
  background-color: #f0f0f0;
}
</style>