效果视频
https://pan.baidu.com/s/1yfrDaG9YAX0--v0EA3awZA
布局需要按照圆形排列,所以我们需要计算每个点的坐标
代码部分
首先fixed,绝对定位是少不掉的
css
.img{ width:80rpx; height:80rpx; position:absolute;}.img-before{ width:80rpx; height:80rpx; position:absolute; opacity:0;}
最后是js
let that;const app = getApp();Page({ /** * 页面的初始数据 */ data: { showButton: false, animationData0: {}, animationData1: {}, animationData2: {}, animationData3: {}, animationData4: {}, list: [{}, {}, {}, {}, {}], radius: 80 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { }, showOther: function(e) { var that = this; if (that.data.list.length > 5) { return } else { var list = that.data.list for (let i = 0; i
其中,位置需要用Math.sin()/Math.cos()函数去计算,还用到了微信动画的api
ps:代码比较粗糙,只是为了做这个效果,具体优化地方根据自己的使用情况修改。