小程序的动画效果

wxml:

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>

js:

Page({
    data:{
        animationData:{}
    },
    onShow:function(){
        var animation = wx.createAnimation({
            duration:1000, //动画的持续时间
            timingFunction:'linear', //动画效果
            delay:0, //动画延迟时间
            transformOrigin:'50% 50%', //设置transfrom-origin
        }),
        this.animation = animation;
        animation.rotate(50).step(); //旋转50度
        animation.scale(2,2).step(); //长和宽都扩大2倍
        animation.translate(100).step(); //延x轴和y轴移动100px
        this.setData({
          animationData: this.animation.export()
        })
    }
})

export:通过动画实例的export方法导出动画数据传递给组件的animation属性;

step() :一组动画完成后调用，表示一组动画的完成