去年，我有機(jī)會(huì)與肖恩·王（Shawn Wang）（Swyx）合作就暫時(shí)的項(xiàng)目。目標(biāo)是通過(guò)一些創(chuàng)意元素來(lái)增強(qiáng)他們的網(wǎng)站。這是一個(gè)令人著迷的挑戰(zhàn)，因?yàn)槲腋袷且粋€(gè)開(kāi)發(fā)人員，而不是設(shè)計(jì)師，但我卻抓住了擴(kuò)大設(shè)計(jì)技能的機(jī)會(huì)。

我的貢獻(xiàn)之一是互動(dòng)的星空背景。您可以在這裡看到它：

使用Perspective和CSS自定義屬性的BlockQuote概念。享受@temporalio的創(chuàng)意自由。添加一點(diǎn)點(diǎn)奇思妙想！ ??@reaectjs && @tailwindcss（站點(diǎn)是nextjs）？通過(guò)@codepen pic.twitter.com/s9xp2trrox鏈接到codepen

- jhey ???（@jh3yy）2021年7月2日

該設(shè)計(jì)的強(qiáng)度在於它作為可重複使用的React組件的實(shí)現(xiàn)，提供了高配置性。需要不同的形狀而不是星星？想要精確控製粒子放置嗎？您可以完全控制。

讓我們構(gòu)建此組件！我們將使用React，Greensock和HTML<canvas></canvas>元素。 React是可選的，但使用它為將來(lái)的項(xiàng)目創(chuàng)建了可重複使用的組件。

構(gòu)建基本應(yīng)用

從'https://cdn.skypack.dev/reeact'導(dǎo)入反應(yīng)';
從'https://cdn.skypack.dev/reaeact-dom'導(dǎo)入reactdom';
從'https://cdn.skypack.dev/gsap'導(dǎo)入GSAP';

const root_node = document.queryselector（'＃app'）;

const starscape =（）=><h1>很酷的東西！</h1> ;

const app =（）=><starscape></starscape> ;

Reactdom.render（<app></app> ，root_node）;

首先，我們渲染一個(gè)<canvas></canvas>元素並獲取引用以在React的useEffect掛鉤中使用。如果不使用React，請(qǐng)將參考直接存儲(chǔ)在變量中。

 const starscape =（）=> {
  const canvasref = react.useref（null）;
  返回<canvas ref="{canvasRef}"></canvas>;
};

我們會(huì)樣式<canvas></canvas>填充視口並坐在內(nèi)容的背後：

帆布 {
  位置：固定；
  插圖：0;
  背景：＃262626;
  z index：-1;
  身高：100VH；
  寬度：100VW;
}

添加星星

我們將通過(guò)使用具有不同不透明度和尺寸的圓圈來(lái)簡(jiǎn)化星星的渲染。在一個(gè)圓上畫一個(gè)圓<canvas></canvas>涉及獲取上下文並使用arc功能。讓我們使用useEffect鉤在中心渲染一個(gè)圓圈（我們的星星）：

 const starscape =（）=> {
  const canvasref = react.useref（null）;
  const contextref = react.useref（null）;
  react.useeffect（（）=> {
    canvasref.current.width = window.innerwidth;
    canvasref.current.height = window.innerheight;
    contextref.current = canvasref.current.getContext（'2d'）;
    contextref.current.fillstyle ='Yellow';
    contextref.current.beginath（）;
    contextref.current.arc（
      window.innerwidth / 2，// x
      window.innerheight / 2，// y
      100，//半徑
      0，//開(kāi)始角度（弧度）
      Math.pi * 2 //末端角度（弧度）
    ）；
    contextref.current.fill（）;
  }，[]）;
  返回<canvas ref="{canvasRef}"></canvas>;
};

這會(huì)產(chǎn)生一個(gè)黃色的圓圈。其餘代碼將在此useEffect之內(nèi)。這就是為什麼反應(yīng)部分是可選的。您可以將此代碼適應(yīng)其他框架。

我們需要生成並渲染多個(gè)星星。讓我們創(chuàng)建一個(gè)LOAD功能來(lái)處理恆星生成和畫佈設(shè)置，包括帆布尺寸：

 const load =（）=> {
  const vmin = math.min（window.innerheight，window.innerwidth）;
  const star_count = math.floor（vmin * densepratio）;
  canvasref.current.width = window.innerwidth;
  canvasref.current.height = window.innerheight;
  starsref.current = new Array（star_count）.fill（）。map（（）=>（{{）
    x：gsap.utils.random（0，window.innerwidth，1），
    y：gsap.utils.random（0，window.innerheight，1），
    尺寸：gsap.utils.random（1，Sizelimit，1），
    比例：1，
    alpha：gsap.utils.random（0.1，defaultalpha，0.1），
  }））;
};

每個(gè)恆星都是具有定義其特徵（x，y位置，大小，比例，alpha）的屬性的對(duì)象。 sizeLimit ， defaultAlpha和densityRatio是傳遞給具有默認(rèn)值的Starscape組件。

樣本星對(duì)象：

 {
  “ x”：1252，
  “ Y”：29，
  “大小”：4，
  “比例”：1，
  “ alpha”：0.5
}

為了渲染這些恆星，我們創(chuàng)建了一個(gè)RENDER函數(shù)，該函數(shù)可在stars陣列上迭代，並使用arc函數(shù)呈現(xiàn)每個(gè)恆星：

 const Render =（）=> {
  contextref.current.ClearRect（
    0，
    0，
    canvasref.current.width，
    canvasref.current.height
  ）；
  StarsRef.Current.Foreach（（Star）=> {
    contextref.current.fillstyle =`hsla（0，100％，100％，$ {star.alpha}）`;
    contextref.current.beginath（）;
    contextref.current.arc（star.x，star.y，star.size / 2，0，math.pi * 2）;
    contextref.current.fill（）;
  }）;
};

clearRect功能在渲染之前清除了畫布，這對(duì)於動(dòng)畫至關(guān)重要。

完整的Starscape組件（尚無(wú)交互性）如下：

 const starscape =（{denseratio = 0.5，sizelimit = 5，defaultalpha = 0.5}）=> {
  const canvasref = react.useref（null）;
  const contextref = react.useref（null）;
  const starsRef = react.useref（null）;
  react.useeffect（（）=> {
    contextref.current = canvasref.current.getContext（'2d'）;
    const load =（）=> {
      const vmin = math.min（window.innerheight，window.innerwidth）;
      const star_count = math.floor（vmin * densepratio）;
      canvasref.current.width = window.innerwidth;
      canvasref.current.height = window.innerheight;
      starsref.current = new Array（star_count）.fill（）。map（（）=>（{{）
        x：gsap.utils.random（0，window.innerwidth，1），
        y：gsap.utils.random（0，window.innerheight，1），
        尺寸：gsap.utils.random（1，Sizelimit，1），
        比例：1，
        alpha：gsap.utils.random（0.1，defaultalpha，0.1），
      }））;
    };
    const Render =（）=> {
      contextref.current.ClearRect（0，0，canvasref.current.width，canvasref.current.height）;
      StarsRef.Current.Foreach（（Star）=> {
        contextref.current.fillstyle =`hsla（0，100％，100％，$ {star.alpha}）`;
        contextref.current.beginath（）;
        contextref.current.arc（star.x，star.y，star.size / 2，0，math.pi * 2）;
        contextref.current.fill（）;
      }）;
    };
    const run =（）=> {
      載入();
      使成為（）;
    };
    跑步（）;
    window.addeventListener（'resize'，run）;
    返回（）=> {
      window.removeEventListener（'resize'，run）;
    };
  }，[]）;
  返回<canvas ref="{canvasRef}"></canvas>;
};

在演示中嘗試道具以查看其效果。要處理視口度調(diào)整大小，我們調(diào)用LOAD並在調(diào)整大小上RENDER （以優(yōu)化的措施進(jìn)行了辯論，此處省略了）。

添加互動(dòng)

現(xiàn)在，讓我們進(jìn)行背景互動(dòng)。當(dāng)指針移動(dòng)時(shí)，光標(biāo)附近的恆星會(huì)變亮並擴(kuò)大規(guī)模。

我們將添加一個(gè)UPDATE功能來(lái)計(jì)算指針與每個(gè)星星之間的距離，然後使用Greensock的mapRange實(shí)用程序?qū)a星的比例和Alpha進(jìn)行補(bǔ)充。我們還將添加scaleLimit和proximityRatio props來(lái)控制縮放行為。

 const update =（{x，y}）=> {
  StarsRef.Current.Foreach（（Star）=> {
    const距離= MATH.SQRT（MATH.POW（Star.X -X，2）Math.pow（Star.Y -Y，2））;
    gsap.to（星，{
      比例：scalemapperref.current（Math.min（距離，vminref.current * proximityratio）），），），），）
      alpha：alphamapperref.current（Math.min（距離，vminref.current * proximityratio）），），），），）
    }）;
  }）;
};

為了渲染更新，我們使用gsap.ticker （ requestAnimationFrame的一個(gè)很好的替代方法），將RENDER添加到股票中並在清理中刪除。我們將每秒（FPS）的幀設(shè)置為24。 RENDER函數(shù)現(xiàn)在使用star.scale值繪製弧線時(shí)。

載入();
gsap.ticker.add（渲染）;
gsap.ticker.fps（24）;
window.addeventListener（'ressize'，load）;
document.AddeventListener（'PointerMove'，Update）;
返回（）=> {
  window.removeEventListener（'resize'，load）;
  document.removeEventListener（'PointerMove'，Update）;
  gsap.ticker.remove（渲染）;
};

現(xiàn)在，當(dāng)您移動(dòng)鼠標(biāo)時(shí)，星星會(huì)做出反應(yīng)！

為了處理鼠標(biāo)離開(kāi)畫布的情況，我們添加了一個(gè)pointerleave事件偵聽(tīng)器，該偵聽(tīng)器將星星重新回到其原始狀態(tài)：

 const exit =（）=> {
  GSAP.TO（StarsRef.Current，{scale：1，alpha：defaultalpha}）;
};

// ...活動(dòng)聽(tīng)眾...
document.AddeventListener（“ Pointerleave”，退出）;
返回（）=> {
  // ... 清理 ...
  Document.RemoveEventListener（“ Pointerleave”，退出）;
  gsap.ticker.remove（渲染）;
};

獎(jiǎng)金：Konami代碼復(fù)活節(jié)彩蛋

讓我們添加一個(gè)Konami代碼復(fù)活節(jié)彩蛋。如果輸入代碼，我們將收聽(tīng)鍵盤事件並觸發(fā)動(dòng)畫。

 const konami_code ='arrowup，arrowup，arrowdown，arrowdown，arrowleft，arrowLight，arrowleft，arrowleft，arrowright，keya，keya';
const coderef = react.useref（[]）;
react.useeffect（（）=> {
  const handlecode =（e）=> {
    coderef.current = [... coderef.current，e.code] .slice（coderef.current.length> 9？coderef.current.length-length -9：0）;
    if（coderef.current.join（'，'）.tolowercase（）=== konami_code.tolowercase（））{
      //觸發(fā)復(fù)活節(jié)彩蛋動(dòng)畫
    }
  };
  window.addeventListener（'keyup'，handlecode）;
  返回（）=> {
    window.removeEventListener（'keyup'，handlecode）;
  };
}，[]）;

帶有Konami Code復(fù)活節(jié)彩蛋的完整的，交互式的Starscape組件非常冗長(zhǎng)，因此在這裡省略了。但是，上面概述的原則演示瞭如何使用React，Greensock和HTML創(chuàng)建功能齊全且可定制的交互式星空背景<canvas></canvas>。復(fù)活節(jié)彩蛋動(dòng)畫將涉及創(chuàng)建一個(gè)gsap.timeline 。

此示例演示了創(chuàng)建自己的自定義背景所需的技術(shù)。請(qǐng)記住要考慮背景如何與您網(wǎng)站的內(nèi)容相互作用。嘗試不同的形狀，顏色和動(dòng)畫，以創(chuàng)建獨(dú)特而引人入勝的視覺(jué)效果。

以上是內(nèi)容的互動(dòng)星空背景的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！