国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何做活動(dòng)頁(yè)面的滾動(dòng)動(dòng)畫？讓用戶體驗(yàn)MAX的demo在這里！

timger / 3426人閱讀

摘要：此時(shí)需要判斷當(dāng)前位置是否大于或者小于，若超過(guò)這個(gè)極限值需要重設(shè)目標(biāo)位移及幀位移，使其在極限值內(nèi)。判斷第二次滑動(dòng)是否與第一次不同方向，若不同向需重置上次幀位移為。以免上次幀位移太大影響移動(dòng)方向。

本文由云+社區(qū)發(fā)表

最近的一個(gè)活動(dòng)頁(yè)面需要做一個(gè)可以左右滑動(dòng)的抽簽效果，故通過(guò)用css的transform屬性和js結(jié)合來(lái)模擬可以無(wú)限滾動(dòng)的效果。

先上效果：

demo地址：https://kiroroyoyo.github.io/cardTransform/index.html

實(shí)現(xiàn)過(guò)程

1. 結(jié)構(gòu)與樣式

結(jié)構(gòu)：卡片分前后兩排，每列插入10個(gè)div結(jié)點(diǎn)，以便做左右位移效果。

樣式：設(shè)置每一列都恰好好在中間位置（或中間位置附近），如下所示。

a. 前排（cardFrond）相對(duì)于視口的初始位置(left:-255.5%;)：

b. 后排（backFrond）相對(duì)于視口的初始位置(left:-228.3%;)：

2. 無(wú)限滾動(dòng)原理

由于這里的停止位置是固定的，前排永遠(yuǎn)是當(dāng)前卡片相對(duì)于視口居中，后排永遠(yuǎn)是兩個(gè)卡片相對(duì)于視口居中，且每個(gè)卡片是一樣的，所以當(dāng)卡片列表向前或向右移動(dòng)到一個(gè)目標(biāo)位置時(shí)，都將列表重置為初始位置繼續(xù)滾動(dòng)。如下圖以前排卡片為例：

所以當(dāng)滾動(dòng)停止后會(huì)統(tǒng)一將列表樣式設(shè)置為transform: translateX(0)。而對(duì)于用戶這一操作是無(wú)感知的，認(rèn)為已經(jīng)滑動(dòng)到了新的位置。

3.滑動(dòng)過(guò)程實(shí)現(xiàn)

a. 目標(biāo)位移與幀位移

為了做出滑動(dòng)后到停留位置的緩動(dòng)效果，所以當(dāng)用戶左右滑動(dòng)屏幕時(shí)，會(huì)記錄滑動(dòng)距離，計(jì)算出卡片該到的目標(biāo)位移位置，目標(biāo)位移位置是有規(guī)則的，因?yàn)檫@里有10張卡片均分寬度，位置必須是(100%/10)的整數(shù)倍，例如-40%、-30%、……40%，這樣才能保證目標(biāo)位置與初始位置相重合。

目標(biāo)位移代碼片段

onDocumentMouseUp : function(e){
    //如果是點(diǎn)擊事件 不設(shè)置移動(dòng)
    if (!this.fingerTouch)
      return;
    this.moveDirect = this.lon > 0 ? 1 : -1;
    this.transNum = this.lon/10 + this.moveDirect;
    this.lon = Math.round(this.transNum) * 10;
    this.fingerTouch = false;   
}

記錄了目標(biāo)位移后，每一幀會(huì)以一定的幀位移不斷靠近目標(biāo)位移，使其在手指離開屏幕時(shí)仍有慢慢滑動(dòng)到目標(biāo)位置的緩動(dòng)效果。此時(shí)需要判斷當(dāng)前位置是否大于40%或者小于-40%，若超過(guò)這個(gè)極限值需要重設(shè)目標(biāo)位移及幀位移，使其在極限值內(nèi)。

animate: function(){
    this.prePos += (this.lon - this.prePos) * 0.1;
    if (this.prePos > 40) {
      this.lon = this.lon - 40;
      this.prePos = this.prePos - 40;
    }else if (this.prePos < -40) {
      this.lon = this.lon + 40;
      this.prePos = this.prePos + 40;
    }
    //判斷是否到達(dá)了目標(biāo)位置
    if (Math.abs(this.prePos - this.lon) < 0.01 && Math.abs(this.lon) > 0.01 && (!this.fingerTouch))
    {
        this.ani_move = false;
        this.prePos = 0;
        this.frondCard.style = "transform: translateX("+ this.prePos +"%)";
        this.backCard.style = "transform: translateX("+ this.prePos +"%)";
    }else{
        this.frondCard.style = "transform: translateX("+ this.prePos +"%)";
        this.backCard.style = "transform: translateX("+ (-this.prePos) +"%)";
        requestAnimationFrame(this.animate.bind(this));
    }
  },

b. 連續(xù)滑動(dòng)判斷

當(dāng)在上次滑動(dòng)動(dòng)畫還未播放結(jié)束時(shí)用戶又進(jìn)行了第二次滑動(dòng)時(shí)，需要執(zhí)行一下操作：

? 1). 判斷滑動(dòng)時(shí)機(jī)處于上次滑動(dòng)手指已離開屏幕但動(dòng)畫還未結(jié)束，此時(shí)需要記錄兩個(gè)flag，一個(gè)是ani_move，記錄動(dòng)畫是否仍在進(jìn)行，fingerTouch記錄手指是否停留屏幕。

? 2). 判斷第二次滑動(dòng)是否與第一次不同方向，若不同向需重置上次幀位移為0。以免上次幀位移太大影響移動(dòng)方向。

1)與2)代碼片段：

if( this.ani_move && this.fingerTouch == false) {
    // 判斷是否不同向
    if (((e.clientX - prex) > 0 ? 1: -1) == -this.moveDirect ) {
        this.lon = 0;
        this.prePos = 0;
        this.moveDirect = -this.moveDirect;
    }
}

3). 取消第二次滑動(dòng)時(shí)的動(dòng)畫播放和位移重置

// 若是上次動(dòng)畫未結(jié)束不需要再次啟動(dòng)動(dòng)畫和重置目標(biāo)位移
if( this.ani_move && this.fingerTouch == false) {
}
else {
    this.lon = 0;
     cardAnimate.animate();
}

寫在最后

目前這個(gè)滑動(dòng)效果只能針對(duì)卡片相同，停留位置固定的情況，因?yàn)樾枰龅轿恢弥睾稀Ｊ褂胏ss transform來(lái)做無(wú)限滾動(dòng)的效果，可以避免改變dom結(jié)點(diǎn)帶來(lái)的頁(yè)面重新布局。

下圖是chrome cpu6倍減速調(diào)試效果，沒有觸發(fā)layout，F(xiàn)PS基本維持在60左右。

代碼地址：

https://github.com/kiroroyoyo/cardTransform

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布

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

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

相關(guān)文章

  • 如何做活動(dòng)頁(yè)面的滾動(dòng)動(dòng)畫？讓用戶體驗(yàn)MAX的demo在這里！

    摘要：此時(shí)需要判斷當(dāng)前位置是否大于或者小于，若超過(guò)這個(gè)極限值需要重設(shè)目標(biāo)位移及幀位移，使其在極限值內(nèi)。判斷第二次滑動(dòng)是否與第一次不同方向，若不同向需重置上次幀位移為。以免上次幀位移太大影響移動(dòng)方向。 本文由云+社區(qū)發(fā)表 最近的一個(gè)活動(dòng)頁(yè)面需要做一個(gè)可以左右滑動(dòng)的抽簽效果，故通過(guò)用css的transform屬性和js結(jié)合來(lái)模擬可以無(wú)限滾動(dòng)的效果。 先上效果： showImg(https://s...

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

  • 如何做活動(dòng)頁(yè)面的滾動(dòng)動(dòng)畫？讓用戶體驗(yàn)MAX的demo在這里！

    摘要：此時(shí)需要判斷當(dāng)前位置是否大于或者小于，若超過(guò)這個(gè)極限值需要重設(shè)目標(biāo)位移及幀位移，使其在極限值內(nèi)。判斷第二次滑動(dòng)是否與第一次不同方向，若不同向需重置上次幀位移為。以免上次幀位移太大影響移動(dòng)方向。 本文由云+社區(qū)發(fā)表 最近的一個(gè)活動(dòng)頁(yè)面需要做一個(gè)可以左右滑動(dòng)的抽簽效果，故通過(guò)用css的transform屬性和js結(jié)合來(lái)模擬可以無(wú)限滾動(dòng)的效果。 先上效果： showImg(https://s...

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

  • 網(wǎng)頁(yè)性能分析不完全指南

    摘要：因此，如果可能，最好利用好毫秒響應(yīng)預(yù)先計(jì)算開銷大的工作，這樣網(wǎng)站就更有可能實(shí)現(xiàn)的性能。空閑主線程工作分成不大于毫秒的塊。點(diǎn)擊按鈕見圖示，會(huì)在頁(yè)面運(yùn)行時(shí)捕獲性能指標(biāo)。 前言 經(jīng)常能在博客或者論壇上看到很多有關(guān)前端性能優(yōu)化的文章，但是卻很少看到如何分析一個(gè)網(wǎng)頁(yè)的性能的文章。到底什么樣的指標(biāo)（或者說(shuō)是標(biāo)準(zhǔn)）代表這個(gè)網(wǎng)頁(yè)性能好或者不好，通過(guò)什么方式來(lái)得到這些指標(biāo)呢？因此，本文來(lái)講述下如何分析一...

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

  • AlloyTouch全屏滾動(dòng)插件發(fā)布--30秒搞定順滑H5頁(yè)

    原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先驗(yàn)貨 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代碼可以在這里找到。 注意，雖然是掃碼體驗(yàn)，但是AlloyTouch.FullPag...

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

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

0條評(píng)論

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