Javascript React.js：非CSS动画

没有任何关于处理非CSS转换的动画的内容，例如滚动位置和SVG属性的动画

至于CSS转换，有两种方法

这是：

/**
*@jsx React.DOM
*/
函数设置动画（持续时间，步长）{
var start=Date.now（）；
变量计时器={id:0}；
（函数循环（）{
timer.id=requestAnimationFrame（函数（）{
var diff=Date.now（）-start；
var分数=差异/持续时间；
步骤（分数）；
如果（差异<持续时间）{
loop（）；
}
});
})();
返回计时器；
}
函数lerp（低、高、分数）{
返回低+（高-低）*分数；
}
var App=React.createClass({
getInitialState:函数（）{
返回{x:0}
},
动议：功能（i）{
this.setState（{x:this.state.x+i*100}）；
},
render:function（）{
返回

左边
赖特

;
}
});
var Dot=React.createClass({
getInitialState:函数（）{
返回{
x:0,，
决赛：0
};
},
计时器：空，
render:function（）{
var from=此.state.x；
var to=this.props.x；
if（to！==this.state.final）{
this.state.final=to；
如果（这个计时器）{
cancelAnimationFrame（this.timer.id）；
}
this.timer=动画（500，函数（分数）{
var x=lerp（从，到，分数）；
如果（分数>=1）{
这是我的国家({
价值：至
});
this.timer=null；
}否则{
this.setState（{x:x}）；
}
}.绑定（本）
}
返回
}
});
React.renderComponent(
因为我不使用CSS，所以这里没有帮助。
这是我到目前为止提出的方法：

我重写了
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，因为在
render
方法中不允许使用setState。我想知道我是否可以在下一个刻度上排队更新而不使用setTimeout。
我在我的react-hammer集成中成功地使用了它。有一些hammer事件和react动画的示例

这里是动画“闪烁”的代码：

var BlinkingThing=React.createClass({
混合：[反应.动画]，
闪烁：函数（）{
var=这个；
var animateAfter=函数（）{
那就是动画({
颜色：“绿色”
}，即.props.blinkBack）；
};
这是动画({
颜色：“黄色”
}，this.props.blinkTo，animateAfter）；
},
componentDidReceiveProps:函数（）{
this.setState（{color:this.props.color}）
},
componentDidMount:函数（）{
this.setState（{color:this.props.color}）
},
receiveHammerEvent:功能（ev）{
if（ev）{
var值=ev.type；
开关（值）{
案例“tap”：
这个；
打破
}
}
},
getInitialState:函数（）{
返回{}；
},
渲染：函数（）{
变量样式={
显示：“内联块”，
背景颜色：this.state.color
};
返回（{this.props.children}）；
}
});

您需要一些父组件来传播副作用（例如，触摸事件），以触发闪烁组件中的状态更改（当您调用this.animate func时，动画依赖于状态更改），我制作了一个HitArea组件来实现这一点。它在发生hammer事件时从其子代调用receiveHammerEvent func。
我自己也有同样的问题，直到最近我发现了Rekapi。
此库提供基于状态的动画工具。请查看教程

诀窍是，上下文不必是画布或DOM元素，它可以是普通对象，即组件实例或mixin，因此这就提供了在参与者的呈现方法中执行某些逻辑，然后在组件（上下文）上设置状态，或者只编写“一个技巧参与者”的可能性它总是在每一帧将其状态转发给组件。
它似乎是一个积极维护和经常使用的React动画库

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

注意：它附带/requires underline.js。
这个问题与jQuery无关，CSS对提供的SVG示例没有任何作用。它在您的计算机上的Chrome Timeline选项卡中看起来如何？对于我来说，一个典型的框架是：
0.503 ms脚本，0.070 ms渲染，0.821 ms绘画，0.782 其他女士，14.007 ms Idle
动画很流畅。对我来说，动画也很流畅。你可能也对它感兴趣（这是皮特·亨特29:30在电影中展示的）这可以通过JavaScript实现动画。演示代码在，但所有的好东西都在。另一个你可能想看的是。你可以查看它提供了一个简单的动画界面，带有一个
帧
回调，可以用来设置状态。自述文件中有一个简单的React示例。你可能可以连接到componentDidUpdate将下一个状态更改排入队列。我这样做无意中触发了en infinite css转换循环：）
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);

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>);
    }
});