uniapp如何设置动态图片

什么是动态图片？

动态图片指的是一个或多个图像，其中每个图像都由多个帧组成，可以在一定间隔的时间内循环播放从而呈现动态的效果。以gif图片格式为例，它是一种可以包含多个图像或帧的文件格式，可以通过设置时间间隔来控制动画的播放速度。

<img src="your-gif-path" />

uniapp如何显示动态图片？

在uniapp中显示动态图片需要使用uni-image组件，并将源文件设置为.gif格式。uni-image是基于UniApp框架封装的图片组件，支持本地和网络资源的加载，同时还能够按照一定的比例和尺寸进行裁剪和缩放。

<uni-image src="your-gif-path" mode="scaleToFill" lazy-load />

如何设置动态图片的大小？

可以通过设置uni-image的mode属性控制图片的大小和缩放方法。常用的有以下几种：

• aspectFit：保持宽高比缩放，显示完整图片，可能留有空白部分。
• aspectFill：保持宽高比缩放，填充整个容器，可能裁剪图片部分内容。
• widthFix：宽度不变，高度自动变化，保持宽高比缩放，不会留白。
• scaleToFill：拉伸填满容器，不保持宽高比缩放。

<uni-image src="your-gif-path" mode="aspectFill" width="200" />

如何控制动态图片的播放方式？

可以通过动态设置gif图片的地址来实现动态播放效果。首先定义一个变量控制图片地址，然后在定时器内不断更改该变量的值，实现动态切换图片的效果。具体实现代码如下：

<template>
  <view>
    <uni-image :src="gifPath" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      gifPath: '/static/loading1.gif',
      timer: null,
      switchFlag: false
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      if (this.switchFlag) {
        this.gifPath = '/static/loading1.gif'
      } else {
        this.gifPath = '/static/loading2.gif'
      }
      this.switchFlag = !this.switchFlag
    }, 1000)
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>