Question: Controlling animation state within a button
See original GitHub issueFirst of all, THANK YOU for creating this 😃 Super easy to plug into my react app and get lottie-ing 😃
Just wondering how best to implement a clickable ‘like’ button like the twitter example. Most things I see are all loops and i’m unsure how to get the animation to pause/stop.
I thought what i could do was start with loop: false, autoplay: false
and my initial state isStopped: true
. Then onClick:
basically just set isStopped
to false as well, so that way the heart would go from grey to pink, then stop.
The tricky bit next was how to either a) ‘reset’ it back to frame 1 or b) reverse the direction of the animation and play in reverse til it hits frame 1.
Any ideas?
Secondly, the documentation on the bodymovin repo for direction
is a little vague, but from looking at your source code am i correct in assuming that -1
is reverse?
I have a rough sketch here,
export default class LottieControl extends React.Component {
constructor(props) {
super(props);
this.state = { isPaused: true, isLiked: false };
}
handleClick = () => {
const { isLiked } = this.state;
if (!isLiked) {
this.setState({ direction: 1, isPaused: false, isLiked: true });
} else {
this.setState({ direction: -1, isPaused: false, isLiked: false });
}
};
render() {
const buttonStyle = {
display: 'block',
};
const defaultOptions = {
loop: false,
autoplay: false,
animationData: animationData,
direction: this.state.direction || 1,
};
return (
<div>
<button style={buttonStyle} onClick={this.handleClick}>
<Lottie
options={defaultOptions}
height={100}
width={100}
isPaused={this.state.isPaused}
/>
</button>
</div>
);
}
}
Issue Analytics
- State:
- Created 6 years ago
- Comments:7 (3 by maintainers)
@chenqingspring How can I see the code behind the toggle example? The link show me only the animation.
I need to clarify your requirement, do you want to toggle your
like button
like this?If so, I suggest you to use direction toggle with setting
loop & autoplay to false
and initisStopped to true
then, bind this clickHandler to your button