實(shí)現(xiàn)抖音兩個(gè)旋轉(zhuǎn)小球的loading技巧實(shí)例

更新時(shí)間：2023年05月11日 10:27:55 作者：夕水

這篇文章主要為大家介紹了實(shí)現(xiàn)抖音兩個(gè)旋轉(zhuǎn)小球的loading技巧實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

探索小圓球加載效果實(shí)現(xiàn)原理

抖音的小圓球加載效果相信大家都見(jiàn)識(shí)過(guò)，也對(duì)其中的實(shí)現(xiàn)原理應(yīng)該有一定的好奇心吧，下面就讓我?guī)Т蠹襾?lái)探索一下小圓球加載效果的實(shí)現(xiàn)原理吧。

要實(shí)現(xiàn)兩個(gè)小圓球，我們可以思考兩種方案的實(shí)現(xiàn)，第一種就是css方案，畫(huà)兩個(gè)小圓球，然后使用css動(dòng)畫(huà)來(lái)實(shí)現(xiàn)，而第二種則是使用canvas方案。我們首先來(lái)嘗試第一種方案，首先肯定是要畫(huà)出兩個(gè)小圓球，這不就是相當(dāng)于畫(huà)兩個(gè)圓嘛，所以使用寬高加圓角屬性即可實(shí)現(xiàn)。

html代碼如下

<div class="rotate-ball">
  <div class="small-ball small-left-ball"></div>
  <div class="small-ball small-right-ball"></div>
</div>

首先是一個(gè)旋轉(zhuǎn)的容器元素，接著就是左右兩個(gè)小圓球，我的思路也很簡(jiǎn)單，既然兩個(gè)小球是互相旋轉(zhuǎn)的，那也就是說(shuō)我給它們的父元素旋轉(zhuǎn)不就達(dá)到了兩個(gè)小球互相旋轉(zhuǎn)的效果嗎？

樣式代碼

.small-ball {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.small-ball.small-left-ball {
    background-color: #e94359;
}
.small-ball.small-right-ball {
    background-color: #74f0ed;
}
.rotate-ball {
    width: 22px;
    animation: rotate 5s ease-in infinite forwards;
    transition: 2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@keyframes rotate {
   0% {
      transform: rotateY(0deg);
   }
   100% {
      transform: rotateY(360deg);
   }
}

樣式代碼很簡(jiǎn)單，就是設(shè)置兩個(gè)小圓球的寬高和圓角，然后分別設(shè)置不同的背景色，然后給父元素添加旋轉(zhuǎn)動(dòng)畫(huà)，這看起來(lái)似乎很容易就實(shí)現(xiàn)了

嗯大功告成，等等，這個(gè)效果差的太遠(yuǎn)了吧，沒(méi)那么簡(jiǎn)單，好吧很顯然這個(gè)方案不太合適，讓我們換一種方式來(lái)實(shí)現(xiàn)，也就是第二種方案canvas方案。

使用canvas方案實(shí)現(xiàn)我們主要分為兩個(gè)步驟，第一步即使用canvas畫(huà)出兩個(gè)小圓球，第二步則是讓兩個(gè)小圓球進(jìn)行翻轉(zhuǎn)，也就是添加翻轉(zhuǎn)動(dòng)畫(huà)。

首先第一步當(dāng)然是畫(huà)小圓球，每個(gè)小圓球我們都可以看作是一個(gè)類(lèi)，我們把它叫做ball，好的，接下來(lái)我們來(lái)看代碼如下:

class Ball { 
  // 這里寫(xiě)核心代碼
}

既然小圓球是一個(gè)類(lèi)，那么我們小圓球就會(huì)有屬性，思考一下，我們會(huì)有哪些屬性呢？總結(jié)如下:

圓心X坐標(biāo)
圓心Y坐標(biāo)
半徑
開(kāi)始角度
結(jié)束角度
順時(shí)針，逆時(shí)針?lè)较蛑付?/li>
是否描邊
是否填充
縮放X比例
縮放Y比例

首先小圓球有一個(gè)圓心坐標(biāo)，既x和y坐標(biāo)，其次還有半徑，然后旋轉(zhuǎn)的角度會(huì)有開(kāi)始和結(jié)束，并且還會(huì)有旋轉(zhuǎn)的方向，然后就是畫(huà)小圓球是否有描邊，是否能夠填充，最后就是縮放比例（主要用于小球運(yùn)動(dòng)時(shí)，我們根據(jù)實(shí)際效果可以看到小球旋轉(zhuǎn)的時(shí)候明顯有縮放效果，所以這里需要一個(gè)縮放比例的屬性）。

分析了屬性之后，很顯然我們第一步要做的就是初始化這些屬性，代碼如下:

class Ball {
  x: number;
  y: number;
  r: number;
  startAngle: number;
  endAngle: number;
  anticlockwise: boolean;
  stroke: boolean;
  fill: boolean;
  scaleX: number;
  scaleY: number;
  lineWidth: number;
  fillStyle: string | CanvasGradient | CanvasPattern;
  strokeStyle: string | CanvasGradient | CanvasPattern;
  constructor(o: AnyObj) {
    this.x = 0; // 圓心X坐標(biāo)
    this.y = 0; // 圓心Y坐標(biāo)
    this.r = 0; // 半徑
    this.startAngle = 0; // 開(kāi)始角度
    this.endAngle = 0; // 結(jié)束角度
    this.anticlockwise = false; // 順時(shí)針，逆時(shí)針?lè)较蛑付?
    this.stroke = false; // 是否描邊
    this.fill = false; // 是否填充
    this.scaleX = 1; // 縮放X比例
    this.scaleY = 1; // 縮放Y比例
    this.init(o);
  }
  init(o: AnyObj): void {
    Object.keys(o).forEach(k => (this[k] = o[k]));
  }
}

初始化屬性之后我們要干什么？那當(dāng)然是渲染小圓球啦，寫(xiě)一個(gè)render方法就可以了。

class Ball {
    // 以上代碼以省略
    render(){
      // 渲染小圓球代碼
    }
}

canvas畫(huà)圓的步驟

如何畫(huà)小圓球？也就是canvas畫(huà)圓的步驟，最核心的就是canvas的arc方法,總的說(shuō)來(lái)，我們主要分為設(shè)置原點(diǎn)坐標(biāo)，設(shè)置縮放，調(diào)用arc方法畫(huà)圓，設(shè)置線(xiàn)寬，填充顏色，以及描邊這幾步，然后我們返回小圓球?qū)嵗?，因而代碼如下:

class Ball {
    // 以上代碼已省略
    render(ctx: CanvasRenderingContext2D | null): Ball | void {
    if (!ctx) {
      return;
    }
    ctx.save();
    ctx.beginPath();
    ctx.translate(this.x, this.y); // 設(shè)置原點(diǎn)的位置
    ctx.scale(this.scaleX, this.scaleY); // 設(shè)定縮放
    ctx.arc(0, 0, this.r, this.startAngle, this.endAngle); // 畫(huà)圓
    if (this.lineWidth) {
      // 線(xiàn)寬
      ctx.lineWidth = this.lineWidth;
    }
    if (this.fill) {
      // 是否填充
      this.fillStyle ? (ctx.fillStyle = this.fillStyle) : null;
      ctx.fill();
    }
    if (this.stroke) {
      // 是否描邊
      this.strokeStyle ? (ctx.strokeStyle = this.strokeStyle) : null;
      ctx.stroke();
    }
    ctx.restore();
    return this;
  }
}

如此一來(lái)，我們畫(huà)小圓球這一步就算是完成了，接下來(lái)我們要做的就是讓小圓球動(dòng)起來(lái)。要讓小圓球動(dòng)起來(lái)，那么就需要用到定時(shí)器，然而我這里并沒(méi)有使用setInterval函數(shù)，這是為什么呢？

如果我們把定時(shí)器每次執(zhí)行一次看作是一個(gè)任務(wù)，那么setInterval就相當(dāng)于是按照一定的時(shí)間間隔來(lái)執(zhí)行任務(wù)，而一個(gè)任務(wù)的開(kāi)始時(shí)間和結(jié)束時(shí)間我們是無(wú)法保證它們之間的時(shí)間間隔的，也就是說(shuō)有時(shí)候我們的循環(huán)定時(shí)任務(wù)會(huì)被跳過(guò)，而setTimeout因?yàn)槭窃跅l件滿(mǎn)足的時(shí)候會(huì)自動(dòng)停止，所以我們可以使用setTimeout來(lái)避免這個(gè)問(wèn)題，因此，接下來(lái)我要說(shuō)的就是我們會(huì)使用setTimeout來(lái)模擬實(shí)現(xiàn)setInterval函數(shù)。

那么如何實(shí)現(xiàn)呢？

我們把每次setTimeout執(zhí)行也看作是一個(gè)任務(wù)，然后我們通過(guò)一個(gè)對(duì)象來(lái)存儲(chǔ)每一次執(zhí)行的任務(wù)，這樣我們每次執(zhí)行的任務(wù)都可以通過(guò)在對(duì)象當(dāng)中找到，因此，我們要清除任務(wù)同樣也可以從對(duì)象當(dāng)中取出任務(wù)來(lái)清除。

也就是說(shuō)，我們存儲(chǔ)每一個(gè)setTimeout任務(wù)的延遲id，這個(gè)函數(shù)返回一個(gè)數(shù)值型的延遲id，我們把這個(gè)值記錄到對(duì)象當(dāng)中，方便后面從對(duì)象當(dāng)中取出然后清除任務(wù)。

實(shí)現(xiàn)這個(gè)函數(shù)主要分成兩部分，第一部分當(dāng)然還是模擬實(shí)現(xiàn)執(zhí)行定時(shí)任務(wù)，第二部分就是模擬實(shí)現(xiàn)一個(gè)清除定時(shí)任務(wù)的函數(shù)，即clearInterval函數(shù)的模擬實(shí)現(xiàn)。

模擬實(shí)現(xiàn)定時(shí)任務(wù)我們可以使用遞歸來(lái)實(shí)現(xiàn)，這個(gè)應(yīng)該還是比較好理解，這里我們還有一點(diǎn)，那就是存儲(chǔ)在對(duì)象當(dāng)中的延遲id，我們需要一個(gè)屬性名，對(duì)象不就是一種含有屬性名屬性值的鍵值對(duì)數(shù)據(jù)類(lèi)型嗎？在這里屬姓名我們可以使用Symbol類(lèi)型，為什么使用這個(gè)數(shù)據(jù)類(lèi)型？因?yàn)檫@個(gè)數(shù)據(jù)類(lèi)型確保了唯一性。

最后還有一點(diǎn)，那就是如果要寫(xiě)ts類(lèi)型，那么定時(shí)器任務(wù)的回調(diào)函數(shù)應(yīng)該是任意類(lèi)型的函數(shù)，因此這里需要編寫(xiě)類(lèi)型代碼。如下:

type AnyFunction = (...args: any) => any;

模擬函數(shù)代碼

通過(guò)以上分析，我們的模擬函數(shù)代碼就很好理解了，代碼如下:

export const defineSetInterval = (): {
  setInterval: (fn: AnyFunction, time: number) => symbol;
  clearInterval: (k: symbol) => void;
} => {
  const timeWorker = {};
  const key = Symbol();
  const defineInterval = (handler: AnyFunction, interval: number) => {
    const executor = (fn: AnyFunction, time: number) => {
      timeWorker[key] = setTimeout(() => {
        fn();
        executor(fn, time);
      }, time);
    };
    executor(handler, interval);
    return key;
  };
  const defineClearInterval = (k: symbol):void => {
    if (k in timeWorker) {
      clearTimeout(timeWorker[k] as number);
      delete timeWorker[k];
    }
  };
  return {
    setInterval: defineInterval,
    clearInterval: defineClearInterval
  };
};

以下是該函數(shù)的使用示例代碼：

const { setInterval, clearInterval } = defineSetInterval();
const timeId = setInterval(() => alert('hello,world!'), 1000);
// 取消定時(shí)器// clearInterval(timeId);

讓我們繼續(xù)下一步，下一步我們當(dāng)然是創(chuàng)建這兩個(gè)小圓球，然后暴露出一個(gè)start方法和一個(gè)clear方法，顧名思義，就是在這個(gè)函數(shù)當(dāng)中我們創(chuàng)建小圓球，然后默認(rèn)不執(zhí)行動(dòng)畫(huà)，將執(zhí)行動(dòng)畫(huà)的邏輯包裝在start方法中，而之所以留下一個(gè)clear方法，那就是如果需要實(shí)現(xiàn)暫停效果，也就是清除定時(shí)器了，那么我們就需要調(diào)用clear方法清除定時(shí)器，暫停執(zhí)行動(dòng)畫(huà)，如果需要重新執(zhí)行動(dòng)畫(huà)，那么我們也就重新調(diào)用start方法即可。因此這個(gè)函數(shù)的結(jié)構(gòu)我們可以定義如下:

export interface CreateBallReturnType {
  clear: () => void;
  start: (time?: number) => void;
}
export interface AnyObj {
    [prop: string]: unknown
}
export const createBall = (
  el: HTMLElement | string,
  leftBallConfig?: AnyObj,
  rightBallConfig?: AnyObj
): CreateBallReturnType => {
  // 這里寫(xiě)核心代碼
}

這個(gè)函數(shù)有3個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)dom元素，也就是說(shuō)，我們需要將兩個(gè)小圓球渲染到canvas元素上，再將這個(gè)canvas元素添加到一個(gè)容器元素當(dāng)中，這個(gè)el參數(shù)就是代表傳入一個(gè)容器元素中，如果不傳，那么我們默認(rèn)就添加到body元素中，第二個(gè)和第三個(gè)參數(shù)分別是兩個(gè)小圓球的配置屬性對(duì)象，其實(shí)這里我們直接采用默認(rèn)的就好，不需要傳入這兩個(gè)參數(shù)，因此這兩個(gè)參數(shù)是可選的，雖然這里定義的是任意對(duì)象，但實(shí)際上根據(jù)前面小圓球類(lèi)含有哪些屬性的分析結(jié)果來(lái)看，這兩個(gè)參數(shù)很明顯傳入的就是初始化的那些屬性，如果有特別需求，可以傳入這些屬性進(jìn)行更改。

計(jì)算縮放比例的公式

在實(shí)現(xiàn)該函數(shù)的核心之前，我們這里會(huì)涉及到一個(gè)計(jì)算縮放比例的公式，代碼如下:

export const computedScale = (val: number, dir: number, dis: number): number =>
  (val * 1000 + dir * (dis * 1000)) / 1000;

這里就不多分析這個(gè)公式的原理了，只要記住它是一個(gè)公式就可以了。

接下來(lái)我們看該函數(shù)的核心實(shí)現(xiàn)，我們主要也還是分成2個(gè)部分，第一個(gè)部分渲染兩個(gè)小圓球并添加到容器元素中，定義動(dòng)畫(huà)函數(shù)，并封裝到start函數(shù)當(dāng)中，然后暴露出start和clear函數(shù)。這里需要注意的一點(diǎn)，那就是小圓球的寬高以及canvas元素的寬高不會(huì)太大，然后小圓球移動(dòng)有個(gè)邊界，因此x坐標(biāo)和y坐標(biāo)有個(gè)最小值和最大值，我們定義成一個(gè)一維數(shù)組即可。

接下來(lái)，我們按照相應(yīng)的分析步驟去實(shí)現(xiàn)每一步驟的代碼就可以了，每一步在代碼當(dāng)中也有所注明，所以我們只需要看完整代碼即可。

export const createBall = (
  el: HTMLElement | string,
  leftBallConfig?: AnyObj,
  rightBallConfig?: AnyObj
): CreateBallReturnType => {
  const container = (typeof el === 'string' ? document.querySelector(el) : el) || document.body;
  const canvas = document.createElement('canvas');
  canvas.width = 34;
  canvas.height = 20;
  container.appendChild(canvas);
  const w = canvas.width;
  const h = canvas.height;
  const ctx = canvas.getContext('2d');
  const xArr = [10, 22];
  const yArr = [10, 10];
  const leftBall = new Ball({
    x: xArr[0],
    y: yArr[0],
    r: 6,
    startAngle: 0,
    endAngle: 2 * Math.PI,
    fill: true,
    fillStyle: '#E94359',
    lineWidth: 1.2,
    ...leftBallConfig
  }).render(ctx);
  const rightBall = new Ball({
    x: xArr[1],
    y: yArr[1],
    r: 6,
    startAngle: 0,
    endAngle: 2 * Math.PI,
    fill: true,
    fillStyle: '#74F0ED',
    lineWidth: 1.2,
    ...rightBallConfig
  }).render(ctx);
  const a = 1.04; // 加速度
  let dir = 1; // 方向
  let dis = 1; // X軸移動(dòng)初始值
  const move = (): void => {
    if (!ctx || !leftBall || !rightBall) {
      return;
    }
    // 清理畫(huà)布
    ctx.clearRect(0, 0, w, h);
    // 通過(guò)加速度計(jì)算移動(dòng)值
    dis *= a;
    // 更改x軸位置
    leftBall.x += dir * dis;
    rightBall.x -= dir * dis;
    // 計(jì)算縮放比例
    leftBall.scaleX = computedScale(-dir, 0.005, leftBall.scaleX);
    leftBall.scaleY = computedScale(-dir, 0.005, leftBall.scaleY);
    rightBall.scaleX = computedScale(dir, 0.005, rightBall.scaleX);
    rightBall.scaleY = computedScale(dir, 0.005, rightBall.scaleY);
    // 到達(dá)指定位置后
    if (leftBall.x >= 22 || rightBall.x >= 22 || leftBall.x <= 10 || rightBall.x <= 10) {
      // 設(shè)定縮放比例
      leftBall.scaleX = rightBall.scaleX;
      leftBall.scaleY = rightBall.scaleY;
      rightBall.scaleX = leftBall.scaleX;
      rightBall.scaleY = leftBall.scaleY;
      // 還原X軸移動(dòng)初始值
      dis = 1;
      // 變更移動(dòng)方向
      dir = -dir;
    }
    // 繪制
    if (dir > 0) {
      // 方向不一樣時(shí)，小球的繪制順序要交換，移模擬旋轉(zhuǎn)
      rightBall.render(ctx);
      leftBall.render(ctx);
    } else {
      leftBall.render(ctx);
      rightBall.render(ctx);
    }
  };
  let timer: symbol;
  const { setInterval: setHandler, clearInterval: clearHandler } = defineSetInterval();
  const start = (time = 50): void => {
    timer = setHandler(move, time);
  };
  return {
    start,
    clear: (): void => {
      if (timer) {
        clearHandler(timer);
      }
    }
  };
};

可以看到我們先是創(chuàng)建canvas元素，設(shè)置寬高，然后創(chuàng)建兩個(gè)小圓球添加到canvas元素當(dāng)中，再然后我們定義一個(gè)move方法，也就是小圓球的翻轉(zhuǎn)動(dòng)畫(huà)的實(shí)現(xiàn)，難點(diǎn)可能就主要是翻轉(zhuǎn)動(dòng)畫(huà)的實(shí)現(xiàn)原理。

翻轉(zhuǎn)動(dòng)畫(huà)的實(shí)現(xiàn)原理

如此一來(lái)，我們?nèi)绻菍?xiě)js/ts代碼，使用起來(lái)就很簡(jiǎn)單，直接調(diào)用方法即可，如:

createBall();
// 如果需要指定特定的容器元素，那么傳入一個(gè)dom元素，例如 document.querySelector('#app')
// 又或者傳入一個(gè)字符串也可以,既'#app'
// 也就是createBall('#app');

接下來(lái)我們?cè)俜庋b一下，將這個(gè)函數(shù)用到react框架中，做成一個(gè)組件，很簡(jiǎn)單，我們利用ref對(duì)象來(lái)存儲(chǔ)dom元素，然后使用useEffect函數(shù)監(jiān)聽(tīng)這個(gè)dom元素是否存在，然后存在就調(diào)用該方法。代碼如下:

import React, { createRef, CSSProperties, ReactElement, useEffect } from 'react';
import { createBall } from './ball';
import '../style/loading.scss';
export interface LoadingProps extends AnyObj {
  style?: CSSProperties;
}
const Loading = (props: LoadingProps = {}): ReactElement | null => {
  const loadingRef = createRef<HTMLDivElement>();
  useEffect(() => {
    // 這里多一個(gè)children判斷是因?yàn)槿绻撛匾呀?jīng)被渲染過(guò)，我們就不需要添加到容器元素中了
    if (loadingRef.current && !loadingRef.current.children.length) {
      const ball = createBall(loadingRef.current);
      ball.start();
    }
  }, [loadingRef]);
  return <div ref={loadingRef} className="loading" {...props} />;
};
export default Loading;

這里涉及到了一點(diǎn)樣式，樣式隨便自己寫(xiě):

@import './extend.scss';
.loading {
  position: absolute;
  left: 0;
  top: 0;
  @extend .perfect, .flex-center;
}

extend.scss代碼如下：

.flex-content-center {
  display: flex;
  justify-content: center;
}
.flex-align-center {
  display: flex;
  align-items: center;
}
.flex-center {
  @extend .flex-content-center, .flex-align-center;
}
.perfect {
  width: percentage(1);
  height: percentage(1);
}

如此一來(lái)，我們的抖音旋轉(zhuǎn)小圓球效果就實(shí)現(xiàn)了，更多關(guān)于抖音兩個(gè)旋轉(zhuǎn)小球loading的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: