在iOS上的微信发语音时,会先出现一个渐变颜色循环的动画效果。图为效果,代码向下看:
移步代码区:
主要的动画使用Animated.timing,将透明度1->0.3->1不停的播放
startAnimation() {
this.state.fadeOutOpacity.setValue(1);
this._animated = Animated.sequence([ // 组合动画 parallel(同时执行)、sequence(顺序执行)、stagger(错峰,其实就是插入了delay的parrllel)和delay(延迟)
Animated.timing(
this.state.fadeOutOpacity,
{
toValue: 0.3,
duration: 2000,
easing: Easing.linear, // 线性的渐变函数
}
),
Animated.timing(
this.state.fadeOutOpacity,
{
toValue: 1,
duration: 2000,
easing: Easing.linear, // 线性的渐变函数
}
),
]); // 循环执行动画
// .start(() => this.startAnimation())
this._animated.start(() => this.startAnimation());
this.state.fadeOutOpacity.addListener((state) => {
console.log("fadeOutOpacity=>" + state.value);
});
}
在render()方法中可以这样使用
<Animated.View // 可选的基本组件类型: Image, Text, View(可以包裹任意子View)
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
opacity: this.state.fadeOutOpacity, // 透明度
width: 100,
height: 40,
}}>
<View style={{backgroundColor: 'white', width: 100, height: 40, borderRadius: 5,
borderWidth: 0.5,
borderColor: "#7FB25A",}}/>
</Animated.View>
启动动画的地方可以
componentDidMount() {
this.startAnimation();
}
结束动画
this._animated.stop((value) => {
console.log("yeputi_wk", "动画停止" + value)
},
)