新しいプロパティが受信されたときにアニメーションが開始されない

Question

アイテムのリスト（それぞれがイメージから作成されています）があり、それぞれのサイズを順番に増やしたいと思います。したがって、私は順番に各アイテムのインデックスでアクションを開始しています。現在のアイテムでは、アクションで発生したインデックスも独自のものであるとみなされるたびに、サイズを大きくするアニメーションが開始されます。私render()方法で

componentWillReceiveProps(nextProps) { 
    if(nextProps.index == this.props.ordinalNumber) { 
     console.log("STARTING ANIMATION!!!"); 
     Animated.timing(this.animatedValue, { 
      toValue: 1.5, 
      duration: 1000 
     }).start(); 
    } 
} 

、私は高さと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に達することを意味します）。

なぜアニメーションが発生しないのでしょうか？

Answer 1

単純なプリミティブのようなアニメーション値は、時間の経過とともに非同期の変更をラップするオブジェクトであるため使用できません。もちろん、このトリック：parseInt(JSON.stringify(this.animatedValue))は機能しますが、関連するすべての計算は絶えず変更されません。

公式ドキュメントから：

アニメーションは4つのアニメートコンポーネントタイプをエクスポート：表示、テキスト、画像

は、だから、アニメーション可能コンポーネントに直接Animated.Valueを渡す必要があります。

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

そしてAnimated.timing開始componentWillRecievePropsに小道具に基づいて所望の幅と高さの計算を移動：

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

はまた、あなたが別のアニメーション値にとの両方に参加するよりも、幅と高さを分離する必要がありますアニメーションはAnimated.parallelです。 彼は怒鳴るあなたのコードに基づいて完全に動作する例である再：

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

：あなたは Animated.Imageを使用してのエラーを持っている

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 
      }} 
     /> 
    ); 
    } 
    } 

注意、それは自動終了タグでなければなりません