Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve useAnimationController hook #204

Open
esDotDev opened this issue Dec 21, 2020 · 2 comments
Open

Improve useAnimationController hook #204

esDotDev opened this issue Dec 21, 2020 · 2 comments
Assignees
Labels
enhancement New feature or request

Comments

@esDotDev
Copy link

esDotDev commented Dec 21, 2020

useAnimationController would be more useful if it included:

  • Ability to auto-play forward or back, or a callback that lets us kick off the animation
  • Ability to delay the autoplay
  • Ability to automatically rebuild on tick

Currently because AnimController does not have this we have to often use an "imperitive escape-hatch" of useEffect to start our animations, and add extra lines of boilerplate to tick our widgets:

final anim1 = useAnimationController(duration: 1.seconds);
useListenable(anim1);
final anim2 = useAnimationController(duration: 2.seconds);
useListenable(anim2);
useEffect(() {
  anim1.forward();
  Future.delayed(1.seconds, () => anim2.forward());
  return null;
}, []);

This could better be represented declaritively as:

final anim1 = useAnimationController(
  onStart: (c) => c.forward(), 
  useListener: true, 
  duration: 1.seconds);

final anim2 = useAnimationController(
  onStart: (c) => c.forward(), 
  startDelay: 1.seconds, 
  useListener: true, 
  duration: 2.seconds);
@esDotDev esDotDev added enhancement New feature or request needs triage labels Dec 21, 2020
@rrousselGit
Copy link
Owner

I don't think that's the role of useAnimationController.

Instead we probably want a useTweenAnimation that behaves like TweenAnimationBuilder but as a hook

@esDotDev
Copy link
Author

esDotDev commented Jan 7, 2021

I worry that TAB is not imperative enough. This is a use case situation where we want to use AC for its flexibility, but also kick it off when we first load.

In other word TAB works great when you want to initially play something, but you are then forced into continuous animation, no ability to do from: 0 or whatever you need, so it's very limited in the roles it can play for dynamic animation.

The main goal to this proposal is to just more fully flesh out the declarative syntax for AC, so we're not forced into imperative and less readable useEffect hooks anytime we want to delay the start, or auto-play. It's not changing the role, it's just cleaning up syntax and making the use of imperative calls less common.

Unless you're thinking a TAB style hook, that still has forward() calls etc? That would definitely work fine.

@rrousselGit rrousselGit self-assigned this May 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants