Question

我正在使用React创建一个正在绘制的复选标记的动画：类似于：http://jsfiddle.net/1faqu4yt/。我不太熟悉React动画的方式，我查看了他们网站的API，但找不到多少。 React的简单动画的任何示例都会有所帮助。或者使用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和移动设备中）。

最快的方法是在JS中使用<div>或在JS中使用SVG。

React中的绿色复选标记动画

1 个答案:

替代