javascriptは猫をまねてショッピングカーのアニメーションの効果に参加します.

24766 ワード

javascriptは猫をまねてショッピングカーのアニメーションの効果に参加します.
注意:まず声明が必要なのはコードの元の考えは私が書いたのではなく、ネットで探したこの効果で、自分でコードを使ってカプセル化しただけです.コードには全部コメントがあります.私たちは放物線の考えと仕事の中でこのような任務を遂行することが一番大切です.最近は天猫のようなショッピングカートに参加するアニメ効果が必要です.だからネットで検索したら、類似の効果が見られます.コードを切って自分でカプセル化しました.
放物線の詳細を知りたいなら、まず張鑫旭が説明した放物線の文章を見て、次のJSコードを見てください.もっと深いところを理解してください.
http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-%E5%85%83%E7%B4%A0-%E 6%8 A%9 B%E 7%89%A 9%E 7%BA% BF-E 8%BF%90%E 5%8 A%E 8%E 8%E 8%E 8%E 8%E 8%E 8%E 7%94%BB/
まず、放物線運動である以上、運動の要素は必ず「絶対位置付け」が必要であることを理解します.設定されているパラメータは以下の通りです.
設定項目
意味
el
運動する要素が必要です. デフォルトはnullです
オフセット
動きの要素はX軸、Y軸のオフセット位置にあります.
ターゲットエル
終点の要素このとき、自動的にこの要素のleft、top値を取得して、X,Y軸における移動要素のオフセット位置を表します.このパラメータを設定すると、オフセットは無効になります.
duration
運動時間はデフォルトでは500ミリ秒です.
curvature
放物線曲率とは、曲がりの程度で、0に近いほど直線になり、デフォルトでは0.001
calback
動きが完了したら実行するコールバック関数
at start
自動的に動き始めるかどうかは、デフォルトではfalseです.
stepCallback
運動中に実行されるコールバック関数は、このオブジェクトを指し、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){
                
        $("").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

【アルゴリズム解析LeetCode by Javascript】23.Kの並べ替えチェーンを統合する