Javascript 将多个视图设置为圆形的本机动画

我想要两个视图，它们像一个圆一样变换，同时不旋转。第一个视图从顶部开始，第二个视图从底部开始。我已经问过如何使用一个视图。我不能让它运行在两个视图中。

//导入liraries
从“React”导入React，{Component}；
从“react native”导入{视图、文本、样式表、动画、按钮、TouchableOpacity}；
//创建一个组件
导出默认类应用程序扩展组件{
构造函数（）{
超级（）
this.animated=新的animated.Value（0）；
this.animated2=新的Animated.Value（0）；
变量范围=1，快照=50，半径=100；
///translateX
变量输入范围=[]
变量输出范围=[]
变量outputRange2=[]
对于（var i=0；i要同时制作多个动画，只需创建多个
动画.Value
，或从中多次插入
即可

移动轨迹是关于用三角函数计算
translateX
和
translateY

translateX
对应于
Math.sin（）
，
translateY
对应于
Math.cos（）

选项二的代码（从一个动画值插值多次）：

导出类应用程序扩展组件{
构造函数（）{
超级（）
this.animated=新的animated.Value（0）；
变量范围=1，快照=50，半径=100；
///translateX
变量inputRange=[]，outputRange=[]；
对于（var i=0；i，如果您正在寻找类似于问题的黄油平滑解决方案

完整代码


import React，{Component}来自'React'；
从“react native”导入{View，Text，Animated，StyleSheet，Easing}；
导出默认类圆扩展组件{
构造函数（）{
超级（）；
this.animated=新的animated.Value（0）；
var-inputRange=[0,1]；
变量输出范围=['0deg'，'360deg']；
this.rotate=this.animated.interpolate（{inputRange，outputRange}）；
输出范围=['0deg'，'-360deg']；
this.rotatePosite=this.animated.interpolate（{inputRange，outputRange}）；
}
componentDidMount（）{
这个。动画（）；
}
制作动画（）{
动画循环(
动画。计时（此为动画{
toValue:1，
持续时间：4000，
useNativeDriver：没错，
放松：放松，线性，
}),
).start（）；
}
render（）{
const transform=[{rotate:this.rotate}]；
const transform1=[{rotate:this.rotatePosite}]；
返回(
试验
试验
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
},
项目：{
位置：'绝对'，
宽度：100，
高度：200，//这是这里的直径
},
主题项目：{
宽度：“100%”，
身高：20，
背景颜色：“红色”，
位置：'绝对'，
对齐项目：“居中”，
为内容辩护：“中心”，
},
底部项目：{
宽度：“100%”，
身高：20，
背景颜色：“红色”，
位置：'绝对'，
底部：0，
对齐项目：“居中”，
为内容辩护：“中心”，
},
正文：{
颜色：“#fff”，
},
});
关于设置多个对象的动画，这是一个非常好的问题。但是你的主题不好，与TypeError无关。我想这就是为什么我得到了downvote，修改你的问题，那么它将是一个非常好的问题。谢谢你，它工作得非常好：）我可以问你如何在你的帖子中实现这个小视频吗？它是一个GIF图像。我使用Mac app store中的GIPHY捕获。再次提出这个问题，有没有办法缩放主圆圈顶部元素的大小，并在此基础上缩小其他元素？有没有可能不停地继续制作动画？目前，一轮完成后d它停止一秒钟，然后重新开始。@Val
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, Animated, Button, TouchableOpacity } from 'react-native';

// create a component
export default class App extends Component {
  constructor() {
      super()
      this.animated = new Animated.Value(0);
      this.animated2 = new Animated.Value(0);

      var range = 1, snapshot = 50, radius = 100;
      /// translateX
      var inputRange = []
      var outputRange = [] 
      var outputRange2 = []
      for (var i=0; i<=snapshot; ++i) {
          var value = i/snapshot;
          var move = Math.sin(value * Math.PI * 2) * radius;
          inputRange.push(value);
          outputRange.push(move);
          outputRange2.push(-move);
      }
      translateX = this.animated.interpolate({ inputRange, outputRange });
      translateX2 = this.animated2.interpolate({inputRange, outputRange2})

      /// translateY
      var inputRange = [] 
      var outputRange = []
      var outputRange2 = []
      for (var i=0; i<=snapshot; ++i) {
          var value = i/snapshot;
          var move = -Math.cos(value * Math.PI * 2) * radius;
          inputRange.push(value);
          outputRange.push(move);
          outputRange2.push(-move);
      }
      translateY = this.animated.interpolate({ inputRange, outputRange });
      translateY2 = this.animated2.interpolate({inputRange, outputRange2})

  }

    animate() {
      this.animated.setValue(0)
      Animated.timing(this.animated, {
        toValue: 1,
        duration: 10000,
      }).start();
      this.animated2.setValue(0)
      Animated.timing(this.animated2, {
        toValue: 1,
        duration: 10000,
      }).start();
    }


    render() {
      //const transform = [{ translateY: this.translateY }, {translateX: this.translateX}];
      return (
        <View style={styles.container}>
          <Animated.View style={
            [{ transform: [{ translateY: translateY }, {translateX: translateX}] }]}>
            <TouchableOpacity style={styles.btn}>
              <Text>hallo</Text>
            </TouchableOpacity>
          </Animated.View>
          <Animated.View style={
            [{ transform: [{ translateY: translateY2 }, {translateX: translateX2}] }]}>
            <TouchableOpacity style={styles.btn}>
              <Text>hallo</Text>
            </TouchableOpacity>
          </Animated.View>
          <Button title="Test" onPress={() => { 
            this.animate() 
            }} />
        </View>
      );
    }
  }

  // define your styles
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#2c3e50',
    },
    btn2: {
      justifyContent: 'center',      
      alignItems: 'flex-end',
      alignSelf: 'flex-end'
    },
    btn: {
      backgroundColor: 'red',
      justifyContent: 'center',
      alignItems: 'center',
      width: 50,
    }
  });

import React, {Component} from 'react';
import {View, Text, Animated, StyleSheet, Easing} from 'react-native';

export default class Circle extends Component {
constructor() {
    super();
    this.animated = new Animated.Value(0);
    var inputRange = [0, 1];
    var outputRange = ['0deg', '360deg'];
    this.rotate = this.animated.interpolate({inputRange, outputRange});
    outputRange = ['0deg', '-360deg'];
    this.rotateOpposit = this.animated.interpolate({inputRange, outputRange});
}

componentDidMount() {
    this.animate();
}

animate() {
    Animated.loop(
    Animated.timing(this.animated, {
        toValue: 1,
        duration: 4000,
        useNativeDriver: true,
        easing: Easing.linear,
    }),
    ).start();
}
render() {
    const transform = [{rotate: this.rotate}];
    const transform1 = [{rotate: this.rotateOpposit}];
    return (
    <View style={styles.container}>
        <Animated.View style={[styles.item, {transform}]}>
        <Animated.View style={[styles.topItem, {transform: transform1}]}>
            <Text style={styles.text}>Test</Text>
        </Animated.View>
        <Animated.View style={[styles.bottomItem, {transform: transform1}]}>
            <Text style={styles.text}>Test</Text>
        </Animated.View>
        </Animated.View>
    </View>
    );
}
}
const styles = StyleSheet.create({
container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
},
item: {
    position: 'absolute',

    width: 100,
    height: 200, //this is the diameter here
},
topItem: {
    width: '100%',
    height: 20,
    backgroundColor: 'red',
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center',
},
bottomItem: {
    width: '100%',
    height: 20,
    backgroundColor: 'red',
    position: 'absolute',
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
},
text: {
    color: '#fff',
},
});