当前位置：首页 > news >正文

ubuntu 做网站分区杭州营销策划公司排名

news 2025/8/13 11:57:27

ubuntu 做网站分区,杭州营销策划公司排名,中英双语网站模板,网站表单本来写这个特效我打算用css实现的，结果是一波三折，我太难了，最终没能用css实现，转战了canvas来实现。来吧先看效果图当然这个图的波浪高度、频率、位置、速度都是可调的，请根据自己的需求调整，如果你讲波…

本来写这个特效我打算用css实现的，结果是一波三折，我太难了，最终没能用css实现，转战了canvas来实现。来吧先看效果图
在这里插入图片描述
当然这个图的波浪高度、频率、位置、速度都是可调的，请根据自己的需求调整，如果你讲波浪什么的调大一下还有有摆动的效果哦。

以下是完整代码

import React, { useEffect, useRef } from 'react';
import classNames from 'classnames';
const WaveAnimation = () => {const canvasRef = useRef<HTMLCanvasElement | null>(null);useEffect(() => {const canvas = canvasRef.current;if (canvas) {const ctx = canvas.getContext('2d');console.log('ctx', ctx);if (ctx) {const amplitude = 60;const frequency = 0.006;let phase = 0;const centerY = canvas.height / 2;const startX = -10;const speed = 0.2;const lineColor = 'rgba(255, 255, 255, 0.1)';const animate = () => {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.beginPath();ctx.moveTo(startX, centerY);for (let x = startX; x < canvas.width; x++) {const y = centerY + amplitude * Math.sin(frequency * x + phase);ctx.lineTo(x, y);}ctx.strokeStyle = lineColor;ctx.lineWidth = 10;ctx.stroke();phase -= speed;requestAnimationFrame(animate);};animate();}}}, []);return (<div className="wave-animation"><canvas ref={canvasRef} width="3000" height="300"></canvas></div>);
};export default WaveAnimation;