反应中的绿色标记动画

Question

我正在使用React创建一个正在绘制的复选标记的动画:类似于这个：http://jsfiddle.net/1faqu4yt/。我不太熟悉React是如何做动画的，我看过他们网站的API，但找不到多少。任何简单动画的反应将是有帮助的例子。还是使用CSS更好呢？

Answer 1

你可以按原样使用这段代码。

这两项变动：

• 将其包装在一个函数中
• 提供停止机制

function animate(canvas){
    var start = 100;
    var mid = 145;
    var end = 250;
    var width = 22;
    var leftX = start;
    var leftY = start;
    var rightX = mid - (width / 2.7);
    var rightY = mid + (width / 2.7);
    var animationSpeed = 20;
      var isStopped = false;

      var stop = function(){
        isStopped = true;
      };

    var ctx = canvas.getContext('2d');
    ctx.lineWidth = width;
    ctx.strokeStyle = 'rgba(0, 150, 0, 1)';

    for (i = start; i < mid; i++) {
        var drawLeft = window.setTimeout(function () {
            if (isStopped) return;
            ctx.beginPath();
            ctx.moveTo(start, start);
            ctx.lineTo(leftX, leftY);
            ctx.stroke();
            leftX++;
            leftY++;
        }, 1 + (i * animationSpeed) / 3);
    }

    for (i = mid; i < end; i++) {
        var drawRight = window.setTimeout(function () {
            if (isStopped) return;
            ctx.beginPath();
            ctx.moveTo(leftX, leftY);
            ctx.lineTo(rightX, rightY);
            ctx.stroke();
            rightX++;
            rightY--;
        }, 1 + (i * animationSpeed) / 3);
    }

组件是相当直接的。你在上面渲染一个画布。当动画挂载时或在某些事件上启动动画。如果它是卸载的，你就停止它。

class App extends React.Component {
  constructor(){
    super();
  }

  componentDidMount(){
    var canvas = React.findDOMNode(this.refs.canvas);
    this.stop = animate(canvas);
  }

  componentWillUnmount(){
    this.stop();
  }

  render(){
    return (
      <div>
        <canvas height="400" ref="canvas" />
      </div>
    );
  }
}

备选方案

您提到了CSS，因为它的简单性通常是首选的，但是在CSS中很难完成这个动画。您将动画两个白色的div，以掩盖部分的复选标记，但尚未可见。

另一个选项是SVG。React内置了对SVG的支持，因此您可以从呈现开始以声明方式完成所有操作，只需在状态下更新经过的时间。或者您可以呈现初始的SVG，并在componentDidMount中手动将其动画化。

对于动画，性能通常优先于代码清晰度。例如，运行数百个计时器非常慢。在画布上一遍又一遍地重新绘制同一条线是非常慢的，而画布非常慢(特别是在firefox和mobile中)。

最快的方法可能是在JS中动画<div>，或者在JS中使用SVG。