Анимировать круг вокруг другого круга - PullRequest
Новая
       14

Анимировать круг вокруг другого круга

0 голосов
/ 13 апреля 2019

Я использую Reaction-native-SVG . Я хотел бы анимировать маленький круг вокруг другого большего круга. Этот вопрос похож на этот . Анимация не привязана ни к какому жесту, кроме времени. Вращение должно занять предварительно определенную задержку в секундах и должно быть как можно более плавным. Можно ли это сделать с помощью response-native-svg?

Чтобы закончить, я должен сказать, что есть другие маленькие круги, которые строятся каждую секунду. Это уже работает, мутируя государство каждую секунду. Но, конечно, я не буду оживлять, изменяя состояние, не так ли?

Итак, вот код JSX, который у меня есть в render (): 

<Svg style={{ alignContent: 'center' }}
  height="200"
  width="200">
  <Circle 
    cx="100"
    cy="100"
    r="56"
    stroke="black"
    strokeWidth="2"
    strokeOpacity="1"
    fillOpacity="0" 
  />
  { 
    /* Bubules (little circles) goes here*/                                                            
    this.bubbles() 
  }
</Svg>

и метод машинописных пузырей (): 

bubbles(): React.ReactNode {
    var elements = [];
    for (let tuple of this.state.lorenzPlotData) {
        let color = tuple === this.state.lorenzPlotData.tail ? "red" : "black";
        // We need to normalize data 
        elements.push(<Circle key={tuple[0]} cx={this.normalizePlot(tuple[1])} cy={this.normalizePlot(tuple[2])} r="4" fill={color} fillOpacity="1" />);
    }
    return elements;
}

Любая помощь приветствуется.

1 Ответ

3 голосов
/ 22 мая 2019

как объяснено в следующей статье , продемонстрировано в следующем примере и предложено из Nishant Nair , вам необходимо использовать свойство transform для поворота svgвокруг другого объекта.

Пример CSS-анимации

код включен в строку 51 файла transition-circle-keyframes.css и использует transform в каждом @keyframes дляпереместите объект. 

@-webkit-keyframes orbit {
    from {  -webkit-transform: rotate(0deg) translateX(400px) rotate(0deg); }
    to   {  -webkit-transform: rotate(360deg) translateX(400px) rotate(-360deg); }
}

Transforms in react-native

transform

transform принимает массив объектов преобразования.Каждый объект указывает свойство, которое будет преобразовано в качестве ключа, и значение, которое будет использоваться при преобразовании.Объекты не должны быть объединены.Используйте одну пару ключ / значение для объекта.

Для преобразований поворота требуется строка, чтобы преобразование могло быть выражено в градусах (градусах) или радианах (рад).Например:

Соответствующее поле from должно быть установлено как 

transform([{ rotateX: '0deg' }, { translateX: 400}, { rotateX: '0deg' }])

Поле to должно быть установлено как 

transform([{ rotateX: '360deg' }, { translateX: 400}, { rotateX: '-360deg' }])

Запуск анимации

Вы можете использовать Animated API , чтобы изменить state с течением времени.Для каждого keyframe вам необходимо изменить свойство View transform с rotateX: '0deg' на rotateX: '360deg'.Вы можете передать SVG как дочерний элемент компонента rotateInView: 

render() {
  return (
    <rotateInView>
      <Svg />
    </rotateInView>
  );
}

компонент rotateInView сохранит transform как состояние, функция Animated.timing() вызовет обновление состояния

В конструкторе rotateInView новый Animated.Value с именем rotateAnim инициализируется как часть состояния.Свойство transform в представлении сопоставляется с этим анимированным значением.За кулисами числовое значение извлекается и используется для установки свойства преобразования.

Когда компонент монтируется, непрозрачность устанавливается на [{ rotateX: '0deg' }, { translateX: 400}, { rotateX: '0deg' }].Затем запускается анимация замедления для анимированного значения rotateAnim, которая обновляет все его зависимые отображения (в данном случае только свойство transform) в каждом кадре, когда значение анимируется до конечного значения [{ rotateX: '360deg' }, { translateX: 400}, { rotateX: '-360deg' }]..

Это делается оптимизированным способом, который быстрее, чем вызов setState и повторный рендеринг.Поскольку вся конфигурация декларативна, мы сможем реализовать дальнейшую оптимизацию, которая сериализует конфигурацию и запускает анимацию в высокоприоритетном потоке. 

import React from 'react';
import { Animated, Text, View } from 'react-native';
class rotateInView extends React.Component {
  state = {
    rotateAnim: new Animated.Value(transform([{ rotateX: '0deg' }, { translateX: 400}, { rotateX: '0deg' }])),
  }

  componentDidMount() {
    Animated.timing(                  // Animate over time
      this.state.rotateAnim,            // The animated value to drive
      {
        toValue: transoform([{ rotateX: '360deg' }, { translateX: 400}, { rotateX: '-360deg' }]), // change to the new value
        duration: 10000,              // Make it take a while
      }
    ).start();                        // Starts the animation
  }

  render() {
    let { rotateAnim } = this.state;

    return (
      <Animated.View                 // Special animatable View
        style={{
          ...this.props.style,
          transform: rotateAnim,         
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}
...