将值增加到一个点，然后开始减小到一个点

increase value to a point, then start decreasing to a point

本文关键字：一个 开始 然后 增加      更新时间：2023-09-26

我正在javascript画布中制作一个简单的动画，为了完成请求的结果，我需要有一个这样的对象：

circle: {
    x: scene_point.x,
    y: scene_point.y,
    vel_x: randomFloat(0.100, 0.500),
    vel_y: randomFloat(0.100, 0.500),
    r: 0,
    r_max: 10,
    trend: 'up'
}

现在循环动画应该是这样的：

    增加
  1. 半径值直到达到最大值，增加不透明度直到圆变得完全可见
  2. 当 Circle 具有最大半径和完全不透明度时，我们开始减小这两个值
  3. 当圆半径和不透明度再次降至 0 时，我们重置圆并重新开始。

这是我在上面编写的代码：

if(circle.trend === 'up' && circle.r < circle.maxR) { // growing, to reach max
    circle.r = parseFloat(circle.r) + parseFloat(circle.decayR);
}
if(circle.trend === 'up' && circle.r >= circle.maxR) { // reached max, starting to decay
    circle.trend = 'down';
}
if(circle.trend === 'down' && circle.r >= 1) { // decaying, to reach min
    circle.r = parseFloat(circle.r) - parseFloat(circle.decayR);
}
if(circle.trend === 'down' && circle.r < 1) { // reached min, reseting
    reset(i);
}

最后绘制对象以获得适当的不透明度：

ctx.fillStyle = 'rgba(210, 210, 210, ' + circle.r / circle.maxR + ')';

问题是，是否有可能在没有"趋势"逻辑的情况下完成上述任务，它只是看起来/感觉不对。我必须使用 4 if 条件和额外的"趋势"参数来上升和下降。也许有更友好的方法可以做到这一点。我只是对画布和动画的新手，我还不知道所有的技巧;)

你可以

这样做：

circle.r += circle.decayR;
if(circle.decayR > 0 && circle.r >= circle.maxR)
  circle.decayR *= -1;
if(circle.decayR < 0 && circle.r < 1)
  reset(i);

基本上，只需翻转decayR的标志即可。

工作示例：

var circle, canvas, ctx;
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
function reset() {
  circle = {
    decayR: 1,
    r: 0,
    maxR: 20,
    x: 50 + Math.random() * 50,
    y: 50 + Math.random() * 50
  };
}
function update() {
  circle.r += circle.decayR;
  if (circle.decayR > 0 && circle.r >= circle.maxR)
    circle.decayR *= -1;
  if (circle.decayR < 0 && circle.r < 1)
    reset();
  // clear
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // draw
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
  ctx.closePath();
  ctx.fill();
  requestAnimationFrame(update);
}
reset();
requestAnimationFrame(update);
#canvas {
  width: 200px;
  height: 200px;
  border: solid 1px black;
}
<canvas id="canvas" width="200" height="200"></canvas>

我认为它可以像这样缩短：

if(circle.trend === 'up'){
  (circle.r >= circle.maxR) ?
    circle.trend = 'down' :
    circle.r += circle.decayR; 
}else{
  (circle.r >= 1) ?
    circle.r -= circle.decayR :
    reset(i);
}
相关文章：