我在我的 react-hammer 集成项目中成功地使用了这个项目，有一些关于锤子事件和react动画的例子。

这是动画“BlinkingThing”的代码：

var BlinkingThing = React.createClass({
    mixins: [React.Animate],
    blink: function () {
        var that = this;
        var animateAfter = function () {
            that.animate({
                color: 'green'
            }, that.props.blinkBack);
        };
        this.animate({
            color: 'yellow'
        }, this.props.blinkTo, animateAfter);
    },
    componentDidReceiveProps: function () {
        this.setState({color: this.props.color})
    },
    componentDidMount: function () {
        this.setState({color: this.props.color})
    },
    receiveHammerEvent: function (ev) {
        if (ev) {
            var value = ev.type;

            switch (value) {
                case 'tap':
                    this.blink();
                    break;
            }
        }
    },
    getInitialState: function () {
        return {};
    },
    render: function () {
        var style = {
            display: 'inline-block',
            backgroundColor: this.state.color
        };

        return (<div style={style}>{this.props.children}</div>);
    }
});

您需要一些父组件来传播副作用（例如触摸事件）以触发 BlinkingThing 组件中的状态更改（动画依赖于调用 this.animate func 时的状态更改），我制作了一个 HitArea 组件来做到这一点。当它发生时，它从传递锤子事件的子级调用receiveHammerEvent func。

我自己也遇到过同样的问题，直到最近我才发现了 Rekapi。该库提供基于状态的动画工具。查看教程https://github.com/jeremyckahn/rekapi/blob/master/docs/getting_started.md

诀窍是，上下文不必是画布或 DOM 元素，它可以是一个普通对象，即组件实例或 mixin，因此这开启了在您的演员的渲染方法中执行某些逻辑和然后在您的组件（上下文）上设置状态，或者简单地编写一个“一个特技演员”，它总是在每一帧将其状态转发给组件。

看起来react.animate是一个积极维护且经常使用的 React 动画库。

（上面已经提到过，但在所有链接中很容易错过）

注意：它带有/需要 underscore.js。

这是我到目前为止想到的：http : //jsfiddle.net/NV/NtP7n/。

我重写Dot以利用 React 的绘制循环：

var Dot = React.createClass({

    getInitialState: function() {
        return {
            start: 0,
            x: 0,
            final: 0,
            startTime: 0
        };
    },

    render: function() {
        var state = this.state;
        var props = this.props;
        var amount = 0;

        if (state.final !== props.x) {
            state.final = props.x;
            state.start = state.x;
            state.startTime = Date.now();
        } else {
            amount = (Date.now() - state.startTime) / this.props.duration;
        }

        if (amount <= 1) {
            var x = state.start + amount * (props.x - state.start);
            setTimeout(function() {
                this.setState({x: x});
            }.bind(this), 1);
        } else {
            state.final = state.x = x = props.x;
        }

        return <circle r="10" cy="10" cx={x + 10}/>
    }
});

我必须打电话：

setTimeout(function() {
    this.setState({current: x});
}.bind(this), 1);

只是为了在下一个刻度上强制更新。我必须使用 setTimeout 因为 setState 在render方法中是不允许的。我想知道是否可以在不使用 setTimeout 的情况下在下一个滴答声中排队更新。