在最近專案中,ui設計了個水波效果的背景動畫,然而並沒有gif或svg動畫,開始試著用css實現了一下,動畫效果並不是很好,網上查了下基本都是用貝賽爾曲線實現,想起以看的各種前波形圖,於是想著用三角函數影像初略模擬一下
一、繪製sin函數影像sin函數表達式如下,
y=Asin(wx+φ)+h
其中A表示振幅,ω表示角頻率(ω=2π/T,T為函數的週期),φ表示初相,h表示影像向y軸正方向平移的長度;(這裡要注意一下:h在數學學的本來是表示向上平移的,但在canvas中採用的是螢幕座標系,即左上角為原點,h則表示向下平移);
繪製程式碼如下:
(1)新增canvas標籤
<canvas id=canvas></canvas>
(2)新增css樣式,設定canvas寬高
html,body { padding: 0; margin: 0; width: 100%; height: 100%;}canvas { width: 100%; height: 100%;}
(3)繪製函數影像
var canvas = document.getElementById(canvas), ctx = canvas.getContext('2d'), width = canvas.width = canvas.offsetWidth, height = canvas.height = canvas.offsetHeight;//聲明參數var A=50, W=1 / 50, Q=0, H= height / 2;//繪圖方法(function draw(){ ctx.clearRect(0, 0, width, height);//清空畫布ctx.beginPath(); //開始路徑ctx.strokeStyle=#000; //設定線條顏色ctx.lineWidth = 1; //設定線條寬度ctx.moveTo(0, height /2); //起始點位置for (let x = 0; x <= width; x++) {// 繪製x對應y的var y = A*Math.sin(W*x+Q) +H ctx.lineTo(x, y) } ctx.stroke(); / /繪製路徑ctx.closePath(); //閉合路徑})()
這樣我們可以得到以下圖像:
二、為函數圖像添加動畫上面得到的是一個靜態的函數圖像,而我們一般見到的的波形圖或水波都是隨時間連續變化的,這裡就要用到上一步中的參數相位φ,(js即程式碼中的Q ) ,我們將φ隨時間不斷增加或減小,即可得到不同時間的不同圖片;使用window.requestAnimationFrame實作影格動畫;
修改以上程式碼為:
var canvas = document.getElementById(canvas), ctx = canvas.getContext('2d'), width = canvas.width = canvas.offsetWidth, height = canvas.height = canvas.offsetHeight;//聲明參數var A=50, W=1 / 50, Q=0, H= height / 2;//繪圖方法(function draw(){ ctx.clearRect(0, 0, width, height);//清空畫布ctx.beginPath(); //開始路徑ctx.strokeStyle=#000; //設定線條顏色ctx.lineWidth = 1; //設定線條寬度ctx.moveTo(0, height /2); //起始點位置for (let x = 0; x <= width; x++) {// 繪製x對應y的var y = A*Math.sin(W*x+Q) +H ctx.lineTo(x, y) } ctx.stroke(); / /繪製路徑ctx.closePath(); //閉合路徑})()
效果如下(渣渣截圖軟體):
三、繪製完整填充路徑以上路徑雖有閉合,卻不符合我們需要填滿的部分,直接填充效果如下:
完整填充路徑應如圖所示:
閉合路徑後建立漸層顏色,作為填滿顏色,程式碼如下:
var lingrad = ctx.createLinearGradient(0,0,width,0); lingrad.addColorStop(0, 'rgba(0,186,128,0.8)'); lingrad.addColorStop(1, 'rgba(111,224,195,function');function' draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.strokeStyle=#000; ctx.fillStyle = lingrad; ctx.lineWidctth = 1; 000xmovex. , height /2); Q+=speed; for (let x = 0; x <= width; x++) { var y = A*Math.sin(W*x+Q) +H; ctx.lineTo(x, y); } ctx.lineTo(width, height); ctx.lineTo (0, height); ctx.fill(); ctx.closePath();})()
效果如下:
四、完善水波動畫1.首先可以對上面波形疊加一個頻率較高的波形,使波形無規矩
var s = 0.1*Math.sin(x/150)+1;var y = A*Math.sin(W*x+Q) +H;y=y*s;
2.再增加一個相位變化不同的波形,其漸變填充與上一個漸變方向相反使其形成相互重疊的陰影效果;並設定路徑重疊效果globalCompositeOperation;
var canvas = document.getElementById(canvas), ctx = canvas.getContext('2d'), width = canvas.width = canvas.offsetWidth, height = canvas.height = canvas.offsetHeight;var A=30, W=1 / 200, Q=0, H= height / 2;var A2=30, W2=1/300, Q2=0, H2= height / 2;var speed=-0.01;var speed2=-0.02;var lingrad = ctx.createLinearGradient(0,0,width,0);lingrad.addColorStop(0, 'rgba(0,186,128,0.8)');lingrad.addColorStop(1, 'rgba(111,224,195,1)'); var lingrad2 = ctx.createLinearGradient(0,0,width,0);lingrad2.addColorStop(0,'rgba(111,224,195,1)');d2. 'rgba(0,186,128,0.8)'); (function draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height); ctx.begin(); ctx.fillctle = ling. moveTo(0, height /2); //繪製第一個波形Q+=speed; for (let x = 0; x <= width; x++) { var s = 0.1*Math.sin(x/150)+1; var y = A*Math.sin (W*x+Q) +H; y=y*s; ctx.lineTo(x, y); } ctx.lineTo(width, height); ctx.lineTo(0, height); ctx.fill(); ctx.closePath() //設定重疊效果ctx.globalCompositeOperation = destination-over //繪製第二個波形ctx.beginPath(); ctx.fillStyle = lingrad2 ; Q2+=speed2; for (let x = 0; x < width; x++) { var y = A2*Math.sin(x*W2+Q2) +H2; ctx.lineTo(x, y); } ctx.lineTo(width,height); ctx.lineTo(0,height); ctx.fill() ctx. closePath();})()
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。