javascript仿天猫加入购物车动画效果

javascript仿天猫加入购物车动画效果

  注意：首先需要声明的是：代码原思路不是我写的，是在网上找的这种效果，自己使用代码封装了下而已；代码中都有注释，我们最主要的是理解抛物线的思路及在工作中完成这样的任务，最近需要做类似于天猫加入购物车动画效果，所以就在网上搜索了下，就看到类似的效果，就把代码截下来自己封装了下~~

  如果想要了解抛物线的细节，我建议大家先 看下 张鑫旭 讲解的抛物线的文章，再来看如下JS代码，可能理解更深点~~

http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-%E5%85%83%E7%B4%A0-%E6%8A%9B%E7%89%A9%E7%BA%BF-%E8%BF%90%E5%8A%A8-%E5%8A%A8%E7%94%BB/

首先我们来理解的是： 既然是抛物运动，那么 运动的元素肯定需要 "绝对定位"；配置的参数有如下：（依赖于Jquery或者zepto.js）

配置项	含义
el	需要运动的元素 {object | string}  默认为null
offset	运动的元素在 X轴，Y轴的偏移位置
targetEl	终点目标元素 这时就会自动获取该元素的left、top值，来表示移动元素在X，Y轴的偏移位置；设置了这个参数，offset将失效
duration	运动时间，默认为500毫秒
curvature	抛物线曲率，就是弯曲的程度，越接近于0越像直线，默认0.001
callback	运动完成后执行的回调函数
autostart	是否自动开始运动，默认为false
stepCallback	运动过程中执行的回调函数，this指向该对象，接受x，y参数，分别表示X，Y轴的偏移位置。

 JSFiddler效果如下：

JS抛物线运动效果

下面是所有的JS代码：

/*
 * 实现抛物线函数 Parabola
 * 切记既然是抛物线运动，那么运动的元素需要绝对定位
 * 具体了解抛物线 可以看张鑫旭的文章 
 * http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-%E5%85%83%E7%B4%A0-%E6%8A%9B%E7%89%A9%E7%BA%BF-%E8%BF%90%E5%8A%A8-%E5%8A%A8%E7%94%BB/
 */
var Parabola = function(opts){
    this.init(opts);
};
Parabola.prototype = {
    constructor: Parabola,
    /*
     * @fileoverview 页面初始化
     * @param opts {Object} 配置参数
     */
    init: function(opts){
        this.opts =  $.extend(defaultConfig, opts || {});
        // 如果没有运动的元素 直接return
        if(!this.opts.el) {
            return;
        }
        // 取元素 及 left top
        this.$el = $(this.opts.el);
        this.$elLeft = this._toInteger(this.$el.css("left"));
        this.$elTop = this._toInteger(this.$el.css("top"));
        // 计算x轴，y轴的偏移量
        if(this.opts.targetEl) {
            this.diffX = this._toInteger($(this.opts.targetEl).css("left")) - this.$elLeft;
            this.diffY = this._toInteger($(this.opts.targetEl).css("top")) - this.$elTop;
        }else {
            this.diffX = this.opts.offset[0];
            this.diffY = this.opts.offset[1];
        }
        // 运动时间
        this.duration = this.opts.duration;
        // 抛物线曲率
        this.curvature = this.opts.curvature;
        
        // 计时器
        this.timerId = null;
        /*
         * 根据两点坐标以及曲率确定运动曲线函数（也就是确定a, b的值）
         * 公式： y = a*x*x + b*x + c;
         * 因为经过(0, 0), 因此c = 0
         * 于是：
         * y = a * x*x + b*x;
         * y1 = a * x1*x1 + b*x1;
         * y2 = a * x2*x2 + b*x2;
         * 利用第二个坐标：
         * b = (y2 - a*x2*x2) / x2
         */
         this.b = (this.diffY - this.curvature * this.diffX * this.diffX) / this.diffX;

         // 是否自动运动
         if(this.opts.autostart) {
             this.start();
         }
    },
    /*
     * @fileoverview 开始
     */
    start: function(){
        // 开始运动
        var self = this;
        // 设置起始时间 和 结束时间
        this.begin = (new Date()).getTime();
        this.end = this.begin + this.duration;
        
        // 如果目标的距离为0的话 就什么不做
        if(this.diffX === 0 && this.diffY === 0) {
            return;
        }
        if(!!this.timerId) {
            clearInterval(this.timerId);
            this.stop();
        }
        // 每帧（对于大部分显示屏）大约16~17毫秒。默认大小是166.67。也就是默认10px/ms
        this.timerId = setInterval(function(){
            var t = (new Date()).getTime();
            self.step(t);
        },16);
        return this;
    },
    /*
     * @fileoverview 执行每一步
     * @param {string} t 时间
     */
    step: function(t){
        var opts = this.opts;
        var x,
            y;
        // 如果当前运行的时间大于结束的时间
        if(t > this.end) {
            // 运行结束
            x = this.diffX;
            y = this.diffY;
            this.move(x,y);
            this.stop();
            // 结束后 回调
            if(typeof opts.callback === 'function') {
                opts.callback.call(this);
            }
        }else {
            // 每一步x轴的位置
            x = this.diffX * ((t - this.begin) / this.duration);
            // 每一步y轴的位置 y = a * x *x + b*x + c; c = 0
            y = this.curvature * x * x + this.b * x;
            // 移动
            this.move(x,y);
            if(typeof opts.stepCallback === 'function') {
                opts.stepCallback.call(this,x,y);
            }
        }
        return this;
    },
    /*
     * @fileoverview 给元素定位
     * @param {x,y} x,y坐标
     * @return this
     */
    move: function(x,y) {
        this.$el.css({
            "position":'absolute',
            "left": this.$elLeft + x + 'px',
            "top": this.$elTop + y + 'px'
        });
        return this;
    },
    /*
     * 获取配置项
     * @param {object} options配置参数
     * @return {object} 返回配置参数项
     */
    getOptions: function(options){
        if(typeof options !== "object") {
            options = {};
        }
        options = $.extend(defaultConfig, options || {});
        return options;
    },
    /*
     * 设置options
     * @param options
     */
    setOptions: function(options) {
        this.reset();
        if(typeof options !== 'object') {
            options = {};
        }
        options = $.extend(this.opts,options);
        this.init(options);
        return this;
    },
    /*
     * 重置
     */
    reset: function(x,y) {
        this.stop();
        x = x ? x : 0;
        y = y ? y : 0;
        this.move(x,y);
        return this;
    },
    /*
     * 停止
     */
    stop: function(){
        if(!!this.timerId){
            clearInterval(this.timerId);
        }
        return this;
    },
    /*
     * 变成整数
     * isFinite() 函数用于检查其参数是否是无穷大。
     */
    _toInteger: function(text){
        text = parseInt(text);
        return isFinite(text) ? text : 0;
    }
};
var defaultConfig = {
    //需要运动的元素 {object | string}
    el: null,

    // 运动的元素在 X轴，Y轴的偏移位置
    offset: [0,0],

    // 终点元素 
    targetEl: null,

    // 运动时间，默认为500毫秒
    duration: 500,

    // 抛物线曲率，就是弯曲的程度，越接近于0越像直线，默认0.001
    curvature: 0.01,
    
    // 运动后执行的回调函数
    callback: null,

    // 是否自动开始运动，默认为false
    autostart: false,
    
    // 运动过程中执行的回调函数，this指向该对象，接受x，y参数，分别表示X，Y轴的偏移位置。
    stepCallback: null
};

HTML代码如下：

<div class="btns" style="margin-top:20px">
    <a href="#" id="reset">重置</a>
    <a href="#" id="run">开始运动</a>
    <a href="#" id="stop">停止运动</a>
    <a href="#" id="setOptions">设置配置参数</a>
</div>
<div id="boll" class="boll"></div>
<div id="target" class="target"></div>

JS初始化如下方式：

var bool = new Parabola({
    el: "#boll",
    offset: [500, 100],
    duration: 500,
    curvature: 0.005,
    callback:function(){
        alert("完成后回调")
    },
    stepCallback:function(x,y){
                
        $("<div>").appendTo("body").css({
            "position": "absolute",
            "top": this.$elTop + y + 'px',
            "left":this.$elLeft + x + 'px',
            "background-color":"#CDCDCD",
            "width":"5px",
            "height":"5px",
            "border-radius": "5px"
        });
                
    }
});
$("#reset").click(function (event) {
    event.preventDefault();
    bool.reset();
});
$("#run").click(function (event) {
    event.preventDefault();
    bool.start();
});
$("#stop").click(function (event) {
    event.preventDefault();
    bool.stop();
});
$("#setOptions").click(function (event) {
    event.preventDefault();
    bool.setOptions({
        targetEl: $("#target"),
        curvature: 0.001,
        duration: 1000
    });
});

JS源码下载