html5實(shí)現(xiàn)購(gòu)物車拋物線

widuu 發(fā)布于2019-08-21 11:48 / 2089人閱讀

摘要：實(shí)現(xiàn)原理利用運(yùn)動(dòng)的合成原理，在水平方向上，執(zhí)行勻速運(yùn)動(dòng)，在豎直方向上執(zhí)行勻變速運(yùn)動(dòng)，合成后的物體運(yùn)動(dòng)軌跡便是拋物線。需要使用兩個(gè)標(biāo)簽，一個(gè)父標(biāo)簽，一個(gè)子標(biāo)簽，運(yùn)動(dòng)曲線分別綁定在對(duì)應(yīng)的兩個(gè)標(biāo)簽上。確定起始位置和結(jié)束位置點(diǎn)。

實(shí)現(xiàn)原理

1.利用運(yùn)動(dòng)的合成原理，在水平方向上，執(zhí)行勻速運(yùn)動(dòng)，在豎直方向上執(zhí)行勻變速運(yùn)動(dòng)，合成后的物體運(yùn)動(dòng)軌跡便是拋物線。
2.需要使用兩個(gè)標(biāo)簽，一個(gè)父標(biāo)簽，一個(gè)子標(biāo)簽，運(yùn)動(dòng)曲線分別綁定在對(duì)應(yīng)的兩個(gè)標(biāo)簽上。
3.確定起始位置和結(jié)束位置點(diǎn)。

css樣式

.parent{
    position:absolute; 
    z-index:10; 
    -webkit-transition:all 0.5s cubic-bezier( 0.39,-0.4,0.5,0 ) 0s; // 可以自定義
}
.child{
    width:20px; 
    height:20px; 
    border-radius:50%; 
    background-color:#f9b52c; 
    -webkit-transition:all 0.5s linear 0s; // 可以自定義
}

js代碼段

    var curveMove = function ( node ){ // node 為點(diǎn)擊的節(jié)點(diǎn)
    var 
    xStar = node.offset().left + node.width() / 2, // 獲取起始點(diǎn)橫坐標(biāo)
    yStar = node.offset().top - node.height() / 2, // 獲取起始點(diǎn)縱坐標(biāo)
    width = 20,height = 20,
    nodeOffset = $(".aim").offset(), // 購(gòu)物車偏移量
    xEnd = nodeOffset.left + width / 2, // 結(jié)束點(diǎn)橫坐標(biāo)
    yEnd = nodeOffset.top + height / 2; // 結(jié)束點(diǎn)縱坐標(biāo)
    $("").appendTo("body");
    var 
    outer = $(".parent").last().css({ left : xStar, top : yStar }),
    inner = outer.children();
    setTimeout(function(){ // 延時(shí)一下，避免 transition 不執(zhí)行
        outer[0].style.transform = "translate3d(0," + ( yEnd - yStar )+ "px,0)";
        inner[0].style.transform = "translate3d(" + ( xEnd - xStar )  + "px,0,0)";
        }, 30 );
    };
 // 最后將已經(jīng)結(jié)束的動(dòng)畫節(jié)點(diǎn)清除，這里用到了 transitionEnd 監(jiān)聽事件，代碼如下：
    document.addEventListener("webkitTransitionEnd", function( e ){
        // 監(jiān)聽動(dòng)畫是否執(zhí)行完，若執(zhí)行完則清除相應(yīng)的節(jié)點(diǎn)，
        var node = $(e.target).remove();
        node = null; // 待系統(tǒng)回收
    });