|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import React, {Component} from 'react'; import {View, Animated, StyleSheet} from 'react-native'; export default class Loop extends Component { constructor(props) { super(props); this.state = { startValue: new Animated.Value(1), endValue: 1.5, }; } componentDidMount() { Animated.loop( Animated.spring(this.state.startValue, { toValue: this.state.endValue, friction: 1, useNativeDriver: true, }), {iterations: 1000}, ).start(); } render() { return ( <View style={styles.container}> <Animated.View style={[ styles.square, { transform: [ { scale: this.state.startValue, }, ], }, ]} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, square: { height: 50, width: 50, backgroundColor: 'red', }, }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import React, {useEffect} from 'react'; import {View, Animated, StyleSheet} from 'react-native'; const Loop = () => { const startValue = new Animated.Value(1); const endValue = 1.5; useEffect(() => { Animated.loop( Animated.spring(startValue, { toValue: endValue, friction: 1, useNativeDriver: true, }), {iterations: 1000}, ).start(); }, [startValue, endValue]); return ( <View style={styles.container}> <Animated.View style={[ styles.square, { transform: [ { scale: startValue, }, ], }, ]} /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, square: { height: 50, width: 50, backgroundColor: 'red', }, }); export default Loop; |
