Javascript曲線行走是前端開發中的一個重要的技術，主要用于實現動畫效果。其通過設置起點、重點、途經點等參數，讓元素沿著預定路徑進行運動，并搭配動態變化的CSS樣式，實現各種各樣的炫酷效果。下面將為大家介紹一些實現曲線行走的基本方法。

一、貝塞爾曲線

let duration = 1000; // 動畫時長
let points = [
{x: 0, y: 0},
{x: 500, y: 500},
{x: 1000, y: 0}
]; // 路徑上的點
let animate = (startTime) =>{
let now = Date.now();
let elapsed = now - startTime;
let t = elapsed / duration;
if (t >1) {
t = 1;
}
let a = points[0];
let b = points[1];
let c = points[2];
let x = (1 - t) * (1 - t) * a.x + 2 * t * (1 - t) * b.x + t * t * c.x;
let y = (1 - t) * (1 - t) * a.y + 2 * t * (1 - t) * b.y + t * t * c.y;
element.style.left = x + 'px';
element.style.top = y + 'px';
if (t< 1) {
window.requestAnimationFrame(() =>animate(now));
}
}
window.requestAnimationFrame(() =>animate(Date.now()));

二、Sin函數曲線

let duration = 1000; // 動畫時長
let amplitude = 50; // 振幅
let frequency = 0.1; // 頻率
let animate = (startTime) =>{
let now = Date.now();
let elapsed = now - startTime;
let t = elapsed / duration;
if (t >1) {
t = 1;
}
let y = amplitude * Math.sin(2 * Math.PI * frequency * elapsed / 1000);
element.style.left = t * 1000 + 'px';
element.style.top = 500 + y + 'px';
if (t< 1) {
window.requestAnimationFrame(() =>animate(now));
}
}
window.requestAnimationFrame(() =>animate(Date.now()));

以上就是Javascript曲線行走的基本實現方法。通過引入Bezier.js等相關庫，我們可以更加輕松地實現各種高級效果。希望大家通過學習本文，能夠掌握這種實現動畫效果的基本技巧，為自己的開發工作和個人項目實現更加生動有趣的效果。