在Android 5.1上的物理设备上运行RN v0.40.0。我正在尝试为文本设置动画以淡入显示并按以下方式向上滑动:
export default class Example extends PureComponent {
constructor(props) {
super(props);
this.translate = new Animated.Value(-15);
this.fade = new Animated.Value(0);
}
componentWillReceiveProps() {
setTimeout(() => {
Animated.timing(this.translate, {
toValue: 0,
duration: 800,
easing: Easing.inOut(Easing.ease),
}).start();
Animated.timing(this.fade, {
toValue: 1,
duration: 800,
easing: Easing.inOut(Easing.ease),
}
).start();
}, 150);
}
render() {
return (
<View>
<Animated.View
style={{
transform: [
{translateY: this.translate},
],
opacity: this.fade
}}
>
<Text>
{this.props.text}
</Text>
</Animated.View>
</View>
);
}
在我从开发菜单重新加载JS软件包并转到该 View 后,应用程序崩溃了,没有错误日志,有时显示
Application ... stopped working
,有时没有。如果我再次从android菜单中启动该应用程序,则它将加载正常,仅在第一次崩溃。绝对与动画有关,因为在介绍动画之前我没有崩溃。没有日志,没有线索,请给我一些建议,可能是什么,应该尝试什么,应该检查什么。谢谢。顺便说一句,在带有动画的 View 上,我有一个非常重的背景图像(〜400k),这可能是个问题吗?
UPD :我已将其范围缩小到当我尝试使用
setTimeout
或Animation.parallel
并行运行动画时崩溃。可能是什么问题呢? 最佳答案
不知道是什么原因导致了崩溃,但是使用Animated.parallel对我有用:
Animated.parallel([
Animated.spring(
this.state.pan, {
...SPRING_CONFIG,
overshootClamping: true,
easing: Easing.linear,
toValue: {x: direction, y: -200}
}),
Animated.timing(
this.state.fadeAnim, {
toValue: 1,
easing: Easing.linear,
duration: 750,
}),
]).start();
其中SPRING_CONFIG类似于
var SPRING_CONFIG = {bounciness: 0, speed: .5};//{tension: 2, friction: 3, velocity: 3};
在构造函数this.state中将pan和fadeAnim值设置为:
pan: new Animated.ValueXY(),
fadeAnim: new Animated.Value(0),
动画 View 为
<Animated.View style={this.getStyle()}>
<Text style={[styles.text, {color: this.state.textColor}]}>{this.state.theText}</Text>
</Animated.View>
而getStyle函数是
getStyle() {
return [
game_styles.word_container,
{opacity: this.state.fadeAnim},
{transform: this.state.pan.getTranslateTransform()}
];
}
This tutorial帮助我进行了设置...祝您好运!