javascript - 如何修复 React-Native 动画以仅对 "this"组件进行动画处理

Question

我在井字游戏中有一个 Tile 类。我的目标是为图 block 内容的外观设置动画，并且只为最近按下的图 block 的外观设置动画。我的问题有两个:1:动画仅适用于第一次压砖机，并非每次都有效2:动画影响所有的方 block

编辑:添加 value.setValue(0);至 useEffect()每次按下重置动画值。剩下的唯一问题是，所有 Tile 组件在每次按下时都会显示动画，而我只希望 <Tile> 有动画。谁的组件 props.contents变了。

如果我改为输入 Animated.timing内部功能 onSelection ，那么只有按下的动画会按预期进行，但由于这是通过套接字连接进行的，因此两个客户端的磁贴都需要动画，在这种情况下，只有按下磁贴的客户端才能看到动画。 (因为动画功能不再在useEffect()中)

编辑 2:尝试更改 useEffect()包括依赖数组和条件语句，以及仅包含 https://reactjs.org/docs/hooks-effect.html 中引用的依赖数组

瓷砖.js

import React, { useEffect, useState } from "react";
import SocketContext from "../socket-context";
import { View, Animated, TouchableOpacity } from "react-native";
import styles from "../assets/styles/main-style";

function Tile(props) {
  function onSelection(row, col, socket) {
    props.onSelection(row, col, socket);
  }
  let [value] = useState(new Animated.Value(0));

  // useEffect(() => {
  //  value.setValue(0);
  //  Animated.timing(value, {
  //    toValue: 100,
  //    duration: 10000,
  //    useNativeDriver: true
  //  }).start();
  // });

  (EDIT 2-a):
   useEffect(() => {
    if (props.contents !== {marker: null}) {
      return
    } else {
     value.setValue(0);
     Animated.timing(value, {
       toValue: 100,
       duration: 10000,
       useNativeDriver: true
     }).start();
    }
   }, [props.contents]);

  (EDIT 2-b):
   useEffect(() => {
     value.setValue(0);
     Animated.timing(value, {
       toValue: 100,
       duration: 10000,
       useNativeDriver: true
     }).start();
   }, [props.contents]);

  let animated_opacity = value.interpolate({
    inputRange: [0, 100],
    outputRange: [0.0, 1.0]
  });

  let animated_rotation = value.interpolate({
    inputRange: [0, 50, 100],
    outputRange: ["0deg", "180deg", "360deg"]
  });

  return (
    <SocketContext.Consumer>
      {socket => (
        <View style={styles.grid_cell}>
          <TouchableOpacity
            style={styles.cell_touchable}
            onPress={() => onSelection(props.row, props.col, socket)}
          >
            <Animated.Text
              style={{
                fontFamily: "BungeeInline-Regular",
                fontSize: 65,
                textAlign: "center",
                color: "#fff",
                opacity: animated_opacity,
                transform: [{ rotateX: animated_rotation }]
              }}
            >
              {props.contents.marker}
            </Animated.Text>
          </TouchableOpacity>
        </View>
      )}
    </SocketContext.Consumer>
  );
}

export default Tile;

在 Grid.js 中如何使用 Tile

import React from "react";
import { View } from "react-native";
import Tile from "../components/Tile";
import styles from "../assets/styles/main-style";

function Grid(props) {
  function onGridSelection(row, col, socket) {
    props.onGridSelection(row, col, socket);
  }

  const grid = props.grid.map((rowEl, row) => {
    const cells = rowEl.map((cellEl, col) => {
      return (
        <Tile
          row={row}
          col={col}
          contents={cellEl}
          onSelection={onGridSelection}
        />

      );
    });
    return (
      <View style={styles.grid_row} key={row}>
        {cells}
      </View>
    );
  });
  return <View style={styles.grid}>{grid}</View>;
}

export default Grid;

我的目标是让动画在 Tile 的 props.contents 时运行。每次按下一个图 block 时都会更改，并且仅该图 block 。我不确定是否每次按下新图 block 时都会重新渲染整个网格 ( props.grid)，这是否以某种方式创建了这个不需要的功能。

但是，动画仅在第一次压砖时运行。它针对棋盘上的每个图 block 运行(我知道这一点是因为我遇到一个问题，即以前的游戏内存泄漏到新游戏中 ~ 一个单独的问题)

Answer 1

现在你的 useEffect 在每个渲染器上运行，因为它没有任何依赖项作为第二个参数提供。另一个问题是跳过第一次渲染时的效果。

如果 tile contents marker 的初始值为 null 那么你可以用类似的方法解决这个问题:

  useEffect(() => {
    // exit early if the Tile contents are the initial content values
    // which means the animation shouldn't run
    if (props.contents.marker === null) {
      return;
    }
    value.setValue(0);
    Animated.timing(value, {
      toValue: 100,
      duration: 10000,
      useNativeDriver: true
    }).start();
  // note the addition of the dependency array here so this effect only runs
  // when props.contents.marker changes
  }, [props.contents.marker]);

参见 https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects有关 useEffect 的第二个参数的更多信息。