怎么在CSS中利用Houdini實(shí)現(xiàn)一個(gè)動(dòng)態(tài)波浪紋效果？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

10年積累的網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有惠民免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對(duì)于網(wǎng)頁進(jìn)行格式化。

什么是 CSS Houdini？

CSS Houdini 對(duì)外開放了瀏覽器解析流程的一系列 API，這些 API 允許開發(fā)者介入瀏覽器的 CSS engine 運(yùn)作，帶來了更多的 CSS 解決方案。

CSS Houdini 主要提供了以下幾個(gè) API：

CSS Properties and Values API

允許在 CSS 中定義變量和使用變量，是目前兼容性最好的一個(gè) API；

Layout API

允許開發(fā)者編寫自己的 Layout Module，自定義諸如 display 這類的布局屬性；

Painting API

允許開發(fā)者編寫自己的 Paint Module，自定義諸如 background-image 這類的繪制屬性。

基礎(chǔ)：三步用上 Painting API

1、HTML 中通過 Worklets 載入樣式的自定義代碼：

<div class="rect"></div>
<script>
  if ("paintWorklet" in CSS) {
    CSS.paintWorklet.addModule("paintworklet.js");
  }
</script>

Worklets 也是 Houdini 提供的 API 之一，負(fù)責(zé)加載和執(zhí)行樣式的自定義 JS 代碼。它類似于 Web Worker，是一個(gè)運(yùn)行于主代碼之外的獨(dú)立工作進(jìn)程，但比 Worker 更為輕量，負(fù)責(zé) CSS 渲染任務(wù)最為合適。

2、新建一個(gè) paintworklet.js，利用 registerPaint 方法注冊(cè)一個(gè) paint 類 rect，定義 paint 屬性的繪制邏輯：

registerPaint(
  "rect",
  class {
    static get inputProperties() {
      return ["--rect-color"];
    }
    paint(ctx, geom, properties) {
      const color = properties.get("--rect-color")[0];
      ctx.fillStyle = color;
      ctx.fillRect(0, 0, geom.width, geom.height);
    }
  }
);

上邊定義了一個(gè)名為 rect 的 paint 屬性類，當(dāng) rect 被使用時(shí)，會(huì)實(shí)例化 rect 并自動(dòng)觸發(fā) paint 方法執(zhí)行渲染。paint 方法中，我們獲取節(jié)點(diǎn) CSS 定義的 --rect-color 變量，并將元素的背景填充為指定顏色。ctx 參數(shù)是一個(gè) Canvas 的 Context 對(duì)象，因此 paint 的邏輯跟 Canvas 的繪制方式一樣。

3、CSS 中使用的時(shí)候，只需要調(diào)用 paint 方法：

.rect {
  width: 100vw;
  height: 100vh;
  background-image: paint(rect);
  --rect-color: rgb(255, 64, 129);
}

這是一個(gè)自定義 CSS 背景色屬性的簡(jiǎn)單實(shí)現(xiàn)，看得出利用 CSS Houdini，我們可以像操作 canvas 一樣靈活自如地實(shí)現(xiàn)我們想要的樣式功能。

進(jìn)階：實(shí)現(xiàn)動(dòng)態(tài)波紋

根據(jù)上述步驟，我們演示一下如何用 CSS Painting API 實(shí)現(xiàn)一個(gè)動(dòng)態(tài)波浪的效果：

<!-- index.html -->
<div id="wave"></div>

<style>
  #wave {
    width: 20%;
    height: 70vh;
    margin: 10vh auto;
    background-color: #ff3e81;
    background-image: paint(wave);
  }
</style>

<script>
  if ("paintWorklet" in CSS) {
    CSS.paintWorklet.addModule("paintworklet.js");

    const wave = document.querySelector("#wave");
    let tick = 0;  
    requestAnimationFrame(function raf(now) {
      tick += 1;
      wave.style.cssText = `--animation-tick: ${tick};`;
      requestAnimationFrame(raf);
    });
  }
</script>

// paintworklet.js
registerPaint('wave', class {
  static get inputProperties() {
    return ['--animation-tick'];
  }
  paint(ctx, geom, properties) {
    let tick = Number(properties.get('--animation-tick'));
    const {
      width,
      height
    } = geom;
    const initY = height * 0.4;
    tick = tick * 2;

    ctx.beginPath();
    ctx.moveTo(0, initY + Math.sin(tick / 20) * 10);
    for (let i = 1; i <= width; i++) {
      ctx.lineTo(i, initY + Math.sin((i + tick) / 20) * 10);
    }
    ctx.lineTo(width, height);
    ctx.lineTo(0, height);
    ctx.lineTo(0, initY + Math.sin(tick / 20) * 10);
    ctx.closePath();

    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.fill();
  }
})

paintworklet 中，利用 sin 函數(shù)繪制波浪線，由于 AnimationWorklets 尚處于實(shí)驗(yàn)階段，開放較少，這里我們?cè)?worklet 外部用 requestAnimationFrame API 來做動(dòng)畫驅(qū)動(dòng)，讓波浪紋動(dòng)起來。完成后能看到下邊這樣的效果。

 

然而事實(shí)上這個(gè)效果略顯僵硬，sin 函數(shù)太過于規(guī)則了，現(xiàn)實(shí)中的波浪應(yīng)該是不規(guī)則波動(dòng)的，這種不規(guī)則主要體現(xiàn)在兩個(gè)方面：

1）波紋高度（Y）隨位置（X）變化而不規(guī)則變化

 

把圖按照 x-y 正交分解之后，我們希望的不規(guī)則，可以認(rèn)為是固定某一時(shí)刻，隨著 x 軸變化，波紋高度 y 呈現(xiàn)不規(guī)則變化；

2）固定某點(diǎn)（X 固定），波紋高度（Y）隨時(shí)間推進(jìn)而不規(guī)則變化

動(dòng)態(tài)過程需要考慮時(shí)間維度，我們希望的不規(guī)則，還需要體現(xiàn)在時(shí)間的影響中，比如風(fēng)吹過的前一秒和后一秒，同一個(gè)位置的波浪高度肯定是不規(guī)則變化的。

提到不規(guī)則，有朋友可能想到了用 Math.random 方法，然而這里的不規(guī)則并不適合用隨機(jī)數(shù)來實(shí)現(xiàn)，因?yàn)榍昂髢纱稳〉碾S機(jī)數(shù)是不連續(xù)的，而前后兩個(gè)點(diǎn)的波浪是連續(xù)的。這個(gè)不難理解，你見過長(zhǎng)成鋸齒狀的波浪嗎？又或者你見過上一刻 10 米高、下一刻就掉到 2 米的波浪嗎？

為了實(shí)現(xiàn)這種連續(xù)不規(guī)則的特征，我們棄用 sin 函數(shù)，引入了一個(gè)包 simplex-noise。由于影響波高的有兩個(gè)維度，位置 X 和時(shí)間 T，這里需要用到 noise2D 方法，它提前在一個(gè)三維的空間中，構(gòu)建了一個(gè)連續(xù)的不規(guī)則曲面：

// paintworklet.js
import SimplexNoise from 'simplex-noise';
const sim = new SimplexNoise(() => 1);

registerPaint('wave', class {
  static get inputProperties() {
    return ['--animation-tick'];
  }

  paint(ctx, geom, properties) {
    const tick = Number(properties.get('--animation-tick'));

    this.drawWave(ctx, geom, 'rgba(255, 255, 255, 0.4)', 0.004, tick, 15, 0.4);
    this.drawWave(ctx, geom, 'rgba(255, 255, 255, 0.5)', 0.006, tick, 12, 0.4);
  }
  
  /**
   * 繪制波紋
   */
  drawWave(ctx, geom, fillColor, ratio, tick, amp, ih) {
    const {
      width,
      height
    } = geom;
    const initY = height * ih;
    const speedT = tick * ratio;

    ctx.beginPath();
    for (let x = 0, speedX = 0; x <= width; x++) {
      speedX += ratio * 1;
      var y = initY + sim.noise2D(speedX, speedT) * amp;
      ctx[x === 0 ? 'moveTo' : 'lineTo'](x, y);
    }
    ctx.lineTo(width, height);
    ctx.lineTo(0, height);
    ctx.lineTo(0, initY + sim.noise2D(0, speedT) * amp);
    ctx.closePath();

    ctx.fillStyle = fillColor;
    ctx.fill();
  }
})

關(guān)于怎么在CSS中利用Houdini實(shí)現(xiàn)一個(gè)動(dòng)態(tài)波浪紋效果問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

新聞名稱：怎么在CSS中利用Houdini實(shí)現(xiàn)一個(gè)動(dòng)態(tài)波浪紋效果
網(wǎng)站地址：http://jinyejixie.com/article20/ppidco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、企業(yè)網(wǎng)站制作、軟件開發(fā)、網(wǎng)站改版、網(wǎng)站營(yíng)銷、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)