javascript - React ネイティブ サークル トランスフォーム トランスレート アニメーション

Question

こんにちは、animate.view が円のように動くようにしたいと思います。これをsinusで考えたのですがうまくいきません。誰かがそれを行う方法を知っていますか？ビューを回転させたくありません。円で移動するだけです。私はネイティブに反応するのが初めてです。誰かが私を助けてくれるといいですね。

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