19.React Native动画Animated效果三种动画类型二；
目录
5.Animated.View组件style支持的transform属性说明
1.介绍
Animated提供了三种动画类型。每种动画类型都提供了特定的函数曲线，用于控制动画值从初始值变化到最终值的变化过程：
Animated.decay()以指定的初始速度开始变化，然后变化速度越来越慢直至停下。
Animated.spring()提供了一个简单的弹簧物理模型.
Animated.timing()使用easing 函数让数值随时间动起来。
大多数情况下你应该使用timing()。默认情况下，它使用对称的 easeInOut 曲线，将对象逐渐加速到全速，然后通过逐渐减速停止结束。
2.Animated.decay()
推动一个值以一个初始的速度和一个衰减系数逐渐变为 0。
2.1方法
static decay(value, config)2.1.1value参数值
value:new Animated.Value(0)可以是单个值初始值；
value:new Animated.ValueXY({x:0, y:0})二位向量x和y坐标
2.1.2config参数有以下这些属性：
如果下面的方法参数是二维向量值 ValueXY 而不是单一标量值 Value，则对应的配置参数 config 也应该是二维向量形式{x: ..., y: ...}。
velocity: 初始速度。必填。
deceleration: 衰减系数。默认值 0.997。
isInteraction: 指定本动画是否在InteractionManager的队列中注册以影响其任务调度。默认值为 true。
useNativeDriver: 启用原生动画驱动。默认不启用(false)。
2.2示例-执行缩放
2.2.1初始化缩放值
state = {
bounceValue:new Animated.Value(0)
// translateValue:new Animated.ValueXY({x:0,y:0})
};2.2.2绑定缩放值
{scale:this.state.bounceValue}
render(){
// let {fadeAnim} = this.state;
//使用专门的可动画化的View组件
return (<Animated.View
style={{
...this.props.style,
// opacity:fadeAnim
transform:[
{scale:this.state.bounceValue}
// {translateX:this.state.translateValue.x},
// {translateY:this.state.translateValue.y}
]
}}>
{this.props.children}
</Animated.View>);
}2.2.3定义执行动画类型并调用start()启动
executionAnimated(){
Animated.decay( // 随时间变化而执行动画
this.state.bounceValue,
// this.state.translateValue,
{
velocity:0.2, //初始速度。必填。
deceleration:0.05//默认值，0.997,
}
).start();
}2.2.4完整示例
import React from 'react';
import {Animated, Text, View,
TouchableOpacity} from 'react-native';
class FadeView extends React.Component{
state = {
bounceValue:new Animated.Value(0) //初始值
// translateValue:new Animated.ValueXY({x:0,y:0})
};
componentDidMount() {
}
executionAnimated(){
Animated.decay( //推动一个值以一个初始的速度和一个衰减系数逐渐变为 0。
this.state.bounceValue,
// this.state.translateValue,
{
velocity:0.2, //初始速度，必填
deceleration:0.05//衰减系数。默认值 0.997。
}
).start();
}
render(){
// let {fadeAnim} = this.state;
//使用专门的可动画化的View组件
return (<Animated.View
style={{
...this.props.style,
// opacity:fadeAnim
transform:[
{scale:this.state.bounceValue} //绑定缩放值
// {translateX:this.state.translateValue.x},
// {translateY:this.state.translateValue.y}
]
}}>
{this.props.children}
</Animated.View>);
}
}
// 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了
export default class MainFadeView3 extends React.Component{
render(){
return (<View style={{flex:1, alignItems:'center',
justifyContent:'center'}}>
<FadeView style={{width:250, height:50, backgroundColor:'blue'}} ref="fadeView">
<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
</FadeView>
<TouchableOpacity activeOpacity={0.5} onPress={this._onPress}>
<Text style={{fontSize:20}}>执行</Text>
</TouchableOpacity>
</View>);
}
_onPress=()=>{
this.refs.fadeView.executionAnimated();
}
}3.Animated.spring()
方法说明：根据基于阻尼谐振动 damped harmonic oscillation的弹性模型生成一个动画值。它会在toValue值更新的同时跟踪当前的速度状态，以确保动画连贯。可以链式调用。
3.1方法
static spring(value, config)3.1.1value参数值：
value:new Animated.Value(0)可以是单个值初始值；
value:new Animated.ValueXY({x:0, y:0})二位向量x和y坐标
3.1.2config 参数有以下这些属性：
注意你不能同时定义 bounciness/speed、tension/friction 或 stiffness/damping/mass 这三组数据，只能指定其中一组：
friction/tension或bounciness/speed选项与 Facebook Pop, Rebound, 和 Origami中的弹簧模型相匹配。
摩擦（friction）：控制“弹性”/过冲。默认值7。
张力（tension）：控制速度。默认值40。
速度（speed）：控制动画的速度。默认值12。
弹性（bounciness）：控制弹性。默认8。
将刚度/阻尼/质量（stiffness/damping/mass）指定为参数会产生动画效果。弹簧使用基于阻尼谐振子运动方程的分析弹簧模型。这种行为稍微更精确，更忠实于弹簧动力学背后的物理原理，并且与iOS的caspringanimation原语中的实现非常相似。
刚度（stiffness）：弹簧刚度系数。默认为100。
阻尼（damping）：定义弹簧运动应如何因摩擦力而受到阻尼。默认值10。
质量（mass）：附着在弹簧末端的物体的质量。默认值1。
其他配置选项：
速度（velocity）：附着在弹簧上物体的初始速度。默认值0（对象处于静止状态）。
过冲（overshootClamping）：布尔值，表示弹簧是否应夹紧而不应弹跳。默认为false。
恢复位移阈值（restDisplacementThreshold）：从静止状态开始的位移阈值，低于该阈值，弹簧应被视为静止状态。默认为0.001。
restspeedthreshold：弹簧静止时的速度，单位为像素/秒。默认为0.001。
延迟（delay）：延迟后启动动画（毫秒）。默认为0。
IsInteraction：指定本活动是否在InteractionManager的队列中注册以影响其任务调整。默认值为true。
useNativeDriver:启用原始驱动。默认不启用（false）。
3.2示例-实现沿着x，y移动
3.2.1初始化x，y轴坐标
state = {
//二维坐标
translateValue: new Animated.ValueXY({x:0, y:0})
};3.2.2绑定style的x和y值
transform:[
{translateX:this.state.translateValue.x},
{translateY:this.state.translateValue.y},
]3.2.3定义执行动画
executionAnimated(){
Animated.spring(this.state.translateValue,
{
toValue: {x:100, y:100}, //目标值
velocity: 2, //附着在弹簧上物体的初始速度。默认值0（对象处于静止状态）。
tension: -20, //控制速度。默认值40。
friction: 3, //控制“弹性”/过冲。默认值7。
}).start();
}3.2.4完整示例
import React from 'react';
import {Animated, Text, View,
TouchableOpacity} from 'react-native';
class FadeView extends React.Component{
state = {
// bounceValue:new Animated.Value(0) //初始值
//定义x和y坐标值
translateValue:new Animated.ValueXY({x:0,y:0})
};
componentDidMount() {
}
executionAnimated(){
Animated.spring(this.state.translateValue,
{
toValue: {x:100, y:100}, //目标值
velocity: 2, //附着在弹簧上物体的初始速度。默认值0（对象处于静止状态）。
tension: -20, //控制速度。默认值40。
friction: 3, //控制“弹性”/过冲。默认值7。
}).start();
}
render(){
//使用专门的可动画化的View组件
return (<Animated.View
style={{
...this.props.style,
transform:[
//绑定x和y坐标
{translateX:this.state.translateValue.x},
{translateY:this.state.translateValue.y}
]
}}>
{this.props.children}
</Animated.View>);
}
}
// 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了
export default class MainFadeView4 extends React.Component{
render(){
return (<View style={{flex:1, alignItems:'center',
justifyContent:'center'}}>
<FadeView style={{width:250, height:50, backgroundColor:'blue'}} ref="fadeView">
<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
</FadeView>
<TouchableOpacity activeOpacity={0.5} onPress={this._onPress}>
<Text style={{fontSize:20}}>执行</Text>
</TouchableOpacity>
</View>);
}
_onPress=()=>{
this.refs.fadeView.executionAnimated();
}
}4.Animated.timing()
方法说明：推动一个值按照一个缓动曲线而随时间变化。Easing模块定义了一大堆曲线，你也可以使用你自己的函数。
4.1方法
static timing(value, config)4.1.1value参数值：
value:new Animated.Value(0)可以是单个值初始值；
value:new Animated.ValueXY({x:0, y:0})二位向量x和y坐标
4.1.2config 参数有以下这些属性：
duration: 动画的持续时间（毫秒）。默认值为 500.
easing: 缓动函数。 默认为Easing.inOut(Easing.ease)。
delay: 开始动画前的延迟时间（毫秒）。默认为 0.
isInteraction: 指定本动画是否在InteractionManager的队列中注册以影响其任务调度。默认值为 true。
useNativeDriver: 启用原生动画驱动。默认不启用(false)。
4.2示例-实现沿着x，y移动
4.2.1初始化x，y轴坐标
state = {
//二维坐标
translateValue: new Animated.ValueXY({x:0, y:0})
};4.2.2绑定style的x和y值
transform:[
{translateX:this.state.translateValue.x},
{translateY:this.state.translateValue.y},
]4.2.3定义执行动画
Animated.timing( // 随时间变化而执行动画
this.state.translateValue, //动画中的变量值
{
toValue: { //x和y目标值
x:100,
y:200
}, // 透明度最终变为1，即完全不透明
duration: 3000, // 让动画持续一段时间
delay:3000, //延迟3秒执行
// easing:Easing.bounce(20) //缓动函数。 默认为Easing.inOut(Easing.ease)。
}
).start();4.2.4完整示例
import React from 'react';
import {Animated, Text, View,Easing,
InteractionManager} from 'react-native';
class FadeView extends React.Component{
state = {
//二维坐标
translateValue: new Animated.ValueXY({x:0, y:0})
};
componentDidMount() {
Animated.timing( // 随时间变化而执行动画
this.state.translateValue,
{
toValue: {
x:100,
y:200
}, // 透明度最终变为1，即完全不透明
duration: 3000, // 让动画持续一段时间
delay:3000,
// easing:Easing.bounce(20)
}
).start();
}
render(){
//使用专门的可动画化的View组件
return (<Animated.View
style={{
...this.props.style,
transform:[
{translateX:this.state.translateValue.x},
{translateY:this.state.translateValue.y},
]
}}>
{this.props.children}
</Animated.View>);
}
}
// 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了
export default class MainFadeView2 extends React.Component{
render(){
return (<View style={{flex:1, alignItems:'center',
justifyContent:'center'}}>
<FadeView style={{width:250, height:50, backgroundColor:'blue'}}>
<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
</FadeView>
</View>);
}
}5.Animated.View组件style支持的transform属性说明
transform接收一个转换对象阵列。每个对象都具体规定了将被转换为关键的特性，以及转换中使用的值。对象不应该被混淆.使每个对象值用单一key/value。
旋转(rotate)转换需要一个字符串，因此转换可以在角度（DEG）或弧度（RAD）中表示。例如:
Transform（[{rotatex:'45 deg'}，{rotatez:{0.785398rad}]）
倾斜转换(transform)需要一个字符串，以便转换可以用度数（deg）表示。例如：
transform（[{skewx:{45deg}]）
array of object: {perspective: number}, ,object: {rotate: string}, ,object: {rotateX: string}, ,
object: {rotateY: string}, ,object: {rotateZ: string}, ,object: {scale: number}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,
object: {translateX: number}, ,object: {translateY: number}, ,
object: {skewX: string}, ,object: {skewY: string}tranform包含这些属性：perspective，rotate，rotateX，rotateY，rotateZ，scale，scaleX，scaleY，translateX，translateY，skewX，skewY；