微信小程序-动画

<!--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{

width: 750rpx;

height: 1200rpx;

">#3467c7d0;

display: flex;

align-items: center;

justify-content: center;

}

.center{

width: 10rpx;

height: 10rpx;

border-radius: 50%;

background: #fff;

/* display: flex;

flex-wrap: nowrap;

justify-content: space-around; */

/* translate:(375rpx,300rpx) */

 

}

.image{

width: 100rpx;

height: 100rpx;

background: black;

border-radius: 50%;

display: flex;

justify-content: space-around;

position: relative;

left:-45rpx;

top: -105rpx;

z-index: 999;

}

.imgText{

width: 100rpx;

display: flex;

font-size: 25rpx;

justify-content: space-around;

position: relative;

left:-40rpx;

top: -240rpx;

}

.centerRound{

width: 100rpx;

height: 100rpx;

border-radius: 50%;

background: #fff;

position: relative;

top: -653rpx;

z-index: 3;

left: 327rpx;

}

.centerRound .limg{

width: 100rpx;

height: 100rpx;

border-radius: 50%;

z-index: 3;

}

.line{

width: 0rpx;

height: 200rpx;

border: 1rpx solid #fff;

position: relative;

top: -20rpx;

left: 3rpx;

z-index: 2;

}

.lineFa{

width: 30rpx;

height: 200rpx;

/* border: 1rpx solid #fff; */

position: relative;

top: -200rpx;

left: 3rpx;

/* z-index: 2; */

}

.rotateview{

width: 100rpx;

height: 100rpx;

border-radius: 50%;

background: black;

position: relative;

top: -205rpx;

left: -127rpx;

/* transform: rotate(120deg);

transform-origin:375rpx 300rpx; */

}

转载于:https://www.cnblogs.com/lipuqing180906/p/9596382.html