React-native引入了新的动画API,我希望制作一个循环动画,例如气泡缩放,然后按比例缩小并重复该进度.
但是我无法弄明白.我试过写下面的代码
class TestProject extends React.Component {
constructor(): void {
super();
this.state = {
bounceValue: new Animated.Value(0),v: 1,};
}
componentDidMount() {
this.state.bounceValue.setValue(1.5);
let animation = Animated.timing(this.state.bounceValue,{
toValue: this.state.v,});
setInterval(() => {
animation.stop();
if (this.state.flag) {
this.state.v = 0.5;
this.state.bounceValue.setValue(0.5);
}
else {
this.state.v = 1.5;
this.state.bounceValue.setValue(1.5);
}
animation.start();
},5000);
}
render(): ReactElement {
return (
<View style={styles.imageContainer}>
<Image
style={styles.image}
source={{uri: 'http://image142-c.poco.cn/best_pocoers/20130517/91062013051716553599334223.jpg'}}
/>
<Animated.Text
style={[
styles.test,{transform: [
{scale: this.state.bounceValue},],}
]
}>
haha
</Animated.Text>
</View>
);
}
}
但效果不是很好.
任何建议将不胜感激.
我使用序列方法传递一组动画来循环然后重复该函数.
原文链接：https://www.f2er.com/react/301343.html//this.state.animatedStartValue = 0;
function cycleAnimation() {
Animated.sequence([
Animated.timing(this.state.animatedStartValue,{
toValue: 1,duration: 500,delay: 1000
}),Animated.timing(this.state.animatedStartValue,{
toValue: 0,duration: 500
})
]).start(() => {
cycleAnimation();
});
}
如果我自己切换该动画它会淡入/淡出,但是我将它分层放在基座上以模仿活动状态或热点样式按钮
<TouchableOpacity>
<Animated.Image
source={activeImageSource}
style={this.state.animatedStartValue}}
/>
<Image source={nonActiveImageSource}
/>
</TouchableOpacity>
