react-native - React Native 如何同时旋转和平移

Question

如何同时旋转和平移？在下面的示例中，我期望正方形向右移动并围绕自己的轴旋转，保持相同的中心 y 轴。如果你能想象一个轮子在路上行驶

相反，它疯狂地飞走

任何帮助，将不胜感激

import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Animated
} from "react-native";

class App extends Component {
  
  componentWillMount () {
    this._animatedValue = new Animated.Value(0);
  }
  componentDidMount () {
    Animated.timing(this._animatedValue, {
        toValue: 100,
        duration: 3000
    }).start(); 
  }
  
  render () {
    
    const interpolatedRotateAnimation = this._animatedValue.interpolate({
        inputRange: [0, 100],
      outputRange: ['0deg', '360deg']
    });

     const interpolatedRotateX = this._animatedValue.interpolate({
        inputRange: [0, 100],
      outputRange: [0, 200]
    });
    
    return (
      <View style={styles.container}>
       <Animated.View 
            style={[styles.box, {transform: [
            {rotate: interpolatedRotateAnimation},
                        {translateX:interpolatedRotateX}

            ]}
            ]}
        />
      </View>
    );
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  box: {
    backgroundColor: 'red',
    position: 'absolute',
    top: 100,
    left: 100,
    width: 100,
    height: 100
  }
});

export default App

Answer 1

我缺少的是轴是对象的中心。平移相对于由于旋转而发生变化的自身对象的轴。

平移 x/y 不是简单地相对于屏幕移动对象，而是相对于它自己的轴。