uniapp动画实现图片循环渐隐渐显

https://blog.csdn.net/w_D_lufei/article/details/106598535

<template>
  <view class="vipCard_block">
    <view class="vipBox" @tap="bgImgTap(num)">
      <view
        class="vipCard_block"
        :animation="num == item.id ? showpic : hidepic"
        v-for="item in pic"
        :key="item.id"
      >
        <image :src="item.url"></image>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      pic: [], //图片数据
      num: 0,
      picmaxnum: 0, //pic的个数
      animation: "",
      showpic: "",
      hidepic: "",
    };
  },
  onLoad() {
    this.dataIndex();
    this.changePic();
  },
  methods: {
    //图片数据初始化
    dataIndex() {
      //1.发送请求获取图片数据
      var data = [
        {
          id: 0,
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597131070533&di=f3e086397fcc580f0440011aaf969414&imgtype=0&src=http%3A%2F%2Fstatic001.infoq.cn%2Fresource%2Fimage%2F5c%2Fef%2F5c577320781bb0b4627b80964245f3ef.jpg",
        },
        {
          id: 1,
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597131070533&di=de414ca44ab2b7928132cbe7a5c25c08&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F58b4ef69ed377.jpg",
        },
        {
          id: 2,
          url:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2746890508,1411167354&fm=26&gp=0.jpg",
        },
      ];
      //2.将图片图片数组赋值给  pic
      this.pic = data;
      //3.将图片个数(图片数组的长度)赋值给  picmaxnum
      this.picmaxnum = data.length;
    },
    //轮播方法
    changePic() {
      clearInterval(this.setInter1);
      //先将已有的计时器清除
      var animation = uni.createAnimation({
        timingFunction: "ease",
      });
      //创建一个动画实例
      this.animation = animation;
      this.setInter1 = setInterval(
        function() {
          //循环
          this.num++;
          if (this.num == this.picmaxnum) {
            this.num = 0;
          }
          //淡入
          animation.opacity(1).step({ duration: 2000, delay: 1000 }); //描述动画
          this.showpic = animation.export(); //输出动画
          //淡出
          animation.opacity(0).step({ duration: 2000, delay: 1000 });
          this.hidepic = animation.export();
        }.bind(this),
        4000
      );
    },
    //点击图片事件
    bgImgTap(id) {
      //id是图片id
      console.log(id, "我被点了");
      if (id == 0) {
        //跳转方法
      } else {
        //点击不同的图片，对应不同的需求
      }
    },
  },
};
</script>

<style>
.vipCard_block {
  height: 225rpx;
  border-radius: 24rpx;
  background-color: #fff;
  padding: 23rpx;
  margin-top: 30rpx;
}
.vipCard_block .more {
  float: right;
  z-index: 10;
  position: relative;
}
.vipCard_block .vipBox {
  width: 648rpx;
  height: 134rpx;
  position: relative;
}

.vipCard_block {
  width: 637rpx;
  height: 189rpx;
  background-size: 637rpx 189rpx;
  position: absolute;
  top: 0;
  z-index: 2;
}
.vipCard_block .cardBgPic .cardName {
  color: #f0f3f7;
  font-size: 26rpx;
  position: absolute;
  top: 58rpx;
  left: 125rpx;
}
.vipCard_block .cardBgPic .cardTitle {
  font-size: 32rpx;
  color: #fff;
  position: absolute;
  top: 65rpx;
  left: 320rpx;
}
.vipCard_block .cardBgPic .cardIntro {
  font-size: 24rpx;
  color: #fff;
  position: absolute;
  top: 115rpx;
  left: 318rpx;
}
</style>