React Native でアニメーション化された値を分数なしで解析する

React Native でアニメーション化された値を整数に解析する

アニメーション API と React フックを使用した React Native

import { Animated, Easing } from 'react-native';
import React from 'react';
export default function Milliliters() {
  const ML_LEVELS = [240, 50, 190];
  const ml = React.useRef(new Animated.Value(ML_LEVELS[0])).current;
  const ml_up_down = () => {
    Animated.sequence([
      Animated.timing(ml, {
        duration: 2000,
        toValue: ML_LEVELS[1],
        easing: Easing.bezier(0.55, 0.5, 0.45, 0.5),
        useNativeDriver: false,
      }),
      Animated.timing(ml, {
        duration: 2000,
        toValue: ML_LEVELS[2],
        easing: Easing.ease,
        useNativeDriver: false,
      }),
    ]).start();
  };
  return (
    <Animated.Text>{ml.interpolate({
      inputRange: [0, 1000],
      outputRange: ['0', '1000'],
      extrapolate: 'clamp',
    }).toFixed(0)}</Animated.Text>
  );
}

代替解決策: 解析に外部ライブラリを使用する

蘇生されたライブラリを使用してネイティブに反応する

import Animated, { Easing } from 'react-native-reanimated';
import React from 'react';
export default function Milliliters() {
  const ML_LEVELS = [240, 50, 190];
  const ml = useSharedValue(ML_LEVELS[0]);
  const ml_up_down = () => {
    ml.value = withSequence(
      withTiming(ML_LEVELS[1], { duration: 2000, easing: Easing.bezier(0.55, 0.5, 0.45, 0.5) }),
      withTiming(ML_LEVELS[2], { duration: 2000, easing: Easing.ease })
    );
  };
  const animatedText = useAnimatedStyle(() => {
    return { text: Math.round(ml.value) };
  });
  return (
    <Animated.Text style={animatedText}></Animated.Text>
  );
}

React Native でのアニメーション値の解析に関するよくある質問

1. アニメーション値を整数に変換する最良の方法は何ですか?
2. 理想的な方法は次のとおりです。 interpolate() そして toFixed(0) 整数を最も近い整数に丸めます。
3. なぜそうなるのか Number.parseInt() アニメーション値を使用できない場合は、
4. React Native では、次のような手法を使用してアニメーション値を変更する必要があります。 interpolate() を使用して直接処理するのではなく、 Number.parseInt()。
5. できる Reanimated アニメーションで整数値を処理するために使用できますか?
6. はい、付きます Reanimated、あなたは利用することができます useSharedValue() そして useAnimatedStyle() 整数値をスムーズに処理および表示するため。
7. とは何ですか interpolate() この文脈では何に使われますか？
8. interpolate() アニメーション値を構成可能な出力範囲にマップし、アニメーションを保持しながら整数としてフォーマットできるようにします。
9. React Native を使用する場合と比べてパフォーマンスに違いはありますか? Animated APIと Reanimated?
10. はい、 Reanimated 最適化されたアニメーション処理と共有データにより、複雑なアニメーションのパフォーマンスが向上します。

React Native でのアニメーション値の解析から得られる重要なポイント

動的ディスプレイを備えたユーザー インターフェイスを構築する場合、アニメーション値を整数に変換することが重要です。のようなメソッドを使用する 補間() 提示された数値に端数を含まないシームレスな移行が可能になります。

の使用 蘇生された このライブラリを使用すると、開発者はアニメーションをより効率的に管理できるようになり、パフォーマンスと制御が向上します。適切なアプローチの選択は、アニメーションの複雑さと必要な精度のレベルによって決まります。