# Swiper去除滚动动画实现GIF效果

#### 问题现象

如何消除Swiper的滚动动画，实现类似GIF动图的效果？

#### 效果预览

#### 背景知识

*   Swiper是滑块视图容器，提供子组件滑动轮播显示的能力。
    *   duration设置子组件切换的动画时长。curve默认曲线为interpolatingSpring，此时动画时长只受曲线自身参数影响，不受duration的控制。如果希望动画时长受到duration控制，需要给curve设置其他曲线。
    *   curve设置Swiper的动画曲线，默认为弹簧插值曲线，常用曲线参考Curve枚举说明。
*   ImageAnimator提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。

#### 解决方案

*   **方案一**：使用duration设置Swiper的切换动画时长为0，同时通过curve设置动画曲线为Linear，再设置Swiper自动切换图片，实现类似GIF图效果，可以通过interval设置每帧图片的展示时间，避免图片切换过快。
    
    ```
    @Entry
    @Component
    struct SwiperGifDemo {
      data: ResourceStr[] = [];
    
      aboutToAppear() {
        // 图片资源需自行替换
        this.data.push($r('app.media.img1'));
        this.data.push($r('app.media.img2'));
        this.data.push($r('app.media.img3'));
        this.data.push($r('app.media.img4'));
      }
    
      build() {
        Column() {
          Swiper() {
            ForEach(this.data, (newsItem: ResourceStr, index: number) => {
              Image(newsItem)
                .width('100%')
                .aspectRatio(4 / 3)
                .id(index.toString())
                .objectFit(ImageFit.Fill)
                .borderRadius('12vp');
            }, (index: number) => index.toString());
          }
          .autoPlay(true) // 自动切换
          .indicator(false)
          .loop(true) // 循环播放
          .duration(0) // 动画时长
          .curve(Curve.Linear) // 动画曲线
          .interval(300) // 切换时间间隔
          .disableSwipe(true); // 禁止滑动切换
        }.padding('12vp');
      }
    }
    ```
    
*   **方案二**：使用ImageAnimator播放图片集合，可以设置图片的播放时长和播放次数，实现类似GIF的效果。示例代码参考播放Resource动画。