微信小程序仿QQ头像轮播效果

1、效果图

Kapture 2024-02-28 at 11.09.35

2、效果流程分析

1、第1个头像大小从1到0缩小的同时，第2个头像左移

2、上面动画结束后，延迟50ms，第3个头像从0到1放大

3、把头像列表顺序前移一位，并重置轮播状态，以此达到一个循环。然后继续第一个步骤

3、源码

组件使用

<AvatarsBanner avatars="{{avatars}}" />

index.wxml

<viewclass="avatarList"style="width:{{itemWidth*3-overlapWidth*2}}rpx;"
><!-- 备注：微信小程序经测试，即使不渲染的元素也要添加到节点上，否则第3个的放大动画不会展示 --><imagesrc="{{item}}"animation="{{index===0?firstAnimation:(index===1?secondAnimation:(index===2?lastAnimation:''))}}"wx:for="{{avatars}}"wx:key="index"style="left: {{(itemWidth-overlapWidth)*index}}rpx; z-index: {{avatars.length-index}};width:{{itemWidth}}rpx;height:{{itemWidth}}rpx;"class="avatarImage {{index>2 && 'hidden'}}"/>
</view>

index.js

const animalTime = 200; // 动画时间
const intervalTime = 1000; // 定时器频率Component({properties: {// 头像列表avatars: {type: Array,value: [],observer(newVale) {this.interval && clearInterval(this.interval);this.startAnimation();},},style: {type: String,value: '',},// 图片宽度：rpxitemWidth: {type: Number,value: 36,},// 重叠部分宽度：rpxoverlapWidth: {type: Number,value: 10,},},data: {},methods: {startAnimation() {const { avatars } = this.data;const { itemWidth, overlapWidth } = this.properties;if (avatars.length < 3) {return;}// 创建animation对象this.firstAnimation = wx.createAnimation();this.secondAnimation = wx.createAnimation();this.lastAnimation = wx.createAnimation();this.interval = setInterval(() => {// num1缩放动画this.firstAnimation.scale(0).step({ duration: animalTime });this.setData({firstAnimation: this.firstAnimation.export(),});// num2、num3平移动画(除以2是rpx转px)const offsetX = (overlapWidth - itemWidth)/2;this.secondAnimation.translate(offsetX, 0).step({ duration: animalTime });this.lastAnimation.translate(offsetX, 0).step({ duration: animalTime });this.setData({secondAnimation: this.secondAnimation.export(),lastAnimation: this.lastAnimation.export(),});// num3放大动画（animalTime + 50：表示前面两个动画结束，并且setData数据更新）setTimeout(() => {this.lastAnimation.scale(1).step({ duration: animalTime });this.setData({lastAnimation: this.lastAnimation.export(),});}, animalTime + 50);// 还原动画 (等待缩小动画完成后再切换头像)setTimeout(() => {this.firstAnimation.scale(1).step({duration: 0,});this.secondAnimation.translate(0, 0).step({duration: 0,});this.lastAnimation.translate(0, 0).scale(0).step({duration: 0,});this.setData({avatars: avatars.slice(1).concat(avatars[0]),lastAnimation: this.lastAnimation.export(),firstAnimation: this.firstAnimation.export(),secondAnimation: this.secondAnimation.export(),});}, animalTime);}, intervalTime);},},
});

index.wxss

.avatarList {display: flex;flex-direction: row;position: relative;height: 100%;
}.avatarImage {position: absolute;border: 1rpx solid #ffffff;border-radius: 50%;/* 占位图 */background-image: url('https://xm-1301527776.cos.ap-shanghai.myqcloud.com/images/miniprogram/channel/Post/ic_default_header.png');background-repeat: no-repeat;background-position: center;background-color: #f6f6f6;background-size: cover;
}.hidden {display: none;
}