小程序实现自定义动画

作者：创搜网络科技 2018-01-11 15:26:51

QQ截图20180111153454.jpg



小程序有自己的动画API----wx.createAnimation,他实现了CSS3的各种动画，很好用，但是有时我们需要逻辑层面的动画，这样我们就可以随心所欲的控制动画，js的requestAnimationFrame就是很好的动画函数，可以自己封装一个动画方法，代码如下：

//index.js
var id;//settimeout的id
 
Page({
data: {
 
},
onReady:function(){

    var $this = this;

   //开始动画

    this.animation(function(){
         if(condition){//动画结束条件
           $this.cancelAnimation();
         }
        callback();
    })
},
//返回动画函数
requestAnimationFrame: function (callback) {
    if (typeof requestAnimationFrame !== 'undefined') {
    return requestAnimationFrame;
    } else if (typeof webkitRequestAnimationFrame !== 'undefined') {
    return webkitRequestAnimationFrame;
    } else if (typeof mozRequestAnimationFrame !== 'undefined') {
    return mozRequestAnimationFrame
    } else {
        return function ( callback ) {
            return setTimeout(callback, 16);//不支持requestAnimationFrame 的补救措施
        };
    }
},
//返回关闭动画函数
cancelRequestAnimationFrame:function(id){
    if (typeof cancelAnimationFrame !== 'undefined') {
        return cancelAnimationFrame;
    } else if (typeof webkitCancelRequestAnimationFrame !== 'undefined') {
        return webkitCancelRequestAnimationFrame;
    } else if (typeof webkitCancelAnimationFrame !== 'undefined') {
        return webkitCancelAnimationFrame;
    } else if (typeof mozCancelRequestAnimationFrame !== 'undefined') {
        return mozCancelRequestAnimationFrame
    } else if (typeof mozCancelAnimationFrame !== 'undefined') {
        return mozCancelAnimationFrame
    }else {
        return function (id) {
        clearTimeout(id);
        };
    }
},
//实现动画，callback动画执行的函数
animation:function(callback){
    var c = this.requestAnimationFrame();
    var fn = function () {
        callback();
        id = c(fn);
    }
    id = c(fn);
},
//清除动画
cancelAnimation:function(){
    var cancel = this.cancelRequestAnimationFrame();
    cancel(id);
}
})


上一篇：小程序上线那么久，有哪些新玩法值得做运营去

下一篇：微信小程序开发-常见问题(一)