js怎樣實現文字抖動效果 4種抖動動畫讓文本更具表現力

3713

要實現文字抖動效果，可通過JS控制文字位置變化，結合css動畫或外部庫來實現。方法一為簡單隨機抖動，通過隨機改變left和top值模擬抖動；方法二是利用css動畫定義抖動并通過js控制播放與停止；方法三使用貝塞爾曲線配合gsap庫實現復雜軌跡抖動；方法四根據鼠標移動動態調整抖動幅度增強互動性。性能優化包括減少dom操作、使用css動畫、requestanimationframe、節流防抖、簡化計算、硬件加速等。讓抖動更自然的方法有引入不規則抖動、緩動函數、物理模擬及細節調整。其他增強表現力的文字動畫包括漸顯/漸隱、打字機效果、縮放、旋轉、顏色變化、模糊切換、描邊、3d、粒子和變形等。

js怎樣實現文字抖動效果 4種抖動動畫讓文本更具表現力

文字抖動，說白了，就是讓文字動起來，吸引眼球。用JS實現，核心就是控制文字的位置，讓它在小范圍內快速變化。

js怎樣實現文字抖動效果 4種抖動動畫讓文本更具表現力

解決方案

js怎樣實現文字抖動效果 4種抖動動畫讓文本更具表現力

實現文字抖動效果，主要思路是利用CSS的transform: translate()屬性結合JavaScript的定時器來改變文字的位置。以下提供四種不同的抖動動畫實現方式，每種方式都略有不同，可以根據具體需求選擇。

方法一：簡單隨機抖動

js怎樣實現文字抖動效果 4種抖動動畫讓文本更具表現力

這是最基礎的實現方式，通過隨機改變文字的left和top值，模擬抖動效果。

<style>   .shake {     position: relative; /* 關鍵：設置相對定位，讓抖動在其原始位置上進行 */   } </style>  <span id="shakeText" class="shake">抖動的文字</span>  <script>   const shakeText = document.getElementById('shakeText');    function shake() {     const randomX = Math.floor(Math.random() * 5) - 2; // 左右抖動范圍：-2px ~ 2px     const randomY = Math.floor(Math.random() * 5) - 2; // 上下抖動范圍：-2px ~ 2px      shakeText.style.transform = `translate(${randomX}px, ${randomY}px)`;      // 50毫秒后停止抖動，歸位     setTimeout(() => {       shakeText.style.transform = 'translate(0, 0)';     }, 50);   }    setInterval(shake, 100); // 每100毫秒抖動一次 </script>

方法二：CSS動畫結合JS控制

這種方法利用CSS動畫定義抖動效果，然后通過JS來觸發動畫。這樣做的好處是性能更好，動畫更流暢。

<style>   .shake {     animation: shakeAnimation 0.5s infinite; /* 動畫持續0.5秒，無限循環 */   }    @keyframes shakeAnimation {     0% { transform: translate(1px, 1px) rotate(0deg); }     10% { transform: translate(-1px, -2px) rotate(-1deg); }     20% { transform: translate(-3px, 0px) rotate(1deg); }     30% { transform: translate(3px, 2px) rotate(0deg); }     40% { transform: translate(1px, -1px) rotate(1deg); }     50% { transform: translate(-1px, 2px) rotate(-1deg); }     60% { transform: translate(-3px, 1px) rotate(0deg); }     70% { transform: translate(3px, 1px) rotate(-1deg); }     80% { transform: translate(-1px, -1px) rotate(1deg); }     90% { transform: translate(1px, 2px) rotate(0deg); }     100% { transform: translate(1px, -2px) rotate(-1deg); }   }    .stop-shake {     animation: none; /* 停止動畫 */   } </style>  <span id="shakeText" class="shake">抖動的文字</span>  <button id="toggleShake">停止抖動</button>  <script>   const shakeText = document.getElementById('shakeText');   const toggleShakeButton = document.getElementById('toggleShake');    toggleShakeButton.addEventListener('click', () => {     if (shakeText.classList.contains('shake')) {       shakeText.classList.remove('shake');       shakeText.classList.add('stop-shake');       toggleShakeButton.textContent = '開始抖動';     } else {       shakeText.classList.remove('stop-shake');       shakeText.classList.add('shake');       toggleShakeButton.textContent = '停止抖動';     }   }); </script>

方法三：貝塞爾曲線控制抖動

這種方法使用貝塞爾曲線來控制抖動軌跡，可以實現更復雜的抖動效果。 需要引入一些動畫庫，比如GreenSock (GSAP)。 由于涉及外部庫，這里只提供思路，不提供完整代碼。

思路：

  1. 引入GSAP庫。
  2. 使用gsap.to()方法，結合貝塞爾曲線，控制文字的x和y坐標，實現抖動效果。
  3. 可以調整貝塞爾曲線的控制點，改變抖動的軌跡和幅度。

方法四：結合鼠標移動的抖動

這種方法讓文字的抖動幅度隨著鼠標的移動而變化，增加互動性。

<style>   .shake {     position: relative;     display: inline-block; /* 確保文字占據空間 */   } </style>  <span id="shakeText" class="shake">抖動的文字</span>  <script>   const shakeText = document.getElementById('shakeText');    document.addEventListener('mousemove', (event) => {     const mouseX = event.clientX;     const mouseY = event.clientY;      const textRect = shakeText.getBoundingClientRect();     const textCenterX = textRect.left + textRect.width / 2;     const textCenterY = textRect.top + textRect.height / 2;      const distanceX = mouseX - textCenterX;     const distanceY = mouseY - textCenterY;      // 根據距離計算抖動幅度，距離越大，抖動越厲害     const shakeAmount = Math.sqrt(distanceX * distanceX + distanceY * distanceY) / 50; // 調整除數控制抖動幅度      const randomX = Math.floor(Math.random() * shakeAmount) - shakeAmount / 2;     const randomY = Math.floor(Math.random() * shakeAmount) - shakeAmount / 2;      shakeText.style.transform = `translate(${randomX}px, ${randomY}px)`;      // 稍微延遲一下，避免抖動過于劇烈     setTimeout(() => {       shakeText.style.transform = 'translate(0, 0)';     }, 20);   }); </script>

JS抖動效果的性能優化有哪些方法？

  1. 減少DOM操作： 頻繁的DOM操作是性能瓶頸。盡量避免在抖動動畫中直接修改DOM元素的樣式，可以考慮使用CSS動畫或者requestAnimationFrame。

  2. 使用CSS動畫： CSS動畫由瀏覽器底層優化，性能通常比JS動畫更好?？梢詫⒍秳有Чx為CSS動畫，然后通過JS來控制動畫的播放和停止。

  3. requestAnimationFrame： 如果必須使用JS動畫，使用requestAnimationFrame代替setInterval或setTimeout。requestAnimationFrame會在瀏覽器重繪之前執行，可以避免掉幀和卡頓。

  4. 節流和防抖： 對于需要響應用戶操作的抖動效果，例如鼠標移動，可以使用節流或防抖技術來限制事件觸發的頻率，減少計算量。

  5. 避免復雜的計算： 抖動動畫中的計算應該盡可能簡單。避免使用復雜的數學公式或算法，可以使用查表法或者預先計算好結果。

  6. 硬件加速： 確保抖動動畫能夠利用硬件加速?？梢允褂胻ransform: translateZ(0)或者will-change: transform來強制開啟硬件加速。

  7. 減少抖動范圍和頻率： 適當減少抖動的范圍和頻率，可以降低計算量，提高性能。

  8. 測試和優化： 在不同的設備和瀏覽器上測試抖動效果，找出性能瓶頸，并進行針對性的優化。

如何讓文字抖動效果更自然？

  1. 不規則的抖動： 避免完全規律的抖動，加入一些隨機性，讓抖動看起來更自然。例如，可以隨機改變抖動的方向、幅度、速度等。

  2. 緩動函數： 使用緩動函數（easing functions）來控制抖動的速度變化。緩動函數可以使抖動在開始和結束時更加平滑，避免突兀的變化。

  3. 模擬物理效果： 可以嘗試模擬一些物理效果，例如彈簧、慣性等，讓抖動看起來更真實。

  4. 細節調整： 注意調整抖動的細節，例如抖動的幅度、頻率、方向、顏色等，讓抖動效果更符合實際場景。

  5. 考慮上下文： 抖動效果應該與上下文環境相協調。例如，在平靜的環境中，抖動應該比較輕微；在緊急的情況下，抖動可以更劇烈。

  6. 避免過度使用： 過度使用抖動效果會分散用戶的注意力，降低用戶體驗。應該適度使用抖動效果，只在需要強調的地方使用。

  7. 用戶反饋： 收集用戶的反饋，了解用戶對抖動效果的感受，并根據反饋進行調整。

除了抖動，還有哪些文字動畫效果可以增強表現力？

  1. 漸顯/漸隱： 讓文字逐漸顯示或消失，可以用于強調重點或過渡場景。

  2. 打字機效果： 模擬打字機逐個顯示文字的效果，可以用于營造科技感或復古感。

  3. 縮放： 讓文字放大或縮小，可以用于吸引注意力或表達情感。

  4. 旋轉： 讓文字旋轉，可以用于增加趣味性或表達動態感。

  5. 顏色變化： 改變文字的顏色，可以用于突出重點或表達不同的情緒。

  6. 模糊/清晰： 讓文字在模糊和清晰之間切換，可以用于營造神秘感或強調重點。

  7. 描邊動畫： 沿著文字的輪廓繪制線條，可以用于增加藝術感或科技感。

  8. 3D效果： 使用CSS 3D或webgl創建文字的3D效果，可以用于增加視覺沖擊力。

  9. 粒子效果： 將文字分解成粒子，然后讓粒子運動，可以用于創造炫酷的視覺效果。

  10. 變形： 使用CSS transform屬性或SVG來實現文字的變形，可以創造出各種奇特的形狀。

? 版權聲明
THE END
前端教學
# ai# 性能優化# JavaScript# 事件# 瀏覽器# css# JS# 算法# dom# 硬件加速# transform# 重繪# 相對定位# webgl# 防抖技術
喜歡就支持一下吧
點贊13 分享