ReactNativeでSVGアニメーション #reactnative

参考

React NativeでSVGを扱う

今回はreact-native-svgを使う前提

ARTというライブラリもあるが、色々試している時にこのエラーが発生して解決しなかった。 react-native-svgのほうが安定して使えた印象。

基本的なアニメーションの流れ

SvgやPathなどのタグをAnimationに対応させないと行けない。これを忘るとAnimated.valueを設定しても反映されない。ちょっとハマる。


//使う要素を 順次以下のようにAnimatedに対応させる
const AnimatedSvg = Animated.createAnimatedComponent(Svg);
const AnimatedPath = Animated.createAnimatedComponent(Path);
const AnimatedCircle = Animated.createAnimatedComponent(Circle);

他の要素と同じように、Animated.value()を設定して、任意のタイミングでこの値を変動させることで実現する。stateの持たせるのがわかりやすいか。Svgでははfill(塗りつぶし色)やstroke（線）、opacityなどをpropとして指定する。普通の要素はstyleに指定したりするので注意。
変動させたい値の数だけ以下の処理が必要
- Animated.value()の宣言
- (必要なら)interpolateの設定
- animationの実行

//宣言
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
      svgScale: new Animated.Value(50),
    };
  }

//_interPolateの設定(cssのkeyframe的に)
    const _interPolateSvgScale = svgScale.interpolate({
      inputRange: [0, 100],
      outputRange: [0.8, 1],
    });

//animationの実行
  _svgScaleAnimation = () => {
    const { checked, svgScale } = this.state
    Animated.timing(svgScale, {
      toValue: checked ? 0 : 100, 
      duration: duration,
      useNativeDriver: false,
    }).start();
  }

場所の移動や回転・サイズ変更などはstyleでtransformを指定する。transform リファレンス指定できる項目→ decomposedMatrix, rotation, scaleX, scaleY, transformMatrix, translateX, translateY

    const dStyle = {
      transform: [
        { translateY: _interPolateHeartY },
        { scale: _interPolateSvgScale },
        { scaleX: _interPolateHeartTransformX },
        { scaleY: _interPolateHeartTransformY },
      ],
    };

...

    return (
            <AnimatedSvg height={100} width={100} style={dStyle} >

cssのkeyframe的に段階的に変化を設定する場合や、色を変化させていく場合は、interpolateを使う。cssで一つのkeyframeで複数のプロパティを指定できるが、reactnativeではanimated.value()一つずつ設定しないといけない。
ちあんみにSVG画像を表示する場合はreact-native-svg-uriを使う。この時propで調整出来るのはfillぐらいなので、あまり柔軟なanimationは出来ない..

Pathのサイズ調整する方法

Path自体にはサイズ(height, width)の指定が出来なかった。
SVGタグにheightとwidthを指定してこれを枠とする。
その中にpathを描画すると元々のpathのサイズで描画される。
ここでSVGのviewBoxを調整するとSvgタグの中でpath全体がちょうどよく描画されるように調整することができる。
svgのpathを作成する時も一応使うサイズに合わせて作っておいた方が扱いやすい。

作ったアニメーション

　コード

....CSSで出来ることは一通り出来そうだけど、コード量は増えてしまいそう。