Не могу понять, почему мне не нужно заботиться о translateX для компонентов AnimatedCircle, а о translateY для компонента AnimatedG? - PullRequest
Новая
       22

Не могу понять, почему мне не нужно заботиться о translateX для компонентов AnimatedCircle, а о translateY для компонента AnimatedG?

0 голосов
/ 12 мая 2019

Хорошо при попытке анимировать компонент AnimatedCircle, который я интерполировал со свойством непрозрачности.Я не объявлял свойство translateX, я сохранил оригинал из SVG, который я импортировал.Так что мой круг двигался только по оси Y.Но когда делаю то же самое с компонентом AnimatedG.Если вы не объявите положение translateY для исправления, это испортит анимацию.Кто-нибудь знает почему? 

const AnimatedCircle = Animated.createAnimatedComponent(Circle);
const AnimatedG = Animated.createAnimatedComponent(G);


 constructor() {
   this.state = {
      op1: new Animated.Value(0),
      chitAnim : new Animated.Value(-250),
    }

      Animated.timing(this.state.op1, {
        toValue:1,
        duration:300
      }),

      Animated.timing(this.state.chitAnim, {
        toValue:324,
        duration:300,
        easing: Easing.bounce
      }),

}

  render () {
    const animatedStyle = {
      transform: [
        {
          translateX: this.state.chitAnim
        },
        {
          translateY: 398
        },
      ]
    }

const position1 = this.state.op1.interpolate({inputRange: [0, 1],outputRange: [800, 0]});
}

return (
      <AnimatedCircle
      style={{opacity: this.state.op1, transform: [{translateY: 
      position1}]}}
      id='rond1'
      cx='28.146'
      cy='28.146'
      r='28.146'
      transform='translate(526.93 568.857)'
      fill='#add1d2'
    />

    <AnimatedG style={animatedStyle} transform="translate(-250 398)" id='chit' opacity='0.997'>
      <Path
        id='Tracé_9'
        data-name='Tracé 9'
        d='M309.588,269.307c0-42.5,31.119-74.692,77.36-74.692,22.053,0,40.014,7.827,48.909,22.053l-20.808,17.072c-6.4-9.422-16.36-14.581-30.058-14.581-28.1,0-46.235,21.513-46.235,48.369,0,18.851,12.447,31.3,34.855,31.3a43.346,43.346,0,0,0,33.076-14.4L423.76,301.85c-13.158,15.293-31.3,21.519-52.639,21.519C333.064,323.369,309.588,301.316,309.588,269.307Z'
        transform='translate(-309.588 -181.28)'
        fill='#add1d2'
      />
      <Path
        id='Tracé_10'
        data-name='Tracé 10'
        d='M440.867,261.262a52.613,52.613,0,0,1-1.251,11.385l-10.668,52.994H401.2l10.318-51.221a29.61,29.61,0,0,0,.712-6.576c0-9.778-5.337-15.293-16.36-15.293-14.053,0-23.832,7.822-27.212,24.543l-9.6,48.547H331.315l26.322-131.955h27.74l-8.889,44.995c8.355-6.938,18.673-10.14,29.518-10.14C426.814,228.541,440.867,239.926,440.867,261.262Z'
        transform='translate(-206.636 -185.687)'
        fill='#add1d2'
      />
      <Path
        id='Tracé_11'
        data-name='Tracé 11'
        d='M371.761,236.57h27.567L380.3,332.247H352.732Zm2.313-27.74c0-9.25,7.288-16.538,18.317-16.538,9.778,0,16.36,6.042,16.36,13.875,0,10.128-7.466,17.066-18.495,17.066C380.477,223.234,374.073,216.835,374.073,208.83Z'
        transform='translate(-105.153 -192.292)'
        fill='#add1d2'
      />
      <Path
        id='Tracé_12'
        data-name='Tracé 12'
        d='M393.4,277.675a15.507,15.507,0,0,0-1.768,3.512c-2.146,5.463-.4,9.778,6.048,12.32a22.208,22.208,0,0,0,11.666.958l-3.426,19.861c-8.016,1.435-16.475-.367-24.256-3.426-16.55-6.513-24.153-20.211-18.036-35.762a46.629,46.629,0,0,1,3.891-7.46l21.244-33.105-13.732-5.406,11.787-18.294,13.738,5.406,12.831-19.987L439.2,206.456l-12.837,19.981,22.173,8.728-11.781,18.294-22.179-8.728Z'
        transform='translate(-63.489 -173.334)'
        fill='#add1d2'
      />
    </AnimatedG>
)
...