效果展示
github
春節放假前的第二天上午，看到設計稿上的圖（如下），於是發生了下面的對話
-我：把這個圖傳一下吧。
-ui：好的，你是要 gif 吧。
-我：啥？這個是個動畫？
-ui：啥？這不是動畫？
-我：打擾了。
於是在剩下的一天裡，我擼出了這個波浪動畫
想想需求
首先我們能想到的是，波浪的數量一定是可定製的，其次是顏色，速度，透明度，高度等等。這些可定製的引數應當在函式例項化時傳入。所以我們先定製乙個介面（包括了後來在編寫時我認為需要的）。
inte***ce options >
opacity: number
border:
position: 'top' | 'bottom' | 'left' | 'right'
}複製**
key指的傳入變數的名稱，value為變數的型別規範
設計介面
我們先預先想下可能發生的場景：
動畫需要指令化的開始或暫停
可以通過方法實時設定或更改引數，並反映在動畫上
在動畫的容器縮放時，畫布應當能重新設定
所以我們暫時值規定四個型別為public介面animate，pause，setoptions，reset
inte***ce core
複製**
準備乙個 canvas
基本操作，不多介紹。
id="canvas">
canvas>
body>
複製**
const canvas = document.getelementbyid('canvas')
const ctx = canvas.getcontext('2d')
canvas.width = document.body.offsetwidth
canvas.height = document.body.offsetheight
複製**
畫乙個矩形，然後填充顏色。
ctx.fillstyle = "rgba(255,118,87,.6)"
ctx.beginpath()
ctx.moveto(0, canvas.height/2)
ctx.lineto(canvas.width, canvas.height/2)
ctx.lineto(canvas.width, canvas.height)
ctx.lineto(0, canvas.height)
ctx.lineto(0, canvas.height/2)
ctx.closepath()
ctx.fill()
複製**
要讓水池的水呈週期性的**和跌落，很容易想到借助正弦或者余弦函式來完成，在每一幀的渲染中將step增加 1 度，規定 50 為變化值，利用正弦函式將變化量作用於左右兩個頂點上即可。
let step = 0
function
loop()
loop()
複製**
使左右頂點不同步即可讓水面晃動起來，所以我們將左頂點的取值使用余弦函式即可。
let step = 0
function
loop()
loop()
複製**
借助貝塞爾曲線將矩形的一邊變為波浪。
在 canvas 繪製中，我們借助beziercurveto(cpx1, cpy1, cpx2, cpy2, x, y)方法繪製貝塞爾曲線，由上圖可見（歪脖 45 度檢視更直觀），兩個控制點的橫座標應當設為矩形寬的中點，縱座標跟隨峰值變化即可。
let step = 0
function
loop()
loop()
複製**
將上面的波浪寫成 for 迴圈多次渲染即可。
let step = 0
const lines = 3
function
loop()
requestanimationframe(loop)
} loop()
複製**
如果你也有這樣的需求，可以參考上述示例簡單使用，也可以使用我編寫的
最後的最後，歡迎 star ~
github
CSS製作乙個波浪形文字動畫效果
在今天的文章裡，我們採用html和css來實現乙個波浪形的動畫文字。它是最簡單的css動畫效果之一。對於初學者來講，這是學習css偽元素概念的最佳示例之一。實現方法，通過結合使用一些css屬性來執行獲取波浪文字的基本思想。主要的 主體 部分是通過使用標記內的標記建立的。css 用於建立html結構的...
乙個聖誕動畫的實現
看下面的例子 test.c include main char str i like linux i advices you jion in the linux world printf s n str exit 0 使用gcc編譯 輸入gcc c test.c得到目標檔案test.o。c命令表示對...
WPF乙個下雪的動畫
wpf乙個下雪的動畫，呼叫startsnowing方法，傳canvas面板會在指定面板內展示動畫，目前缺點就是滑鼠會一直處於載入中狀態。直接貼 三種雪花樣式，下降加旋轉動畫 void startsnowing canvas panel break case 1 pack new packiconma...