主页 / 问题 / 1307201
Accepted
Leonid
Asked:2022-07-21 03:34:16 +0000 UTC2022-07-21 03:34:16 +0000 UTC

如何优化或修复波浪动画？

  • 772

我正在做一个原始的波浪动画。但是遇到了问题。第一条贝塞尔曲线与后面的不一致，因此，我不得不将这部分隐藏在画布后面。

您如何简化动画，因为现在每次都会创建新路径？

我怀疑可以绘制一个元素，一个半波，例如，它可以使用模式重复。但是波浪的高度、宽度以及未来的坡度可以改变。这就是为什么我不想让这个瓷砖“在石头上”。您如何使这个重复元素可停靠并同时以编程方式更改？可以用 SVG 和 CSS 动画解决吗？

开头隐藏波浪的示例：

const SPEED = 0.05;
const WAVE_WIDTH = 100;
const WAVE_HEIGHT = 50;
const CANVAS_WIDTH = 600;
const CANVAS_HEIGHT = 200;

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

let w = canvas.width = CANVAS_WIDTH;
let h = canvas.height = CANVAS_HEIGHT;

ctx.fillStyle = 'blue';

let wave_fase = 0;

draw();

function draw(){
    ctx.clearRect(0,0,w,h);
    
    let waves_path_string = `M ${WAVE_WIDTH*(wave_fase - 3)} ${h}
                            V ${h/2 - WAVE_HEIGHT/2}
                            q ${WAVE_WIDTH/2} ${-WAVE_HEIGHT/2} ${WAVE_WIDTH} ${WAVE_HEIGHT/2} `;
    
    waves_path_string += 't' + ` ${WAVE_WIDTH} 0`.repeat(w/WAVE_WIDTH + 3) + ` V ${h} z`;
    
    ctx.fill(new Path2D(waves_path_string));
    
    wave_fase = (wave_fase + SPEED)%2;
    
    requestAnimationFrame(draw);
}
<canvas></canvas>

在这里你可以看到第一波，它不想融入一般行。

const SPEED = 0.01;
const WAVE_WIDTH = 60;
const WAVE_HEIGHT = 40;
const CANVAS_WIDTH = 600;
const CANVAS_HEIGHT = 200;

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

let w = canvas.width = CANVAS_WIDTH;
let h = canvas.height = CANVAS_HEIGHT;

ctx.fillStyle = 'blue';

let wave_fase = 0;

draw();

function draw(){
    ctx.clearRect(0,0,w,h);
    
    let waves_path_string = `M ${WAVE_WIDTH*wave_fase} ${h}
                              V ${h/2 - WAVE_HEIGHT/2}
                              q ${WAVE_WIDTH/2} ${-WAVE_HEIGHT/2} ${WAVE_WIDTH} ${WAVE_HEIGHT/2} `;
    
    waves_path_string += 't' + ` ${WAVE_WIDTH} 0`.repeat(w/WAVE_WIDTH) + ` V ${h} z`;
    
    ctx.fill(new Path2D(waves_path_string));
    
    wave_fase = (wave_fase + SPEED)%2;
    
    requestAnimationFrame(draw);
}
<canvas></canvas>

这是相同的 SVG 代码，属性操作d位于<path>：

const SPEED = 0.05;
const WAVE_WIDTH = 100;
const WAVE_HEIGHT = 50;
const CANVAS_WIDTH = 600;
const CANVAS_HEIGHT = 200;

let svg = document.querySelector('svg');

svg.setAttribute('width',CANVAS_WIDTH);
svg.setAttribute('height',CANVAS_WIDTH);

let wave_fase = 0;

draw();

function draw(){
    
    let waves_path_string = `M ${WAVE_WIDTH*(wave_fase - 3)} ${CANVAS_HEIGHT}
                            V ${CANVAS_HEIGHT/2 - WAVE_HEIGHT/2}
                            q ${WAVE_WIDTH/2} ${-WAVE_HEIGHT/2} ${WAVE_WIDTH} ${WAVE_HEIGHT/2} `;
    
    waves_path_string += 't' + ` ${WAVE_WIDTH} 0`.repeat(CANVAS_WIDTH/WAVE_WIDTH + 3) + ` V ${CANVAS_HEIGHT} z`;
    
    svg.querySelector('path').setAttribute('d', waves_path_string);
    
    wave_fase = (wave_fase + SPEED)%2;
    
    requestAnimationFrame(draw);
}
<svg>
    <path d="" fill="blue"/>
</svg>

javascript

4 个回答

  1. 试试这个方法，看起来更像波浪。

    const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const draw = (delta) => {
  requestAnimationFrame(draw);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "rgba(0, 0, 255, 0.4)";

  const randomLeft = Math.abs(Math.pow(Math.sin(delta / 1000), 2)) * 100;
  const randomRight = Math.abs(Math.pow(Math.sin((delta / 1000) + 10), 2)) * 100;
  const randomLeftConstraint = Math.abs(Math.pow(Math.sin((delta / 1000) + 2), 2)) * 100;
  const randomRightConstraint = Math.abs(Math.pow(Math.sin((delta / 1000) + 1), 2)) * 100;

  ctx.beginPath();
  ctx.moveTo(0, randomLeft);

  ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight);
  ctx.lineTo(canvas.width, canvas.height);
  ctx.lineTo(0, canvas.height);
  ctx.lineTo(0, randomLeft);

  ctx.closePath();
  ctx.fill();
}
requestAnimationFrame(draw);
    html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}
    <canvas id="canvas"></canvas>

    • 5

  2. 我怀疑可以绘制一个元素，一个半波，例如，它可以使用模式重复。

    第一条贝塞尔曲线与后面的不一致，因此，我不得不将这部分隐藏在画布后面。

    1. 使用贝塞尔曲线创建单个波浪

    <svg class="editorial"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 24 150 28"
   preserveAspectRatio="none">
<path 
    id="gentle-wave" fill="#4579e2"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" /> 
</svg>

    1. 用不同的填充颜色克隆这个波浪三次

    <svg class="editorial"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 24 150 28"
   preserveAspectRatio="none">
 <defs>
  <path 
    id="gentle-wave"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" />
 </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>

    1. 添加 CSS Wave 动画
    @keyframes move-forever {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

    下面是完整的代码：

    .parallax > use {
  animation: move-forever 12s linear infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
}
.parallax > use:nth-child(2) {
  animation-delay: -2s;
  animation-duration: 5s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 3s;
}

@keyframes move-forever {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
.editorial {
  display: block;
  width: 100%;
  height: 17em;
  margin: 0;
}

body {
  background-color: #323232;
  margin: 0;
  padding: 9em 0 0 0;
}

.content {
  font-family: 'Lato',sans-serif;
  text-align: center;
  background-color: #2d55aa;
  text-align: center;
  min-height: 75vh;
  margin: -.1em 0 0 0;
  padding: 1em;
  color: #eee;
  font-size: 2em;
  font-weight: 300;
}
    <svg class="editorial"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 24 150 28"
   preserveAspectRatio="none">
 <defs>
  <path 
    id="gentle-wave"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" />
 </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>

    基于 @Andy Fitzsimon 在codepen上的主题并重新设计

    更新

    根据评论中讨论的结果，我意识到问题的作者需要某种通用解决方案，无需计算任何内容，只需更改输入数据即可获得结果。这是 Q的好答案中的@Stranger 

    for (var i = 0; i < 5; i++)
  wave(20 + i * 3, 70 - i * 10, 2 + 1 * Math.random(), 0.4 + i * 0.05, 40 + i * 25)

function wave(amp, freq, time, scaleY, translateY) {
  let pts = [];
  for (var x = 0; x < 2000; x += 10)
    pts.push([x, (Math.sin(x / freq) * amp + translateY).toFixed(1)])
  svg.innerHTML += `<path class="wave" d="M${pts.join('L')}v1000h-2000"
        style="--t:${time}s;--sy:${scaleY};--tx:-${freq*2*Math.PI}px" />`;
}
    .wave {
  fill: steelblue;
  stroke: white;
  opacity: 0.5;
  stroke-width: 2px;
  animation: wave var(--t) linear infinite;
}

@keyframes wave {
    0% {transform: scale(1, var(--sy)) translate(0px, 0px)}
   50% {transform:                     translate(calc(var(--tx)*0.5), 0px)}
  100% {transform: scale(1, var(--sy)) translate(var(--tx), 0px)}
}
    <svg id=svg viewBox="0 0 1000 175" preserveAspectRatio="none"></svg>

    我希望这有助于解决问题。

    • 5
  3. Best Answer

    我喜欢作者的方法。为什么第一条曲线与后面的曲线不吻合？因为它q设置了相对坐标，并且第一个点在波的顶部。随后的“半周期”相对于中线完成。那些。事实证明，第一个山脊的初始点和控制点被拉高了。

    当相邻的控制点是彼此的镜像时，贝塞尔曲线非常适合，@Leonid 的解决方案通过 实现了t这一点，这就是该方法的美妙之处。

    一个小的调整解决了第一个梳子的问题：

    const SPEED = 0.01;
const WAVE_WIDTH = 60;
const WAVE_HEIGHT = 80;
const CANVAS_WIDTH = 600;
const CANVAS_HEIGHT = 200;

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

let w = canvas.width = CANVAS_WIDTH;
let h = canvas.height = CANVAS_HEIGHT;

ctx.fillStyle = 'blue';

let wave_fase = 1;

draw();

function draw(){
    ctx.clearRect(0,0,w,h);
    
    let waves_path_string = `M ${WAVE_WIDTH*wave_fase} ${h}
                             V ${h/2}
                             q ${WAVE_WIDTH/2} ${WAVE_HEIGHT} ${WAVE_WIDTH} 0 `;


    waves_path_string += 't' + ` ${WAVE_WIDTH} 0`.repeat(w/WAVE_WIDTH) + ` V ${h} z`;
    
    ctx.fill(new Path2D(waves_path_string));
    
    wave_fase = (wave_fase + SPEED) % 2;
    
    requestAnimationFrame(draw);
}
    <canvas id="canvas"></canvas>

    为了不在 draw() 函数中每次都创建路径，可以构建一次路径并使用“循环” translate()，但我没有尝试过。

    • 2

  4. 我在 CSS 上为你弥补了“茶杯中的风暴”：

    body {
    background: #172b3c;
    margin: 0;
}
.sea {
    width: 100vh;
    height: 100vh;
    position: relative;
    background: #fff;
    overflow: hidden;
    margin: auto;
}
.wave {
    position: absolute;
    width: 200%;
    height: 200%;
    left: -40%;
    top: 56%;
    background-color: #57d0ff;
    border-radius: 40%;
    animation: wave 7s linear infinite;
}
@keyframes wave {
    100% {
        transform: rotate(360deg);
    }
}
    <div class="sea">
    <div class="wave"></div>
</div>

    • 1

相关问题