小程序学习：动画animation

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(),
    })

},



})

效果图：