Animation
React Native Animation
有四種 component可以加上動畫 View
,Text
,image
, scrollView
如果要擴展到其他 component 可以使用 Animated.createAnimatedComponent()
使用
import { Animated, LayoutAnimation } from 'react-native';
LayoutAnimation
可以讓你一次控制所有畫面的 animation
Animated
用來控制單一元件動畫。
範例:
class FadeInView extends React.Component {
state = {
fadeAnim: new Animated.Value(0), // Initial value for opacity: 0
}
componentDidMount() {
Animated.timing( // Animate over time
this.state.fadeAnim, // The animated value to drive
{
toValue: 1, // Animate to opacity: 1 (opaque)
duration: 10000, // Make it take a while
}
).start(); // Starts the animation
}
render() {
let { fadeAnim } = this.state;
return (
<Animated.View // Special animatable View
style={{
...this.props.style,
opacity: fadeAnim, // Bind opacity to animated value
}}
>
{this.props.children}
</Animated.View>
);
}
}
之後即可使用
<FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
</FadeInView>
文件
除了 Animated.timing
外共有三種可以使用。
https://facebook.github.io/react-native/docs/animated#methods-1
相關模組
Last updated
Was this helpful?