柚子快報(bào)激活碼778899分享：微信小程序仿QQ頭像輪播效果

http://yzkb.51969.com/

1、效果圖

2、效果流程分析

1、第1個(gè)頭像大小從1到0縮小的同時(shí)，第2個(gè)頭像左移

2、上面動(dòng)畫結(jié)束后，延遲50ms，第3個(gè)頭像從0到1放大

3、把頭像列表順序前移一位，并重置輪播狀態(tài)，以此達(dá)到一個(gè)循環(huán)。然后繼續(xù)第一個(gè)步驟

3、源碼

組件使用

index.wxml

class="avatarList"

>

src="{{item}}"

animation="{{index===0?firstAnimation:(index===1?secondAnimation:(index===2?lastAnimation:''))}}"

wx:for="{{avatars}}"

wx:key="index"

class="avatarImage {{index>2 && 'hidden'}}"

/>

index.js

const animalTime = 200; // 動(dòng)畫時(shí)間

const intervalTime = 1000; // 定時(shí)器頻率

Component({

properties: {

// 頭像列表

avatars: {

type: Array,

value: [],

observer(newVale) {

this.interval && clearInterval(this.interval);

this.startAnimation();

},

},

style: {

type: String,

value: '',

},

// 圖片寬度：rpx

itemWidth: {

type: Number,

value: 36,

},

// 重疊部分寬度：rpx

overlapWidth: {

type: Number,

value: 10,

},

},

data: {},

methods: {

startAnimation() {

const { avatars } = this.data;

const { itemWidth, overlapWidth } = this.properties;

if (avatars.length < 3) {

return;

}

// 創(chuàng)建animation對象

this.firstAnimation = wx.createAnimation();

this.secondAnimation = wx.createAnimation();

this.lastAnimation = wx.createAnimation();

this.interval = setInterval(() => {

// num1縮放動(dòng)畫

this.firstAnimation.scale(0).step({ duration: animalTime });

this.setData({

firstAnimation: this.firstAnimation.export(),

});

// num2、num3平移動(dòng)畫(除以2是rpx轉(zhuǎn)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放大動(dòng)畫（animalTime + 50：表示前面兩個(gè)動(dòng)畫結(jié)束，并且setData數(shù)據(jù)更新）

setTimeout(() => {

this.lastAnimation.scale(1).step({ duration: animalTime });

this.setData({

lastAnimation: this.lastAnimation.export(),

});

}, animalTime + 50);

// 還原動(dòng)畫 (等待縮小動(dòng)畫完成后再切換頭像)

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://ic_default_header.png');

background-repeat: no-repeat;

background-position: center;

background-color: #f6f6f6;

background-size: cover;

}

.hidden {

display: none;

}

柚子快報(bào)激活碼778899分享：微信小程序仿QQ頭像輪播效果

http://yzkb.51969.com/

精彩鏈接