微信小程序动画效果方法封装

微信小程序的动画如何实现？归纳起来主要有以下几步：

首先在wxml中为需要添加动画的元素绑定动画属性，如下所示：

<image animation="{{animationData}}" bindtap="bindViewTap" src="{{userInfo.avatarUrl}}"></image>

说明：animation与js里导出的动画名绑定 ，bindtap事件点击触发动画。

然后在js里编写生成动画的方法，主要分为创建动画、配置动画、导出动画，代码如下所示：

// 事件处理函数
bindViewTap: function() {
    //第一步：创建动画
    var animation = wx.createAnimation({
        // 动画持续时间
        duration: 3000,
        // 动画的方法，从开始到结束是一种什么样的规则
        //'linear','ease','ease-in','ease-in-out','ease-out','step-start','step-end'
        timingFunction: 'linear',
        // 延迟时间
        delay: 0,
        // 运动原点
        transformOrigin: '50%,50%,0',
    })

    // 第二步，配置动画
    animation.rotate(360).scale(2).translate(10, -20).step();
    animation.rotate(-360).scale(1).translate(0).step();
    // animation.skew(45).step();

    // 动画的矩阵变形
    // animation.matrix(10,10,10,10,0,50).step();

    // 第三步，导出动画
    this.setData({
        animationData: animation.export(),
    })
},

接下来，我们对这个动画方法进行简单封装。

// 第一个参数 that 是当前的页面对象
// 第二个参数 param 是绑定页面动画名
// 第三个参数 px 上下滑动的距离
// 第四个参数 opacity 是需要修改为的透明度

slideUpShow:function(that,param,px,opacity){
    var animation = wx.createAnimation({
        duration: 800,
        timingFunction: 'ease',
    });
    animation.translateY(px).opacity(opacity).step()
    // 将param转换为key
    var json = '{"' + param + '":""}'
    json = JSON.parse(json);
    json[param] = animation.export()
    // 设置动画
    that.setData(json)
}

通常对于这种全局的方法建议放在全局的app.js里，然后在其它页面通过getApp()获取全局方法。以下是调用实例：

<!--pages/index/index.wxml-->

<view class="init" animation="{{firstSlideUp}}"></view>

<view class="init" animation="{{secondSlideUp}}"></view>

然后是在当前页面里调用全局的动画方法，生成页面动画。

// pages/index/index.js

// 获取小程序实例，也可以文件顶部直接引入
onLoad: function (options) {
    this.app = getApp();
},
// 页面显示时，触发动画
onShow: function () {
    this.app.slideUpShow(this, 'firstSlideUp', -200, 1)

    setTimeout(function () {
        this.app.slideUpShow(this, 'secondSlideUp', -200, 1)
    }.bind(this), 200);
}