react-native-reanimatedライブラリを学ぶ⑥

withTimingを使って、円の拡大に『時間』をつける

まずは、withTimingをつけるだけ。

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedProps, useAnimatedStyle, withTiming}  from 'react-native-reanimated';
import Svg, {Circle} from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export default function App() {
  const r = useSharedValue(20);

  const handlePress = () => {
    r.value = r.value + 20;
  }

  const animatedProps = useAnimatedProps*1

  return (
    <View style={styles.container}>
      <Svg>
        <AnimatedCircle cx="200" cy="200" fill="blue" animatedProps={animatedProps}/>
      </Svg>
      <View style={{marginBottom:100}}>
        <Button onPress={handlePress} title="PUSH"/>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
 
次に　1回の拡大時間を1000ミリ秒に設定する
App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedProps, useAnimatedStyle, withTiming}  from 'react-native-reanimated';
import Svg, {Circle} from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export default function App() {
  const r = useSharedValue(20);

  const handlePress = () => {
    r.value = r.value + 20;
  }

  const animatedProps = useAnimatedProps*2

  return (
    <View style={styles.container}>
      <Svg>
        <AnimatedCircle cx="200" cy="200" fill="blue" animatedProps={animatedProps}/>
      </Svg>
      <View style={{marginBottom:100}}>
        <Button onPress={handlePress} title="PUSH"/>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

*1:) => ({

    r: withTiming(r.value),
  }

*2:) => ({

    r: withTiming(r.value, {
      duration:1000,
    }),
  }