反应本机圆变换翻译动画

反应本机圆变换翻译动画

你算算

translateX

，并

translate

Y与三角函数功能。

translateX

对应

Math.sin()

，并且

translateY

是对应于

Math.cos()

。

尽管

react-native animated.interpolate

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

完整代码：

export class App extends Component {    constructor() {        super()        this.animated = new Animated.Value(0);        var range = 1, snapshot = 50, radius = 100;        /// translateX        var inputRange = [], outputRange = [];        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);        }        this.translateX = this.animated.interpolate({ inputRange, outputRange });        /// translateY        var inputRange = [], outputRange = [];        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);        }        this.translateY = this.animated.interpolate({ inputRange, outputRange });    }      animate() {        this.animated.setValue(0)        Animated.timing(this.animated, {          toValue: 1,          duration: 1000,        }).start();      }      render() {        const transform = [{ translateY: this.translateY }, {translateX: this.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,      }    });