componentDidMount() { const { timing } = Animated; timing( this.state.animatedValue, { toValue: 1 } ).start(); }
React.createClass({ getInitialState: function() { return { animation: new Animated.Value(0) }; }, explode: function() { Animated.timing(this.state.animation, { duration: 1500, toValue: 28 }).start(() => { this.state.animation.setValue(0); this.forceUpdate(); }.bind(this))
const SmoothImage = ({ style, ...restProps }) => { const opacity = useRef(new Value(0)).current; const smoothImageStyle = useRef({ opacity }).current; const previousSource = usePrevious(restProps.source); if (restProps.source !== previousSource) { opacity.setValue(0); } const handleImageLoad = () => { timing(opacity, { toValue: 1, duration: 600, useNativeDriver: true, }).start(); }; return <Image onLoad={handleImageLoad} style={[style, smoothImageStyle]} {...restProps} /> }
componentDidMount() { const { timing } = Animated; const { scaleAnim, fadeAnim, slideAnim } = this.state; timing( fadeAnim, { duration: 3000, delay: 400, easing: Easing.bounce, toValue: 1, useNativeDriver: true } ).start(); timing( slideAnim, { toValue: 0 } ).start(); timing( scaleAnim, { toValue: 1 } ).start(); }
componentDidMount() { const { timing, sequence, parallel, delay, stagger } = Animated; const { animatedValue, animatedColor } = this.state; sequence([ delay(500), timing( animatedValue, { toValue: 1 } ), delay(500), timing( animatedValue, { toValue: 2 } ), parallel([ timing(animatedColor, { toValue: 100 }), stagger(600, [ timing( animatedValue, { toValue: 1 } ), timing( animatedValue, { toValue: 0 } ), timing( animatedValue, { toValue: 1 } ) ]) ]) ]).start(); }
componentDidMount() { const { timing } = Animated; timing( this.state.animatedValue, { toValue: 1 } ).start(); }