成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Javascript中的拋物線 ~ 加入購(gòu)物車小動(dòng)畫

AZmake / 2841人閱讀

摘要：上圖即為歸零后的坐標(biāo)系，對(duì)稱軸直線為在拋物線方程中，值得正負(fù)代表著拋物線的開口方向，那么值的絕對(duì)值也和拋物線的開口大小有著反比例的關(guān)系。

廢話不多說,先上DEMO~
http://jsrun.net/PxKKp?uid=483
再上源碼~
https://github.com/Nelson2016...

運(yùn)行的原理

很簡(jiǎn)單的一個(gè)小特效，接下來來說一下他的原理。

顯而易見，這小東西肯定和拋物線肯定有著割不開的情緣啦~

上圖！


那么我們將跑速先多帶帶拿出來看：

首先拋物線嘛~得有自己的方程啊，就像自己的身份證一樣。

我們假設(shè)拋物線的方程為 y = ax^2 + bx + c。

為了計(jì)算方便呢，我們另拋物線經(jīng)過（0，0）這一點(diǎn)，那么c的值就為0了。


上圖即為歸零后的坐標(biāo)系，對(duì)稱軸直線為 x2 = -b / 2a.

在拋物線方程中，a值得正負(fù)代表著拋物線的開口方向，那么a值的絕對(duì)值也和拋物線的開口大小有著反比例的關(guān)系。那么a值我們即定位一個(gè)已知值作為參數(shù)傳給運(yùn)動(dòng)。

到現(xiàn)在為止，y = ax^2 + bx + c;方程中的a值與c之就為已知了

那么拋物線對(duì)稱軸的x值-x2 在起始點(diǎn)坐標(biāo)與終點(diǎn)坐標(biāo)已知的情況下是苛求的，那么x2變?yōu)橐阎俊?/p>

通過x2 = -b / 2a即可就出b值，那么整個(gè)拋物線方程我們就得出啦~

碼代碼

1.定義一個(gè)全局的對(duì)象。

nelsonAddtoCartAnimation{}

2.在nelsonAddtoCartAnimation中我們定義幾個(gè)值：

a:"",//拋物線系數(shù)
b:"",//拋物線系數(shù)
c:"",//拋物線系數(shù)
startX:"",//起始X坐標(biāo)
startY:0,//其實(shí)Y坐標(biāo)
endX:"",//終點(diǎn)X坐標(biāo)
endY:0,//終點(diǎn)Y坐標(biāo)
second:0,//動(dòng)畫總計(jì)時(shí)
speed:10,//動(dòng)畫速度

3.接下來我們用一個(gè)init函數(shù)來初始化這個(gè)‘小球’：創(chuàng)建“小球”的DOM，把它放到起始位置，并計(jì)算動(dòng)畫需要的時(shí)間。

 function init(startX,endX,rC,txt){    
    if(!document.getElementById("nelsonATCAContainer")){
        var _nelsonATCAContainer = document.createElement("div");
        _nelsonATCAContainer.className = "nelsonATCAContainer";
        _nelsonATCAContainer.id = "nelsonATCAContainer";
        _nelsonATCAContainer.innerText = txt?txt:"";
        _nelsonATCAContainer.style.left = startX + "px";
        nelsonATCAControlBar.appendChild(_nelsonATCAContainer);
        nelsonATCAContainer = _nelsonATCAContainer;
        _nelsonATCAContainer = null;
        his.startX = startX;
        this.endX = endX;
        this.formula(rC);
        this.second = Math.abs(startX - endX) * this.speed / 1000;
        return this;
    }
}

4.計(jì)算a、b、c的值：首先根據(jù)起點(diǎn)、終點(diǎn)坐標(biāo)計(jì)算對(duì)稱軸的坐標(biāo)centerX，然后根據(jù)a值和centerX值計(jì)算b的值，由于我們強(qiáng)制使拋物線經(jīng)過（0，0）點(diǎn)，而實(shí)際中我們需要對(duì)拋物線進(jìn)行移動(dòng)，根據(jù)拋物線終點(diǎn)坐標(biāo)和起點(diǎn)坐標(biāo)計(jì)算c的值，最終得到拋物線方程。

function formula(rC){
    var centerX =  (this.startX - this.endX) / 2 + this.endX;
    this.a = rC;
    this.b = -2 * this.a * centerX;
    this.c = -1 * this.a * this.startX * this.startX - this.b * this.startX;
}

5.開始漂移

function move(){
    var that = this;
    for(var i in prefixes){
           nelsonATCAContainer.style[prefixes[i] + prefixes[i]?"A":"a" + "nimation"] = "moveAnimation " + that.second + "s forwards";
    }
    nelsonATCAContainer.style.display = "block";
    var s = setInterval(function(){
        var startLeft = nelsonATCAContainer.offsetLeft;
        if(startLeft <= that.endX){
            clearInterval(s);
            that.resetPosition();
            return that;
        }
        nelsonATCAContainer.style.left = startLeft - 1 + "px";
        startLeft = nelsonATCAContainer.offsetLeft;
        nelsonATCAContainer.style.top = that.a * startLeft * startLeft + that.b * startLeft + that.c + "px";
    },that.speed)
}

6.大功告成~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80091.html

相關(guān)文章

  • Javascript中的拋物線 ~ 加入購(gòu)物車小動(dòng)畫

    摘要：上圖即為歸零后的坐標(biāo)系，對(duì)稱軸直線為在拋物線方程中，值得正負(fù)代表著拋物線的開口方向，那么值的絕對(duì)值也和拋物線的開口大小有著反比例的關(guān)系。 廢話不多說,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源碼~https://github.com/Nelson2016... 運(yùn)行的原理 很簡(jiǎn)單的一個(gè)小特效，接下來來說一下他的原理。 顯而易見，這小東西肯定和拋物...

    sarva 評(píng)論0 收藏0

  • 實(shí)現(xiàn)加入購(gòu)物車拋物線效果

    寫在前面 最近天氣剛剛轉(zhuǎn)熱，心想應(yīng)該淘點(diǎn)春裝賣賣騷了，然后某寶逛的時(shí)候發(fā)現(xiàn)其加入購(gòu)物車的動(dòng)畫效果不錯(cuò)，既完善了交互，又有功能導(dǎo)向作用，用戶體驗(yàn)杠杠滴～作為一名前端汪，也想自己動(dòng)手實(shí)現(xiàn)下此類酷炫的效果。抽空寫了個(gè)demo，雖然完成的效果比較粗糙，但是擁有毛坯房總好過租房吧哈哈，日后再完善不遲?，F(xiàn)在講講自己的經(jīng)驗(yàn)，順便理理思路，加深印象：） 準(zhǔn)備開始 開始只是在紙上作了草圖，構(gòu)思了下，才發(fā)現(xiàn)如果要一步...

    yunhao 評(píng)論0 收藏0

  • 實(shí)現(xiàn)加入購(gòu)物車拋物線效果

    寫在前面 最近天氣剛剛轉(zhuǎn)熱，心想應(yīng)該淘點(diǎn)春裝賣賣騷了，然后某寶逛的時(shí)候發(fā)現(xiàn)其加入購(gòu)物車的動(dòng)畫效果不錯(cuò)，既完善了交互，又有功能導(dǎo)向作用，用戶體驗(yàn)杠杠滴～作為一名前端汪，也想自己動(dòng)手實(shí)現(xiàn)下此類酷炫的效果。抽空寫了個(gè)demo，雖然完成的效果比較粗糙，但是擁有毛坯房總好過租房吧哈哈，日后再完善不遲?，F(xiàn)在講講自己的經(jīng)驗(yàn)，順便理理思路，加深印象：） 準(zhǔn)備開始 開始只是在紙上作了草圖，構(gòu)思了下，才發(fā)現(xiàn)如果要一步...

    xiguadada 評(píng)論0 收藏0

  • JS 實(shí)現(xiàn)拋物線動(dòng)畫

    摘要：陳家賓在做小程序的項(xiàng)目中，需要在添加購(gòu)物車的時(shí)候，增加拋物線小球動(dòng)畫。 author: 陳家賓 email: [email protected] date: 2018/2/24 在做小程序的項(xiàng)目中，需要在添加購(gòu)物車的時(shí)候，增加拋物線小球動(dòng)畫。 先給大家看下效果圖（其實(shí)已經(jīng)是實(shí)現(xiàn)后的效果了，順便給自己公司打廣告了哈哈） showImg(https://segmentfault.com/im...

    zollero 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<