Question

我想在x和y轴上移动球，但是动画不是很柔软，运动是颤抖的，如果我移动得更快，它就不会精确地沿对角线运动，但是我能以一个角度如何柔和地移动球吗？这是示例：

https://snack.expo.io/HJvm5WI5N

代码就是这样

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

export default class App extends React.Component {

    constructor(props) {
        super(props)

        this.ball = new Animated.ValueXY({x: 30, y: 30})
    }

    moveBall = () => {
        Animated.timing(this.ball, {
            toValue: {x: 250, y: 350},
            duration: 2000
        }).start()
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={this.moveBall}>
                    <Animated.View style={[styles.ball, this.ball.getLayout()]}>
                        <Text style={styles.text}>+</Text>
                    </Animated.View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    ball: {
        width: 60,
        height: 60,
        borderRadius: 30,
        backgroundColor: 'red',
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        fontWeight: 'bold',
        color: 'white',
        fontSize: 32
    }
});

Answer 1

您可以使用useNativeDriver以获得更好的性能。将其与translateX和translateY一起使用。因为您不能将useNativeDriver与样式的左右属性一起使用。

constructor(props) {
        super(props)

        this.ball = new Animated.Value(0)
    }

    moveBall = () => {
        Animated.timing(this.ball, {
            toValue: 1,
            duration: 1000,
            useNativeDriver: true
        }).start()
    }


  render() {
    const xVal = this.ball.interpolate({
        inputRange: [0, 1],
            outputRange: [0, 250]
    });

    const yVal = this.ball.interpolate({
        inputRange: [0, 1],
            outputRange: [0, 350]
    })

    const animStyle = {
      transform: [{
        translateY: yVal, translateX: xVal
      }]
    }
    return (
      <View style={styles.container}>
                <TouchableOpacity onPress={this.moveBall}>
                    <Animated.View style={[styles.ball, animStyle]}>
                        <Text style={styles.text}>+</Text>
                    </Animated.View>
                </TouchableOpacity>
            </View>
    );
  }

使x和y动画动起来并用柔和的动画进行原生反应

1 个答案: