Как анимировать часть файла SVG в React Native - PullRequest
Новая
       10

Как анимировать часть файла SVG в React Native

0 голосов
/ 25 сентября 2019

Я работаю над собственным приложением реагирования, и мне нужно анимировать (вращать вокруг центральной точки) часть файла SVG.Как я могу получить доступ к компоненту, который я хочу анимировать?

Я пытался преобразовать файл SVG в формат JSX.но все равно я не могу получить доступ к компоненту, который я хочу повернуть

App.js: 

import React from 'react';
import { StyleSheet, Text, View, Animated } from 'react-native';
import SvgComponent from './assets/hotFan';


class App extends React.Component {
  constructor(props){
    super(props);
    this.animation = new Animated.Value(0);
  }

  render(){
    const rotation = this.animation.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg']
    });

    return (
      <Animated.View style={{transform: [{rotate: rotation}]}}>
          <SvgComponent/>
      </Animated.View>
    );
  }

  componentDidMount() {

    Animated.loop(
      Animated.timing(this.animation, {toValue: 1, duration: 2000})
    ).start();    
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

Я не могу поместить здесь весь код компонента, так как он превышает ограничение на количество символов.но вы можете конвертировать https://drive.google.com/file/d/1lKaSWTO1_0cQQN6rtdaw_yWE9qa5nSjV/view?usp=sharing в jsx-файл, используя https://www.smooth -code.com / open-source / svgr / plays / / 1011 *

фактический код вращает весь компонент вокруг, но внутренняя стрелка - это та, которая должна вращаться, а не весь компонент.

1 Ответ

0 голосов
/ 25 сентября 2019

Вы можете разделить SVG на два компонента: компонент стрелки, который является статической частью SVG, и компонент Fan - анимированная часть.Затем просто оберните компонент Fan с Animated.View и передайте вам анимацию: 

 <View>
     <SVG />
     <Animated.View style={animatedStyle}>
        <Fan />
     </Animated.View>
 </View>

Анимированный компонент будет помещен в «обернутый» и будет также отображать свойства анимации: 

const interpolateRotation = this.animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['360deg', '0deg'], 
});

const animatedStyle = {
    position: 'absolute',
    top: 0,
    left: 0,
    transform: [
        { rotate: interpolateRotation }
    ]
}

Наконец, самая простая часть - это подготовить анимацию и запустить ее: 

animatedValue = new Animated.Value(1);

componentDidMount() {
    this.startAnimation();
}

startAnimation = () => {
    this.animatedValue.setValue(0);
    Animated.timing(this.animatedValue, {
      toValue: 1,
      duration: 1500,
      easing: Easing.linear,
    }).start(() => this.startAnimation())
}

Я создал рабочую демонстрацию здесь .

...