export function createAnimatedComponent(component: any): any;
可以将自定义的组件转变成支持动画的组件
大概就是:CustomComponent =>Animated.View
举例实现:自定义一个组件,动画改变其宽高
class Sub extends PureComponent {
render() {
const {width, height} = this.props
return (
<View style={{width,height,backgroundColor: 'blue'}}>
</View>
);
}
}
const ABC = Animated.createAnimatedComponent(Sub)
constructor(props) {
super(props);
this.state = {
width: new Animated.Value(0),
height: new Animated.Value(0)
}
}
componentDidMount(){
Animated.parallel([
Animated.timing(this.state.width,{
toValue: 200,
duration: 5000
}),
Animated.timing(this.state.height,{
toValue: 200,
duration: 5000
})
]).start()
}
<ABC width={this.state.width} height={this.state.height}/>