0 Replies - 986 Views - Last Post: 16 May 2018 - 06:29 PM

#1 MrIngram   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 16-May 18

React Native - How would I go about playing an animation uniquely?

Posted 16 May 2018 - 06:29 PM

Hello, I have been working ways to figure this problem out. The way I have my code set up is that I have animations in a flatlist and it has created a single animation for how ever many data I have. For example, my JSON data contains 8 categories, my flatlist automatically contains 8 animations. Here is my code:

<FlatList

       data={ this.state.dataSource}

       ItemSeparatorComponent = {this.FlatListItemSeparator}


       renderItem={({item}) => <View>


       <Card>




         <View>
         <TouchableOpacity
         onPress={this.anim_star.bind(this, item.id)}
          style={{position:'absolute',  height: '100%', width: '100%',}}>
          <Animation
          progress={this.state.progress[item.id]}
          source={require('../Animations/favourite_app_icon.json')}
          style={{ height: '100%', width: '100%', position: 'absolute'}}
          resizeMode={`contain`}

          />
          </TouchableOpacity>



         </View>

       </Card>


       </View>


     }

     keyExtractor={(item, index) => index.toString()}
     removeClippedSubviews

  />


Right here, I have trying to give those animations a unique id (item.id).
Here is the function I used for binding:

anim_star = (id) => {

  let progress = this.state.progress;
  progress[id] = new Animated.Value(0);

    this.setState({ progress });
console.log(this.state.progress);
  Animated.timing(this.state.progress, {
    toValue: 1,
    duration: 2000,
    easing: Easing.linear,
  }).start();

}


I did a console.log to see my results and I can see the correct id being displayed, but I don't think it's corresponding correctly. The animation does not play at all. When I take off the [item.id] in the progress=this.state.progress, the animation works, but every animation in that flatlist plays.

Here is my console results:
https://imgur.com/a/7Ja3Tlk


And lastly here are what the constructors look like:

 constructor(props)
{
  super(props);

  this.state = {
  isLoading: true,
  id: '',
  dataSource: '',
  progress: {}, 
};


Also to note, when all animations did play I console logged those results and noticed that the _children array have [AnimatedProps] and I think that is what triggers the animation.

https://imgur.com/a/9a3VPZa

The array(8) represents all the data that have animations triggered. The reason why the 10 is still there is because I didn't remove:
let progress = this.state.progress;
  progress[id] = new Animated.Value(0);


I tried searching for some answers similar to my problem, but I could not find a single solution. Is there a way to play animations uniquely?

Is This A Good Question/Topic? 0
  • +

Page 1 of 1