Set animation progress

[jeffreyabarrios]

Hello! Just wondering if there was a way to set the animation progress, for example im going to use an animation in a button that keeps a state, so for example if the state is true, I need to set the animation to the end once the page loads. Like a favorite button, if something is already favorite, when the page loads, the button animation needs to be at the end.

Also, anyway to reset the animation to the initial frame as well?

Thank you!

[chenqingspring]

you may need this?

[KjellConnelly]

@chenqingspring Thanks for working on this module :) Could you setup a way to set the animation progress as an Animated.Value, similar to how it is done with Lottie-React-Native?

http://airbnb.io/lottie/react-native/react-native.html#getting-started

import React from 'react';
import { Animated } from 'react-native';
import LottieView from 'lottie-react-native';

export default class BasicExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: new Animated.Value(0),
    };
  }

  componentDidMount() {
    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 5000,
    }).start();
  }

  render() {
    return (
      <LottieView source={require('../path/to/animation.json')} progress={this.state.progress} />
    );
  }
}

I get how you fixed this guy's issue, making an animation being able to be binary (start of animation or end of animation), but there seems to be no way to stop it in-between or travel to a certain progress. For instance, what about a 3 button component? Or an animation that goes in different directions depending on user interaction.

[chenqingspring]

@KjellConnelly Thanks for issuing and suggestion.

I'll think about it and try with your suggestion, when I have time (a little busy recently...)

And PR is also welcomed :)

[mstrugo]

Hi! I need some like this. I have one button with two animations. If the API returns 200, the button go Green, otherwise turns Red with a Cross animated...

Could you please add support to segmentStart and playSegments([ [initVal, finalVal] ], true) ???

Thank you in advance, this package is awesome! :smiley:

(and sorry for my poor english!)

[felippenardi]

@chenqingspring I'm doing a Talk in Brazil about your library in a 1k atendees event. This feature right here would come really in handy!

[KjellConnelly]

The pressure is real ;)

[fundrequestbot]

This issue has been funded using FundRequest. A developer can claim the reward by submitting a pull request referencing this issue. (How to Close Issues via Pull Requests?) e.g. fixes #11

• For more help on how to claim on issue, please visit our help section.
• Looking for more? Feel free to browse through all funded requests.

[felippenardi]

I've implemented forceFlag for animations on this fork: http://github.com/felippenardi/lottie-react-web

You can do

<Lottie
    segments={[...]}
    forceSegments={true}
/>

Let me know if it solves your problem and if you'd like something else on a new issue there.

[ajcper]

I've implemented forceFlag for animations on this fork: http://github.com/felippenardi/lottie-react-web

You can do

<Lottie
  segments={[...]}
  forceSegments={true}
/>

Let me know if it solves your problem and if you'd like something else on a new issue there.

I've tried this with a Lottie animation, but I couldn't get it to work? Could you perhaps provide a functioning example please?

[SilverFox70]

I also have a fork with the full functionality of lottie-web's playSegments function available: https://www.npmjs.com/package/react-lottie-segments

[heekyu-pu]

you may need this?

Hello, I have a question! @chenqingspring Do you have a link to the source code implementation for this demo?