react-native - 如何使用 React Native Animate 为不同的 Svg 属性设置动画

Question

我在 android 上使用 react-native-svg=6.3.1 和 react-native-0.55.4 。使用下面的代码，我可以成功地为圆的半径设置动画，但不能为它围绕某个点的旋转设置动画。这是什么原因。理论上，旋转动画应该与半径相同，因为它也需要一个字符串值。

import React, { Component } from 'react';
import { StyleSheet, View, Dimensions, Animated } from 'react-native';
import { Svg, Rect, Circle, G } from 'react-native-svg';

const { width, height } = Dimensions.get('window');
const AnimatedCircle = Animated.createAnimatedComponent(Circle);

function getInitialState() {
  const anim = new Animated.Value(0);
  
  const animRadius = anim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0', '50'],
  });
  return { anim, animRadius};
}


export default class AnimDemo extends Component {
  state = getInitialState();

  componentDidMount() {
    const { anim } = this.state;
    Animated.timing(anim, {
      toValue: 1,
      duration: 3000,
    }).start();
  }

  render() {
    const { animRadius } = this.state;
    return (
      <View style={styles.container}>
        <Svg width={width} height={height} viewBox="0 0 100 100">
        <AnimatedCircle
            cx="50"
            cy="50"
            r="5" //{animRadius} works
            stroke="blue"
            strokeWidth="1"
            fill="white"
            rotation={animRadius} //doesn't work. A string val, e.g. "10" does
            origin="100, 50"
        />
        </Svg>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ecf0f1',
  },
});