wordpress网站在线安装,十大免费软件不收费安卓,网站做任务包括什么,华建设计网站1、效果图 2、效果流程分析
1、第1个头像大小从1到0缩小的同时#xff0c;第2个头像左移
2、上面动画结束后#xff0c;延迟50ms#xff0c;第3个头像从0到1放大
3、把头像列表顺序前移一位#xff0c;并重置轮播状态#xff0c;以此达到一个循环。然后继续第一个步骤 …1、效果图 2、效果流程分析
1、第1个头像大小从1到0缩小的同时第2个头像左移
2、上面动画结束后延迟50ms第3个头像从0到1放大
3、把头像列表顺序前移一位并重置轮播状态以此达到一个循环。然后继续第一个步骤
3、源码
组件使用
AvatarsBanner avatars{{avatars}} /index.wxml
viewclassavatarListstylewidth:{{itemWidth*3-overlapWidth*2}}rpx;
!-- 备注微信小程序经测试即使不渲染的元素也要添加到节点上否则第3个的放大动画不会展示 --imagesrc{{item}}animation{{index0?firstAnimation:(index1?secondAnimation:(index2?lastAnimation:))}}wx:for{{avatars}}wx:keyindexstyleleft: {{(itemWidth-overlapWidth)*index}}rpx; z-index: {{avatars.length-index}};width:{{itemWidth}}rpx;height:{{itemWidth}}rpx;classavatarImage {{index2 hidden}}/
/viewindex.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;
}
