React.js:非CSS动画
React documentation没有任何关于处理非CSS过渡的动画的东西，比如滚动位置和SVG属性的动画。
至于CSS的转换，有an add-on。
这是a simple SVG example example
/**
* @jsx React.DOM
*/
function animate(duration, onStep) {
var start = Date.now();
var timer = {id: 0};
(function loop() {
timer.id = requestAnimationFrame(function() {
var diff = Date.now() - start;
var fraction = diff / duration;
onStep(fraction);
if (diff < duration) {
loop();
}
});
})();
return timer;
}
function lerp(low, high, fraction) {
return low + (high - low) * fraction;
}
var App = React.createClass({
getInitialState: function() {
return {x: 0}
},
move: function(i) {
this.setState({x: this.state.x + i * 100});
},
render: function() {
return <div className="ShowerItem">
<p>
<button onClick={this.move.bind(this, -1)}>Left</button>
<button onClick={this.move.bind(this, 1)}>Right</button>
</p>
<svg><Dot x={this.state.x}/></svg>
</div>;
}
});
var Dot = React.createClass({
getInitialState: function() {
return {
x: 0,
final: 0
};
},
timer: null,
render: function() {
var from = this.state.x;
var to = this.props.x;
if (to !== this.state.final) {
this.state.final = to;
if (this.timer) {
cancelAnimationFrame(this.timer.id);
}
this.timer = animate(500, function(fraction) {
var x = lerp(from, to, fraction);
if (fraction >= 1) {
this.setState({
value: to
});
this.timer = null;
} else {
this.setState({x: x});
}
}.bind(this))
}
return <circle r="10" cy="10" cx={this.state.x + 10}/>
}
});
React.renderComponent(
<App/>,
document.body
);有没有更有效的动画制作方法？
这是代码架构吗？
CSS Transitions add-on在这里帮不上忙，因为我不使用CSS。
回答 4
Stack Overflow用户
发布于 2014-08-16 04:13:42
我在我的react-hammer集成project中成功地使用了这个project，这里有一些锤子事件和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函数时，动画依赖于状态改变)，我做了一个HitArea组件来做到这一点。当它发生时，它从它的子类调用receiveHammerEvent函数，传递锤子事件。
Stack Overflow用户
发布于 2014-11-14 08:30:29
我自己也有同样的问题，直到最近我才发现Rekapi。这个库提供了基于状态的动画工具。查看教程https://github.com/jeremyckahn/rekapi/blob/master/docs/getting_started.md
诀窍是，上下文不必是画布或DOM元素，它可以是普通对象，即组件实例或mixin，因此这打开了一种可能性，要么在参与者的setState方法中执行一些逻辑，然后在组件(上下文)上呈现，要么简单地编写一个“一个技巧角色”，它总是在每一帧将其状态转发给组件。
Stack Overflow用户
发布于 2015-04-06 00:18:02
https://stackoverflow.com/questions/23906603
复制相似问题