![](/img/trans.png)
[英]Can I make in react.js custom animations, using only JavaScript and CSS?
[英]React.js: Non-CSS animations
React文档没有关于处理非CSS转换的动画的任何内容,例如滚动位置和SVG属性的动画。
至于CSS过渡,有一个附加组件 。
这是一个简单的SVG示例示例 :
/**
* @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附加组件在这里没有帮助,因为我不使用CSS。
我在反应锤集成项目中成功使用了这个项目 ,有一些锤子事件和反应动画的例子。
这里是动画“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函数传递锤子事件。
我自己一直有同样的问题,直到最近我才发现了Rekapi。 该库提供基于状态的动画工具。 查看教程https://github.com/jeremyckahn/rekapi/blob/master/docs/getting_started.md
诀窍是,上下文不必是canvas或DOM元素,它可以是普通对象,即组件实例或mixin,因此这可以在actor的render方法中执行某些逻辑,然后在你的组件(上下文)上设置setState,或者简单地写一个“一个技巧演员”,它总是将每个帧的状态转发给组件。
这就是我到目前为止所提出的: 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,因为在render
方法中不允许使用setState。 我想知道是否可以在不使用setTimeout的情况下在下一个刻度上排队更新。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.