如何做活動頁面的滾動動畫？讓用戶體驗MAX的demo在這里！

rollback 發布于2019-08-30 15:54 / 1990人閱讀

摘要：此時需要判斷當前位置是否大于或者小于，若超過這個極限值需要重設目標位移及幀位移，使其在極限值內。判斷第二次滑動是否與第一次不同方向，若不同向需重置上次幀位移為。以免上次幀位移太大影響移動方向。

本文由云+社區發表

最近的一個活動頁面需要做一個可以左右滑動的抽簽效果，故通過用css的transform屬性和js結合來模擬可以無限滾動的效果。

先上效果：

demo地址：https://kiroroyoyo.github.io/...

實現過程 1. 結構與樣式

結構：卡片分前后兩排，每列插入10個div結點，以便做左右位移效果。

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

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

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

2. 無限滾動原理

由于這里的停止位置是固定的，前排永遠是當前卡片相對于視口居中，后排永遠是兩個卡片相對于視口居中，且每個卡片是一樣的，所以當卡片列表向前或向右移動到一個目標位置時，都將列表重置為初始位置繼續滾動。如下圖以前排卡片為例：

所以當滾動停止后會統一將列表樣式設置為transform: translateX(0)。而對于用戶這一操作是無感知的，認為已經滑動到了新的位置。

3.滑動過程實現

a. 目標位移與幀位移

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

目標位移代碼片段

onDocumentMouseUp : function(e){
    //如果是點擊事件 不設置移動
    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;   
}

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

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;
    }
    //判斷是否到達了目標位置
    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. 連續滑動判斷

當在上次滑動動畫還未播放結束時用戶又進行了第二次滑動時，需要執行一下操作：

? 1). 判斷滑動時機處于上次滑動手指已離開屏幕但動畫還未結束，此時需要記錄兩個flag，一個是ani_move，記錄動畫是否仍在進行，fingerTouch記錄手指是否停留屏幕。

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

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). 取消第二次滑動時的動畫播放和位移重置

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

寫在最后

目前這個滑動效果只能針對卡片相同，停留位置固定的情況，因為需要做到位置重合。使用css transform來做無限滾動的效果，可以避免改變dom結點帶來的頁面重新布局。

下圖是chrome cpu6倍減速調試效果，沒有觸發layout，FPS基本維持在60左右。

代碼地址：

https://github.com/kiroroyoyo...

此文已由作者授權騰訊云+社區發布

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117116.html

如何做活動頁面的滾動動畫？讓用戶體驗MAX的demo在這里！

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

gaara 2019-08-02 13:56 評論0 收藏0
如何做活動頁面的滾動動畫？讓用戶體驗MAX的demo在這里！

摘要：此時需要判斷當前位置是否大于或者小于，若超過這個極限值需要重設目標位移及幀位移，使其在極限值內。判斷第二次滑動是否與第一次不同方向，若不同向需重置上次幀位移為。以免上次幀位移太大影響移動方向。本文由云+社區發表最近的一個活動頁面需要做一個可以左右滑動的抽簽效果，故通過用css的transform屬性和js結合來模擬可以無限滾動的效果。先上效果： demo地址：https://kir...

timger 2019-04-23 11:57 評論0 收藏0
網頁性能分析不完全指南

摘要：因此，如果可能，最好利用好毫秒響應預先計算開銷大的工作，這樣網站就更有可能實現的性能。空閑主線程工作分成不大于毫秒的塊。點擊按鈕見圖示，會在頁面運行時捕獲性能指標。前言經常能在博客或者論壇上看到很多有關前端性能優化的文章，但是卻很少看到如何分析一個網頁的性能的文章。到底什么樣的指標（或者說是標準）代表這個網頁性能好或者不好，通過什么方式來得到這些指標呢？因此，本文來講述下如何分析一...

zgbgx 2019-05-29 17:03 評論0 收藏0
AlloyTouch全屏滾動插件發布--30秒搞定順滑H5頁

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

_ivan 2019-08-21 11:21 評論0 收藏0