Javascript 反应本机圆变换平移动画

嗨，我希望动画的.view像圆形一样移动。我想用鼻窦做这个，但它不起作用。有人知道怎么做吗？我不想旋转视图。它应该只是在循环中移动。我是个新来的本地人。如果有人能帮我就好了

//导入liraries
从“React”导入React，{Component}；
从“react native”导入{视图、文本、样式表、动画、按钮、TouchableOpacity}；
//创建一个组件
类MyClass扩展组件{
构造函数（）{
超级（）
this.animated=新的animated.Value（0）；
}
设置动画（）{
此.animated.setValue（0）
动画。计时（此为动画{
toValue:Math.PI*2，
持续时间：1000，
}).start（）；
}
render（）{
const translateY=this.animated.interpolate({
输入范围：[0，Math.PI*2]，
输出范围：[0200]
});
常量translateX=translateY
常量转换=[{translateY}，{translateX}]；
返回(
你好
{ 
这个。动画（）
}} />
);
}
}
//定义你的风格
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#2c3e50”，
},
btn:{
背景颜色：“红色”，
为内容辩护：“中心”，
对齐项目：“居中”，
宽度：50，
}
});
//使此组件可用于应用程序
导出默认MyClass；

您必须使用计算

translateX

和

translateY

translateX

对应于

Math.sin（）

，

translateY

对应于

Math.cos（）

尽管react native

animated.interpolate

不支持函数回调，但您可以将其分为几个部分进行模拟（我在代码示例中选择了50个部分）：

完整代码：

导出类应用程序扩展组件{
构造函数（）{
超级（）
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}]；
返回(
如果你有时间，可以看看这个问题吗？@Val如果我创建了两个不同的数组outputRangeX和outputRangeY，并且只在循环中推送值，它会停止工作，有什么具体原因吗？@Val如果我想绕一个圈移动它怎么办？你能解释一下这是如何工作的吗？@pars如何定义“移动它”？请问一个新的问题查询和共享链接到me@Val我怎样才能使它从特殊角度开始，在特殊角度停止
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, Animated, Button, TouchableOpacity } from 'react-native';

// create a component
class MyClass extends Component {
  constructor() {
    super()
    this.animated = new Animated.Value(0);
  }

  animate() {    
    this.animated.setValue(0)
    Animated.timing(this.animated, {
      toValue: Math.PI *2,
      duration: 1000,
    }).start();
  }


  render() {
    const translateY = this.animated.interpolate({
      inputRange: [0, Math.PI *2],
      outputRange: [0, 200]
    });
    const translateX = translateY
    const transform = [{ translateY }, {translateX}];
    return (
      <View style={styles.container}>
        <Animated.View style={[{ transform }]}>
          <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',
  },
  btn: {
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
    width: 50,
  }
});

//make this component available to the app
export default MyClass;

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.dot, {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 of circle
    },
    dot: {
        width: '100%',
        height: 20,
        backgroundColor: 'red',
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: '#fff',
    },
 });