Question

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

＆＃13;

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',
  },
});

＆＃13;

如何使用React Native Animate

0 个答案: