<!--pages/newwxml/newwxml.wxml-->
<view class='background' >
<view class='center' animation="{{animationData}}">
<view class='line' wx:for='{{text.length}}' style='transform: rotate({{index*angle}}deg);top:{{-(index+1)*202.9 }}rpx;left:3rpx;transform-origin:50% 200rpx;'>
<image class='image' src='{{image[index]}}' style='transform: rotate({{text.length==2?angle*2:0}}deg);border: {{image==""?1:0}}rpx solid #fff;background:{{image==""?"none":"#000"}};'></image>
<view class='imgText' style='transform: rotate({{text.length==2?angle*2:0}}deg);opacity:{{text==""?0:1}}'>{{text[index]}}</view>
</view>
</view>
</view>
<view class='centerRound'><image class='limg' src='{{centerImg}}' bindtap='ring'></image></view>
// pages/newwxml/newwxml.js
Page({
data: {
text: ['蜥蜴', '海象', '袋鼠', '鸟', '乌龟', '鲸鱼', '蜂鸟', '啄木鸟', '老鹰', '豹子', '巨嘴鸟', '红头鸟', '啄木鸟', '啄木鸟', '鳄鱼'],
image: ['/images/1.png', '/images/2.png', '/images/3.png', '/images/4.png', '/images/5.png', '/images/6.png', '/images/7.png', '/images/8.png', '/images/9.png', '/images/10.png', '/images/12.png', '/images/12.png', '/images/13.png', '/images/14.png','/images/12.png'],
showArray:null,
angle:0,
animationData: {},
centerImg:'/images/10.png'
},
onShow: function () {
let angle = 360/this.data.text.length
this.setData({
angle: angle
})
console.log(this.data.angle)
},
ring(m){
let animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
animation.rotate(120).step();
animation.rotate().step();
this.setData({
animationData: animation.export()
})
}
})
/* pages/newwxml/newwxml.wxss */
.background{
750rpx;
height: 1200rpx;
">#3467c7d0;
display: flex;
align-items: center;
justify-content: center;
}
.center{
10rpx;
height: 10rpx;
border-radius: 50%;
background: #fff;
/* display: flex;
flex-wrap: nowrap;
justify-content: space-around; */
/* translate:(375rpx,300rpx) */
}
.image{
100rpx;
height: 100rpx;
background: black;
border-radius: 50%;
display: flex;
justify-content: space-around;
position: relative;
left:-45rpx;
top: -105rpx;
z-index: 999;
}
.imgText{
100rpx;
display: flex;
font-size: 25rpx;
justify-content: space-around;
position: relative;
left:-40rpx;
top: -240rpx;
}
.centerRound{
100rpx;
height: 100rpx;
border-radius: 50%;
background: #fff;
position: relative;
top: -653rpx;
z-index: 3;
left: 327rpx;
}
.centerRound .limg{
100rpx;
height: 100rpx;
border-radius: 50%;
z-index: 3;
}
.line{
0rpx;
height: 200rpx;
border: 1rpx solid #fff;
position: relative;
top: -20rpx;
left: 3rpx;
z-index: 2;
}
.lineFa{
30rpx;
height: 200rpx;
/* border: 1rpx solid #fff; */
position: relative;
top: -200rpx;
left: 3rpx;
/* z-index: 2; */
}
.rotateview{
100rpx;
height: 100rpx;
border-radius: 50%;
background: black;
position: relative;
top: -205rpx;
left: -127rpx;
/* transform: rotate(120deg);
transform-origin:375rpx 300rpx; */
}