ReactNative 实现动画的方式有多种, 自己感觉最简单的就是LayoutAnimation, 而且能实现很多动画效果, 基本满足需求.
下面是实战代码, 四种方式, 非常简单
import React, {Component} from 'react';
import {View, LayoutAnimation, TouchableOpacity, Text , StyleSheet} from 'react-native';
export default class LayoutAnimations extends Component {
constructor (props) {
super(props);
//设置默认宽高
this.state = {
width: 100,
height: 100
}
}
// 点击按钮事件
viewAnimation = () => {
/*
* ====== 设置完动画后直接改变view属性就可以, 使用this.setStage{} ======
* */
/*
* ************ 方式一 ************
* */
/*
* -------- 代码
* */
// LayoutAnimation.configureNext({
// duration: 1000,
// create: {
// type: LayoutAnimation.Types.spring,
// property: LayoutAnimation.Properties.scaleXY
// },
// update: {
// type: LayoutAnimation.Types.spring,
// springDamping: 0.2,
// },
// })
/*
* -------- 简介
* configureNext
* 可以有四个参数 API:
* type Config = {
duration: number, 持续时间
create?: Anim, 创建
update?: Anim, 更新
delete?: Anim, 删除
}
* */
/*
* 接上面的create update delete 创建方式 --- Anime API:
* type Anim = {
duration?: number, 持续时间,只写config里的就行
delay?: number, 延迟时间
springDamping?: number, 弹跳阻尼系数 0-1, 越小速度越快 (结合spring使用)
initialVelocity?: number, 初始速度
type?: $Enum<typeof TypesEnum>, 类型 定义在LayoutAnimation.Types中
property?: $Enum<typeof PropertiesEnum>,属性 定义在LayoutAnimation.Properties中
}
* */
/*
* 接上面的 type 和 property 的类型, API:
* var TypesEnum = {
spring: true, 弹跳
linear: true, 线性
easeInEaseOut: true, 缓入缓出
easeIn: true, 缓入
easeOut: true, 缓出
keyboard: true, ...
};
var PropertiesEnum = {
opacity: true, 透明度
scaleXY: true, 缩放
};
* */
/*
* ************ 方式二 ************
* */
/*
* -------- 代码
* */
// LayoutAnimation.configureNext(
// LayoutAnimation.create(
// 700,
// LayoutAnimation.Types.spring.spring,
// LayoutAnimation.Properties.scaleXY,
// )
// );
/*
* -------- 简介
* LayoutAnimation.create(duration: number, type, creationProp)
* 接受三个参数:持续时间, 动画类型, 动画属性
* */
/*
* ************ 方式三 ************
* */
/*
* -------- 代码
* */
// LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
/*
* -------- 简介
* 直接用用默认的动画, 通过Presets获取, 参数都是设置好的, API:
* var Presets = {
easeInEaseOut: create(
300, Types.easeInEaseOut, Properties.opacity
),
linear: create(
500, Types.linear, Properties.opacity
),
spring: {
duration: 700,
create: {
type: Types.linear,
property: Properties.opacity,
},
update: {
type: Types.spring,
springDamping: 0.4,
},
delete: {
type: Types.linear,
property: Properties.opacity,
},
},
};
* */
/*
* ************ 方式四 ************
* */
/*
* -------- 代码
* */
LayoutAnimation.spring();
/*
* -------- 简介
* 最简单,直接调用方法,其实bind的也是方式三中的Presets API:
* easeInEaseOut: configureNext.bind(
null, Presets.easeInEaseOut
),
linear: configureNext.bind(
null, Presets.linear
),
spring: configureNext.bind(
null, Presets.spring
),
* */
// 改变宽高
this.setState({
width: this.state.width + 20,
height: this.state.height + 20
})
}
render () {
return (
<View
style={styles.bgView}
>
<View
style={[
styles.animateView,
{
width: this.state.width,
height: this.state.height
}
]}
/>
<TouchableOpacity
style={styles.touchView}
onPress={this.viewAnimation}
>
<Text
style={styles.touchText}
>
我擦...
</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
bgView:{
flex: 1,
alignItems: 'center'
},
animateView:{
marginTop: 100,
height: 100,
width: 100,
backgroundColor: 'cyan'
},
touchView:{
marginTop: 200
},
touchText:{
height: 20,
width: 100,
backgroundColor: 'gray',
color: 'yellow',
fontSize: 18,
textAlign: 'center'
}
})
