Question

我有一个项目列表（每个项目都来自一个图像），我想依次增加每个项目的大小。因此，我依次使用每个项目的索引触发一个动作。只要当前项看到操作中触发的索引也是它自己的，它就会启动一个增加其大小的动画。

render()

在我的animatedValue方法中，我根据const animatedStyle = {width: 0.5 * this.props.dimensions.windowWidth * parseInt(JSON.stringify(this.animatedValue)), height: 0.5 * this.props.dimensions.windowHeight * parseInt(JSON.stringify(this.animatedValue))};调整高度和宽度。

render()

我将从<View> <Animated.Image source={{uri: this.props.imageUrl}} style={[this.getImageStyle(), animatedStyle]}> </Animated.Image> </View>返回此内容：

this.animatedValue

this.animatedValue = new Animated.Value(1);在构造函数中初始化，如下所示：

"STARTING ANIMATION!!!"

问题是图像的大小没有增加（即使打印componentWillReceiveProps，这意味着控件达到$arraya = array( 1 => array("impuesto" => "recaudacion"), 3 => array("impuesto" => "Contribuyentes Convenio Multilateral"), 4 => array("impuesto" => "Regimen General de Retencion") ); $arrayb = array( "recaudacion" => array(9 => "2017-10-07"), "Contribuyentes Convenio Multilateral" => array(9 => "2017-10-13"), "Contribuyentes Locales,Activid. Especiales y Salas de Recreacion" => array(9 => "2017-10-16") ); echo "<pre>\n"; echo "ARRAY A\n"; print_r($arraya); echo "\nARRAY B\n"; print_r($arrayb); # filter $result = array(); foreach ($arraya as $key => $value) { $impuesto_value = "$value[impuesto]"; if (array_key_exists($impuesto_value, $arrayb)) { $result[$impuesto_value] = $arrayb[$impuesto_value]; } } echo "\nRESULT ARRAY\n"; print_r($result); echo "</pre>\n";）。

知道动画没有发生的原因吗？

Answer 1

你不能使用像简单基元那样的动画值，因为它们是随着时间的推移包装异步变化的对象。当然这个技巧：parseInt(JSON.stringify(this.animatedValue))有效，但不会不断改变所有相关的计算。

来自官方文件：

动画导出四种可动画的组件类型：视图，文本，图像

所以你必须将Animated.Value直接传递给可动画的组件。

<Animated.Image
    style={{
      width: this.animatedValueWidth
    }}
  />;

根据道具将所需宽度和高度的计算移动到componentWillRecieveProps Animated.timing开始的位置：

Animated.timing(this.animatedValueWidth, {
  toValue: 1.5 * nextProps.dimensions.windowWidth

此外，您必须将宽度和高度分隔为不同的动画值，然后将这两个动画与Animated.parallel连接起来。他是基于你的代码的完全工作的例子：

  class AnimateImage extends React.Component {
    getImageStyle = () => ({});

    constructor(props) {
      super(props);
      this.animatedValueWidth = new Animated.Value(0);
      this.animatedValueHeight = new Animated.Value(0);
    }

    componentWillReceiveProps({
      dimensions: { windowWidth, windowHeight } = {}
    }) {
      console.log("STARTING ANIMATION!!!");
      Animated.parallel([
        Animated.timing(this.animatedValueWidth, {
          toValue: 1.5 * windowWidth,
          duration: 1000
        }).start(),

        Animated.timing(this.animatedValueHeight, {
          toValue: 1.5 * windowHeight,
          duration: 1000
        }).start()
      ]);
    }

    render() {
      const animatedStyle = {
        width: this.animatedValueWidth,
        height: this.animatedValueHeight
      };
      return (
        <View>
          <Animated.Image
            source={{ uri: this.props.imageUrl }}
            style={[this.getImageStyle(), animatedStyle]}
          />
        </View>
      );
    }
  }

  export default class App extends React.Component {
    render() {
      return (
        <AnimateImage
          imageUrl={
            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=="
          }
          dimensions={{
            windowWidth: 300,
            windowHeight: 300
          }}
        />
      );
    }
  }

请注意，使用Animated.Image时出错，应该是自动关闭标记：

<Animated.Image
  source={{uri: this.props.imageUrl}}
  style={[this.getImageStyle(), animatedStyle]}>
/>

收到新属性时，动画未启动

1 个答案: