reactnative学习笔记29——动画篇Animated⾼级动画
1.前⾔
上⼀节我们学习了全局的布局动画api——LayoutAnimation，体验到其流畅柔和的动画效果，但有时我们需要实现⼀些更精细化的动画，或者完成⼀些组合动画，这时我们可以使⽤React Native提供的另⼀个⾼级动画api——Animated。
Animated使得我们可以⾮常容易地实现各种各样的动画和交互⽅式，并且具备极⾼的性能。Animated旨在以声明的形式来定义动画的输⼊与输出，通常只需要关注设置动画的开始和结束即可，在其中建⽴⼀个可配置的变化函数，然后使⽤start/stop⽅法来控制动画按顺序执⾏。
下⾯通过⼀个简单的淡⼊动画逐步展开介绍Animated的具体使⽤，还是基于上⼀节的LayoutAnimation的使⽤实例修改。
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Platform,
Image,
Animated,
Easing,
} from 'react-native';
export default class AnimatedAnimationDemo extends Component {
constructor(props) {
super(props);
/
/ 初始状态
this.state = {
fadeInOpacity: new Animated.Value(0),
};
this._onPress = this._onPress.bind(this);
}
_onPress() {
Animated.timing(this.state.fadeInOpacity, {
toValue: 1,
duration: 2000,
easing: Easing.linear,// 线性的渐变函数
}).start();
}
render() {
return (
<View style={ainer}>
<Animated.View // 可选的基本组件类型:Image,Text,ScrollView,View(可以包裹任意⼦View)
style={[t, {opacity:this.state.fadeInOpacity,}]}>
<Text style={[{textAlign: 'center'}]}>Hello World!</Text>
</Animated.View>
<TouchableOpacity style={t}onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
const styles = ate({
container: {
marginTop:25,
flex: 1,
},
效果如下：
2.基本Animated 动画的步骤
上例是⼀个基本的Animated动画的实现，其步骤可以分为以下⼏步： 1.使⽤Animated.Value 设定⼀个或多个初始值，包括透明度、位置等。 2.使⽤基本的Animated封装的组件，如Animated.View 、Animated.Text 、Animated.Image 和Animated.ScrollView 。
3.将初始值绑定到动画⽬标属性上。
4.通过Animated.timeing 等⽅法设定动画参数。
5.调⽤start控制动画的启动。
2.1值类型Animated提供两种值类型
Animated.Value()⽤于单个值
Animated.ValueXY()⽤于⽮量值Animated.Value 可以绑定到样式或是其他属性上，也可以进⾏插值运算。单个Animated.Value 可以⽤在任意多个属性上。多数情况下，Animated.Value 可以满⾜需求（上⾯的⽰例），但有些情况下我们可能会需要AnimatedValueXY 。例如：需要某⼀组件沿着X轴和Y轴交叉⽅向，向右下移动⼀段距离。
上例中通过
content: {
backgroundColor: 'rgba(200, 230, 255, 0.8)',
marginBottom:10,
justifyContent:"center",
alignSelf:"center",
},
button: Platform.select({
ios: {},
android: {
elevation: 4,
// Material design blue from le/style/color.html#color-color-palette
backgroundColor: '#2196F3',
borderRadius: 2,
width:100,
height:30,
},
justifyContent:"center",
alignSelf:"center",
}),
buttonText: {
alignSelf:"center",
}
});
constructor(props) {
super(props);
this.state = {
fadeOutOpacity: new Animated.Value(0),
reactnative原生列表};
...
}
设置了组件透明度的初始值。
2.2⽀持的组件类型
⽀持Animated的组件类型：Animated.View、Animated.Text、Animated.Image和Animated.ScrollView。
你也可以使⽤ateAnimatedComponent()来封装你⾃⼰的组件。不过该⽅法较少使⽤， 通常可以通过View包裹其他任意组件达到同样的效果。
上例中是对Animated.View组件进⾏动画设置。
2.3将初始值绑定到动画⽬标属性上
将动画绑定在<Animate.View /> 上，把实例化的动画初始值传⼊ style 中：
<Animated.View style={[t, {opacity: this.state.fadeInOpacity,}]}>
...
</Animated.View>
2.4配置动画并启动
通过Animated.timeing等⽅法设定动画参数，调⽤start控制动画的启动。
Animated.timing(this.state.fadeInOpacity, {
toValue: 1,
duration: 2000,
easing: Easing.linear,// 线性的渐变函数
}).start();
以上便是⼀个简单Animated动画的实现。
2.5动画类型
上例中使⽤了Animated.timing⽅法基于时间配置实现渐变动画，Animated共提供以下三种动画类型：
spring：基础的弹跳物理模型动画
timing：带有时间的渐变动画
decay：以⼀个初始速度开始并且逐渐减慢停⽌的动画
这三个动画配置api是Animated的核⼼api, 具体定义如下：
static decay(value, config)
static timing(value, config)
static spring(value, config)
创建动画的参数：
@value：AnimatedValue | AnimatedValueXY（X轴或Y轴 | X轴和Y轴）
@config：SpringAnimationConfig | TimingAnimationConfig | DecayAnimationConfig（动画的参数配置）
分别列出各config的特性参数：
TimingAnimationConfig动画配置选项定义如下：
type TimingAnimationConfig = AnimationConfig & {
toValue: number | AnimatedValue | {x: number, y: number} | AnimatedValueXY,
easing?: (value: number) => number,  //缓动函数，默认 Easing.inOut(Easing.ease).
duration?: number,  //动画时长，单位毫秒，默认500
delay?: number,  //动画执⾏延迟时间，单位：毫秒，默认为0
};
DecayAnimationConfig动画配置选项定义如下：
type DecayAnimationConfig = AnimationConfig & {
velocity: number | {x: number, y: number},  //初始速度，必须要填写
deceleration?: number,  //速度减⼩的⽐例，加速度。默认为0.997
};
SpringAnimationConfig动画配置选项定义如下：
type SpringAnimationConfig = AnimationConfig & {
toValue: number | AnimatedValue | {x: number, y: number} | AnimatedValueXY,
overshootClamping?: bool,
restDisplacementThreshold?: number,
restSpeedThreshold?: number,
velocity?: number | {x: number, y: number},  //初始速度，默认0
bounciness?: number,      //反弹系数，默认8
speed?: number,          //速度，默认12
tension?: number,        //张⼒系数，默认7
friction?: number,        //摩擦系数，默认40
};
注：只能定义其中⼀组:bounciness/speed或tension/friction。
下⾯通过逐步扩展丰富上⾯的例⼦，介绍Animated的更多特性。
先回到前⾯值类型AnimatedValueXY，我们如何实现向右下移动⼀段距离的动画。请看下例：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Platform,
Image,
Animated,
Easing,
} from 'react-native';
export default class AnimatedAnimationDemo2extends Component {
constructor(props) {
super(props);
this.state = {
translateValue: new Animated.ValueXY({x:0, y:0}), // ⼆维坐标
};
this._onPress = this._onPress.bind(this);
}
_onPress() {
anslateValue.setValue({x:0, y:0});
Animated.decay( // 以⼀个初始速度开始并且逐渐减慢停⽌。  S=vt-（at^2）/2  v=v - at anslateValue,
{
velocity: 7, // 起始速度，必填参数。
velocity: 7, // 起始速度，必填参数。
deceleration: 0.1, // 速度衰减⽐例，默认为0.997。
}
).start();
}
render() {
return (
<View style={ainer}>
<Animated.View style={[t, {transform: [
{translateX: anslateValue.x}, // x轴移动
{translateY: anslateValue.y}, // y轴移动
]}]}>
<Text style={[{textAlign: 'center'}]}>Hello World!</Text>
</Animated.View>
<TouchableOpacity style={t} onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
const styles = ate({
container: {
marginTop:25,
flex: 1,
},
content: {
backgroundColor: 'rgba(200, 230, 255, 0.8)',
marginBottom:10,
justifyContent:"center",
alignSelf:"center",
},
button: Platform.select({
ios: {},
android: {
elevation: 4,
// Material design blue from le/style/color.html#color-color-palette
backgroundColor: '#2196F3',
borderRadius: 2,
width:100,
height:30,
},
justifyContent:"center",
alignSelf:"center",
}),
buttonText: {
alignSelf:"center",
}
});
通过new Animated.ValueXY({x:0, y:0})设置了在xy轴上的初始坐标。
其中，组件Animated.View的属性transform是⼀个变换数组，常⽤的有scale, scaleX, scaleY, translateX, translateY, rotate, rotateX, rotateY, rotateZ，其使⽤⽅式可以如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。