渐变动画
渐变动画是改变透明度实现的动画效果,从透明到不透明的效果
constructor(props) {
super(props);
this.fadeInAnimated = new Animated.Value(0); // 渐隐动画初始值,默认为0,透明
}
<Animated.View style={[styles.downViewStyle, {opacity: this.fadeInAnimated}]}>
</Animated.View>
点击按钮,开始动画
Animated.timing(this.fadeInAnimated, {
toValue: 1, // 1为不透明
duration: 500,
easing: Easing.linear
}).start();
旋转动画
this.spinValue = new Animated.Value(0);
// 利用 interpolate 方法将数值 0~1 映射到了 0deg~360deg
const spin = this.spinValue.interpolate({
inputRange: [0, 1], // [0,0.5,1]改成这样会有不同的效果
outputRange: ['0deg', '360deg'] // ['0deg', '360deg','0deg']改成这样会有不同的效果,
});
<Animated.Image
style={{
width: 227,
height: 200,
transform: [{rotate: spin}] }}
source={{uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}}
/>
点击按钮开始动画
springAnimal(){
this.spinValue.setValue(0);
Animated.timing(
this.spinValue,
{
toValue: 1, // 此处的1 已经被上面的spin映射过了, [0, 1] 》 ['0deg', '360deg']
duration: 4000,
easing: Easing.linear
}
).start();
}
从左到右,再从右到左动画
其实就是改变marginLeft的值,
同理:也可以改变marginTop等的值来实现不同的效果
在同理:也可以实现opacity(透明度不断地透明-不透明-透明)、margins(组件的上下左右移动)、text sizes (字体的不断变化)和 rotation(3D效果) 等的效果
this.animatedValue = new Animated.Value(0);
const movingMargin = this.animatedValue.interpolate({
inputRange: [0, 0.3, 1], // 0-0.3 0.3-1
outputRange: [0, 300, 0] // 0-300 300-0 速度会不一样
});
<Animated.View
style={{
marginLeft: movingMargin,
marginTop: 10,
height: 30,
width: 40,
backgroundColor: 'orange'
}}
/>
点击调用动画
this.animatedValue.setValue(0);
Animated.timing(
this.animatedValue,
{
toValue: 1,
duration: 2000,
easing: Easing.linear
}
).start();
字体的变大变小
const textSize = this.animatedValue.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [18, 32, 18]
});
<Animated.Text
style={{
fontSize: textSize,
marginTop: 10,
color: 'green'}} >
Animated Text!
</Animated.Text>
调用
this.animatedValue.setValue(0);
Animated.timing(
this.animatedValue,
{
toValue: 1,
duration: 2000,
easing: Easing.linear
}
).start();
RN动画
最新推荐文章于 2021-05-26 22:34:24 发布