围绕另一个圆使一个圆动起来 [英] Animate a Circle around another circle

问题描述

我正在使用 react-native-svg 。
我想为另一个大圆圈周围的小圆圈设置动画。这个问题类似于这个问题。
动画与任何手势无关，但与时间有关。旋转应以预定义的延迟（以秒为单位）完成，并且应尽可能平滑。

I'm using react-native-svg. I'd like to animate a small circle around another bigger circle. This question is similar to this one. The animation is not tied to any gesture but time. The rotation should take a predefined delay in seconds to complete and should be as smooth as possible. Is it possible to do that with react-native-svg?

为了完整起见，我不得不说还有其他每秒绘制的小圆圈。这已经通过每秒改变状态来工作。但是我当然不会通过改变状态来进行动画处理，对吗？

To be complete, I have to say that there are other small circles that are plotted every seconds. This is already working by mutating the state every second. But of course I won't animate by mutating the state, will I?

所以这是到目前为止我在render（）中拥有的JSX代码：

So here is the JSX code I have so far in 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>

和typescript bubble（）方法：

and the typescript bubbles() method:

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;
}

任何帮助表示赞赏。

推荐答案

如 html rel = nofollow noreferrer>以下示例，并从 Nishant Nair 中进行建议转换属性以使 svg 围绕另一个对象旋转。

as explained in the following article, demonstrated in the following example and suggested from Nishant Nair you need to use transform property to rotate the svg around the other object.

包含代码文件 transition-circle-keyframes.css 的第51行，它对每个<$ c使用 transform $ c> @keyframes 移动对象。

the code is included in line 51 of file transition-circle-keyframes.css and it uses transform on every @keyframes to move the object.

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

react-native 转换 c>

Transforms in react-native

转换

transform

transform 接受一组转换对象。每个对象都指定将要转换为键的属性，以及在转换中使用的值。对象不应合并。每个对象使用一个键/值对。

transform accepts an array of transformation objects. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.

旋转变换需要一个字符串，以便可以以度（deg）或弧度（rad）表示变换。例如：

The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:

相应的 from 字段应设置为

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

to字段应设置为

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

触发动画

您可以使用 动画 api 更改状态。
在每个关键帧上，您需要从 rotateX更改View transform 属性：从'0deg'到 rotateX：'360deg'。您可以将SVG作为 rotateInView 组件的子代传递：

Triggering the animation

you can use the Animated api to change the state over time. On every keyframe you need to change the View transform property from rotateX: '0deg' to rotateX: '360deg'. You can pass the SVG as child of the rotateInView component:

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

rotateInView 组件会将变换保存为状态， Animated.timing（）函数将触发状态更新

the rotateInView component will save the transform as state, Animated.timing() function will trigger the state update

在rotateInView构造函数中，名为 rotateAnim Animated.Value c $ c>被初始化为状态的一部分。视图上的transform属性映射到该动画值。在幕后，提取数值并将其用于设置transform属性。

In the rotateInView constructor, a new Animated.Value called rotateAnim is initialized as part of state. The transform property on the View is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set transform property.

安装组件时，不透明度设置为 [{ ： 0deg}，{translateX：400}，{rotateX： 0deg}] 。然后，在 rotateAnim 动画值上启动缓动动画，该动画值将更新其所有依赖的映射（在这种情况下，仅是 transform 属性），将其值动画为最终值 [{{rotateX：'360deg'}，{translationX：400}，{rotateX：'-360deg'}] 。

When the component mounts, the opacity is set to [{ rotateX: '0deg' }, { translateX: 400}, { rotateX: '0deg' }]. Then, an easing animation is started on the rotateAnim animated value, which will update all of its dependent mappings (in this case, just the transform property) on each frame as the value animates to the final value of [{ rotateX: '360deg' }, { translateX: 400}, { rotateX: '-360deg' }].

此操作以优化的方式完成，比调用setState和重新渲染要快。
因为整个配置都是声明性的，所以我们将能够实现进一步的优化，以对配置进行序列化，并在高优先级线程上运行动画。

This is done in an optimized way that is faster than calling setState and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.

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: transform([{ 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 Animated View
        style={{
          ...this.props.style,
          transform: rotateAnim,         
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}

这篇关于围绕另一个圆使一个圆动起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！