wxml:
<view class="box">
<view class="headerimg" bindtap="click" animation="{{animationData}}">
<open-data type="userAvatarUrl" ></open-data>
</view>
<view class="headertext">
<open-data type="userNickName" class="headertext"></open-data>
</view>
</view>
wxss:
.box{
background: skyblue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 500rpx;
}
.headerimg{
width: 200rpx;height: 200rpx;
margin-bottom: 40rpx;
}
js:
Page({
/**页面的初始数据*/
data: {
animationData:"",
},
click:function(){
//创建动画
var animation = wx.createAnimation({
duration: 4000,
timingFunction: "ease",
delay: 0,
transformOrigin: "50% 50%",
})
//设置动画
// animation.rotate(90).step(); //旋转90度
//animation.scale(1.5).step(); //放大1.5倍
//animation.translate(-30,-50).step(); //偏移x,y,z
//animation.skew(30,50).step(); //倾斜x,y
animation.rotate(45).scale(0.8).translate(10,10).step(); //边旋转边放大
//导出动画数据传递给组件的animation属性。
this.setData({
animationData: animation.export(),
})
},
})
效果图: