动画移动x和y与软移动React Native

mklgxw1f 于 2023-02-19 发布在 React

关注(0)|答案(1)|浏览(132)

我想在x和y轴上移动一个球，但动画不是软的，移动是颤抖的，如果我移动得更快，它不会在对角线上移动精确，但做一个Angular ，我怎么能移动软球？这里有一个例子：
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
    }
});

react-native

来源：https://stackoverflow.com/questions/55748343/animate-move-x-and-y-with-soft-move-react-native

1条答案

按热度按时间

wf82jlnq1#

你可以使用useNativeDriver来获得更好的性能。请将它与translateX和translateY一起使用。因为你不能将useNativeDriver与style的left和right属性一起使用。

export default class App extends React.Component {
  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>
    );
  }
}

更新带挂钩

const App = () => {
  const ballAnimatedValue = useRef(new Animated.Value(0)).current;

  const moveBall = () => {
    Animated.timing(ballAnimatedValue, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

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

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

  const animStyle = {
    transform: [
      {
        translateY: yVal,
        translateX: xVal,
      },
    ],
  };

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

赞(0）回复(0）举报 2023-02-19

我来回答

动画移动x和y与软移动React Native

1条答案

相关问题

热门标签

最新问答