React-Native Animated在低端Android手机中落后

Question

我正在尝试实现一种应在iOS和Android设备上运行的动画。

在iOS中，性能似乎令人满意（已在iPhone 6 Plus及更高版本上进行了测试）。

另一方面，某些Android设备的动画落后。

问题是，可以采取什么样的措施来避免性能问题（除了使用代码中已经存在的useNativeDriver={true}指令之外）？

代码如下：

import * as React from 'react';
import {
  Animated,
  ImageBackground,
  StyleSheet,
  Image,
  Easing,
  TextInput,
  View,
  Text,
} from 'react-native';
import { PanGestureHandler, State } from 'react-native-gesture-handler';
import backImg from './background.png';

const c_initial_coordinate_left = 100;
const c_initial_coordinate_top = 100;

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.spaceAnimatedTranslations = new Animated.ValueXY();
    this.spaceAnimatedTranslations2 = new Animated.ValueXY();
    this.spaceAnimatedTranslations3 = new Animated.ValueXY();
    this.spaceAnimatedTranslations4 = new Animated.ValueXY();
    this.spaceAnimatedTranslations5 = new Animated.ValueXY();
    this.spaceAnimatedTranslations.addListener(value => (this.spaceAnimatedTranslations_value = value));
    this.spaceAnimatedTranslations2.addListener(value => (this.spaceAnimatedTranslations_value2 = value));
    this.spaceAnimatedTranslations3.addListener(value => (this.spaceAnimatedTranslations_value3 = value));
    this.spaceAnimatedTranslations4.addListener(value => (this.spaceAnimatedTranslations_value4 = value));
    this.spaceAnimatedTranslations5.addListener(value => (this.spaceAnimatedTranslations_value5 = value));
    this._animatedStyle = {transform: [{ translateX: this.spaceAnimatedTranslations.x }, { translateY: this.spaceAnimatedTranslations.y },],};
    this._animatedStyle2 = {transform: [{ translateX: this.spaceAnimatedTranslations2.x }, { translateY: this.spaceAnimatedTranslations2.y },],};
    this._animatedStyle3 = {transform: [{ translateX: this.spaceAnimatedTranslations3.x }, { translateY: this.spaceAnimatedTranslations3.y },],};
    this._animatedStyle4 = {transform: [{ translateX: this.spaceAnimatedTranslations4.x }, { translateY: this.spaceAnimatedTranslations4.y },],};
    this._animatedStyle5 = {transform: [{ translateX: this.spaceAnimatedTranslations5.x }, { translateY: this.spaceAnimatedTranslations5.y },],};
  }

  onSpaceMove(event) {
    let l_panTranslateX = event.nativeEvent.translationX;
    let l_panTranslateY = event.nativeEvent.translationY;
    let l_panStartX = event.nativeEvent.x - event.nativeEvent.translationX;
    let l_panStartY = event.nativeEvent.y - event.nativeEvent.translationY;

    let l_animationsArray = new Array();
    l_animationsArray.push(Animated.timing(this.spaceAnimatedTranslations.y, {toValue: event.nativeEvent.translationY,duration: 0,easing: Easing.linear,}));
    l_animationsArray.push(Animated.timing(this.spaceAnimatedTranslations2.y, {toValue: event.nativeEvent.translationY,duration: 0,easing: Easing.linear,}));
    l_animationsArray.push(Animated.timing(this.spaceAnimatedTranslations3.y, {toValue: event.nativeEvent.translationY,duration: 0,easing: Easing.linear,}));
    l_animationsArray.push(Animated.timing(this.spaceAnimatedTranslations4.y, {toValue: event.nativeEvent.translationY,duration: 0,easing: Easing.linear,}));
    l_animationsArray.push(Animated.timing(this.spaceAnimatedTranslations5.y, {toValue: event.nativeEvent.translationY,duration: 0,easing: Easing.linear,}));
    l_animationsArray.push(Animated.timing(this.spaceAnimatedTranslations.x, {toValue: event.nativeEvent.translationX,duration: 0,easing: Easing.linear,}));
    l_animationsArray.push(Animated.timing(this.spaceAnimatedTranslations2.x, {toValue: event.nativeEvent.translationX,duration: 0,easing: Easing.linear,}));
    l_animationsArray.push(Animated.timing(this.spaceAnimatedTranslations3.x, {toValue: event.nativeEvent.translationX,duration: 0,easing: Easing.linear,}));
    l_animationsArray.push(Animated.timing(this.spaceAnimatedTranslations4.x, {toValue: event.nativeEvent.translationX,duration: 0,easing: Easing.linear,}));
    l_animationsArray.push(Animated.timing(this.spaceAnimatedTranslations5.x, {toValue: event.nativeEvent.translationX,duration: 0,easing: Easing.linear,}));
    Animated.parallel(l_animationsArray).start();

    this.debug_message = `\n
      event.nativeEvent.translationX: ${Math.floor(
        event.nativeEvent.translationX
      )}
      event.nativeEvent.translationY: ${Math.floor(
        event.nativeEvent.translationY
      )}
      event.nativeEvent.absoluteX: ${Math.floor(event.nativeEvent.absoluteX)}
      event.nativeEvent.absoluteY: ${Math.floor(event.nativeEvent.absoluteY)}
      event.nativeEvent.x: ${Math.floor(event.nativeEvent.x)}
      event.nativeEvent.y: ${Math.floor(event.nativeEvent.y)}
      this.spaceAnimatedTranslations_value.x: ${Math.floor(
        this.spaceAnimatedTranslations_value.x
      )}
      this.spaceAnimatedTranslations_value.y: ${Math.floor(
        this.spaceAnimatedTranslations_value.y
      )}
      this.gestureStartedX: ${Math.floor(this.gestureStartedX)}
      this.gestureStartedY: ${Math.floor(this.gestureStartedY)}
        `;
    this.forceUpdate();
  }

  onSpaceMoveCompleted(event) {
    if (event.nativeEvent.state === State.BEGAN) {
      this.spaceAnimatedTranslations.flattenOffset();
      this.spaceAnimatedTranslations2.flattenOffset();
      this.spaceAnimatedTranslations3.flattenOffset();
      this.spaceAnimatedTranslations4.flattenOffset();
      this.spaceAnimatedTranslations5.flattenOffset();
      this.spaceAnimatedTranslations.setOffset({x: Math.floor(event.nativeEvent.absoluteX - c_initial_coordinate_left),y: Math.floor(event.nativeEvent.absoluteY - c_initial_coordinate_top),});
      this.spaceAnimatedTranslations2.setOffset({x: Math.floor(event.nativeEvent.absoluteX - c_initial_coordinate_left),y: Math.floor(event.nativeEvent.absoluteY - c_initial_coordinate_top),});
      this.spaceAnimatedTranslations3.setOffset({x: Math.floor(event.nativeEvent.absoluteX - c_initial_coordinate_left),y: Math.floor(event.nativeEvent.absoluteY - c_initial_coordinate_top),});
      this.spaceAnimatedTranslations4.setOffset({x: Math.floor(event.nativeEvent.absoluteX - c_initial_coordinate_left),y: Math.floor(event.nativeEvent.absoluteY - c_initial_coordinate_top),});
      this.spaceAnimatedTranslations5.setOffset({x: Math.floor(event.nativeEvent.absoluteX - c_initial_coordinate_left),y: Math.floor(event.nativeEvent.absoluteY - c_initial_coordinate_top ),});
      this.gestureStartedX = event.nativeEvent.absoluteX;
      this.gestureStartedY = event.nativeEvent.absoluteY;
    }
    if (event.nativeEvent.state === State.END) {
      this.onSpaceMove(event);
    }
  }

  render() {
    return (
      <ImageBackground source={backImg} style={{ flex: 1 }}>
        {this.debug_message ? (
          <Text style={{ color: 'white' }}>{this.debug_message}</Text>
        ) : (
          undefined
        )}

        <PanGestureHandler
          key={`test`}
          onGestureEvent={e => this.onSpaceMove(e)}
          onHandlerStateChange={e => this.onSpaceMoveCompleted(e)}>
          <Animated.View
            ref={ref => {
              this.testAnimatedView = ref;
            }}
            style={[styles._animatable_view, this._animatedStyle]}
            useNativeDriver={true}>
            <View style={styles._box_content}>
              <Text
                style={{
                  width: '100%',
                  height: '100%',
                  fontSize: 15,
                  textAlign: 'center',
                  textAlignVertical: 'center',
                  borderRadius: 20,
                }}
                editable={false}
                ref={ref => {
                  this.textInputRef = ref;
                }}
              >
              {'Master (1) (DRAG THIS ONE)'}
              </Text>
            </View>
          </Animated.View>
        </PanGestureHandler>
          <Animated.View
            ref={ref => {
              this.testAnimatedView2 = ref;
            }}
            style={[styles._animatable_view2, this._animatedStyle2]}
            useNativeDriver={true}>
            <View style={styles._box_content}>
              <Text
                style={{
                  width: '100%',
                  height: '100%',
                  fontSize: 15,
                  textAlign: 'center',
                  textAlignVertical: 'center',
                  borderRadius: 20,
                }}
                editable={false}
                ref={ref => {
                  this.textInputRef = ref;
                }}
              >
              {'Slave (2) '}
              </Text>
            </View>
          </Animated.View>
          <Animated.View
            ref={ref => {
              this.testAnimatedView3 = ref;
            }}
            style={[styles._animatable_view3, this._animatedStyle3]}
            useNativeDriver={true}>
            <View style={styles._box_content}>
              <Text
                style={{
                  width: '100%',
                  height: '100%',
                  fontSize: 15,
                  textAlign: 'center',
                  textAlignVertical: 'center',
                  borderRadius: 20,
                }}
                editable={false}
                ref={ref => {
                  this.textInputRef = ref;
                }}
              >
              {'Slave (3) '}
              </Text>
            </View>
          </Animated.View>
          <Animated.View
            ref={ref => {
              this.testAnimatedView4 = ref;
            }}
            style={[styles._animatable_view4, this._animatedStyle4]}
            useNativeDriver={true}>
            <View style={styles._box_content}>
              <Text
                style={{
                  width: '100%',
                  height: '100%',
                  fontSize: 15,
                  textAlign: 'center',
                  textAlignVertical: 'center',
                  borderRadius: 20,
                }}
                editable={false}
                ref={ref => {
                  this.textInputRef = ref;
                }}
              >
              {'Slave (4) '}
              </Text>
            </View>
          </Animated.View>
          <Animated.View
            ref={ref => {
              this.testAnimatedView5 = ref;
            }}
            style={[styles._animatable_view5, this._animatedStyle5]}
            useNativeDriver={true}>
            <View style={styles._box_content}>
              <Text
                style={{
                  width: '100%',
                  height: '100%',
                  fontSize: 15,
                  textAlign: 'center',
                  textAlignVertical: 'center',
                  borderRadius: 20,
                }}
                editable={false}
                ref={ref => {
                  this.textInputRef = ref;
                }}
              >
              {'Slave (5) '}
              </Text>
            </View>
          </Animated.View>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  _animatable_view: {
    flex: 1,
    width: 250,
    height: 50,
    top: c_initial_coordinate_top,
    left: c_initial_coordinate_left,
    position: 'absolute',
    backgroundColor: '#ABC',
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'gainsboro',
    borderWidth: 2,
  },
  _animatable_view2: {
    flex: 1,
    width: 250,
    height: 50,
    top: c_initial_coordinate_top + 100,
    left: c_initial_coordinate_left,
    position: 'absolute',
    backgroundColor: '#ABC',
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'gainsboro',
    borderWidth: 2,
  },
  _animatable_view3: {
    flex: 1,
    width: 250,
    height: 50,
    top: c_initial_coordinate_top + 200,
    left: c_initial_coordinate_left,
    position: 'absolute',
    backgroundColor: '#ABC',
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'gainsboro',
    borderWidth: 2,
  },
  _animatable_view4: {
    flex: 1,
    width: 250,
    height: 50,
    top: c_initial_coordinate_top + 300,
    left: c_initial_coordinate_left,
    position: 'absolute',
    backgroundColor: '#ABC',
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'gainsboro',
    borderWidth: 2,
  },
  _animatable_view5: {
    flex: 1,
    width: 250,
    height: 50,
    top: c_initial_coordinate_top + 400,
    left: c_initial_coordinate_left,
    position: 'absolute',
    backgroundColor: '#ABC',
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'gainsboro',
    borderWidth: 2,
  },
  _box_content: {
    flex: 1,
    height: '100%',
    width: '100%',
    borderRadius: Math.min(this.rectangleHeight, this.rectangleWidth) / 2,
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'gainsboro',
    borderWidth: 2,
    opacity: 0.9,
  },
});

这可以从以下小吃中看到：https://snack.expo.io/@mehmetkaplan/movetextwithgesturesingle

此外，为了感觉到性能问题，我制作了另一种点心，它简单地同时为5个对象设置了动画。如果您通过低端Android设备运行此命令，则会感觉到性能问题：https://snack.expo.io/@mehmetkaplan/movetextwithgesturemulti

Answer 1

我还要补充一点，useNativeDriver是不一项添加到组件中的道具！这里useNativeDriver={true}的使用完全没有！从docs本身开始，{NatDriver}的正确用法就在Animated.[function]中。使用上面的代码，可以在此处找到正确的用法：

Animated.timing(this.spaceAnimatedTranslations5.x, {
    toValue: event.nativeEvent.translationX,
    duration: 0,
    easing: Easing.linear
})

您需要将其添加为第二个参数中的另一个选项，作为options对象的属性。

Animated.timing([Animated Value], {options})

Animated.timing(this.spaceAnimatedTranslations5.x, {
    toValue: event.nativeEvent.translationX,
    duration: 0,
    easing: Easing.linear,
    useNativeDriver: true
})

可以与之配合使用的其他动画功能包括：Animated.event或Animated.interpolate。

动画处理非常繁重，因此请确保在任何可能的地方（只要适用）都使用useNativeDriver。

Answer 2

对于未来的访客：

我想出了2种方法，但是对于低端手机而言，性能仍然不能令人满意：

1. 该代码实际上不需要5个不同的动画，因此只有import moment from 'react-moment'; let dayOfToday = getDayFromDate(bookingDate) + " " + `${timeSlot.end}`; //2019-20-10 10:00 AM // let dateBooking = new Date(dayOfToday); // this function works in simulator but in device i am getting invalid date let dateBooking = moment(dayOfToday).format('YYYY-MM-DD HH:mm A'); 被压入了动画数组。

2. 另一种方法是，如果希望对象立即跟随拖动，则实际上不需要使用动画。通过this.spaceAnimatedTranslations直接更新值更合乎逻辑。可以在this snack中看到该代码。

对于项目2，更改在这里：

.setValue