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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animation: Implement 'Hooks.transition' hook #625

Merged
merged 8 commits into from
Nov 2, 2019
Merged

Conversation

Et7f3
Copy link
Member

@Et7f3 Et7f3 commented Oct 31, 2019

fix #121
We call it like Hooks.state
https://github.com/revery-ui/revery/blob/Et7f3/useTransition/examples/Hello.re#L11-L12 and it return a setter
https://github.com/revery-ui/revery/blob/Et7f3/useTransition/examples/Hello.re#L85
I have added some

      Printf.printf("transitionedOpacity: %f\n", transitionedOpacity);
      flush(stdout);

because opacity is a no-op on my windows (didn't try on other os)
If we have more hooks maybe add a Hooks demo for them.

Also It miss the last update. 馃槩

Copy link
Member

@glennsl glennsl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks awesome! Opacity doesn't seem to work on Linux either, but I think that might just be on the image. It should work for simpler primitives. At least it does in Oni2.

I noticed from the logging that it never reaches 0.0 and 1.0 though.

examples/Hello.re Outdated Show resolved Hide resolved
src/UI_Hooks/Animation.rei Outdated Show resolved Hide resolved

let transition =
(toValue, ~delay=Time.Seconds(0.0), ~duration=Time.Seconds(1.), slots) => {
let repeat = false;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like unnecessary indirection. IMO, at least, it would be clearer to just set ~repeat=false directly.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I use it two time 馃し鈥嶁檪 but yeah I agree.

src/UI_Hooks/Transition.re Outdated Show resolved Hide resolved
src/UI_Hooks/Transition.re Outdated Show resolved Hide resolved
@Et7f3
Copy link
Member Author

Et7f3 commented Nov 1, 2019

Also It miss the last update. 馃槩

Now I explicitly set the value when the animation end: b5485f0#diff-cd777f7799e2787af430fc84ce54bf45R22. Maybe there is a cleaner way. Ihave tried with reducer like animation hook and it don't helped.

Copy link
Member

@glennsl glennsl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like the animation API could and ought to be tightened up quite significantly to provide a cleaner API, but I think that's a bit out of scope for this PR. Otherwise, except for the animation' hook, I think this is looking very nice now.

@zbaylin
Copy link
Member

zbaylin commented Nov 1, 2019

This is awesome and solves a lot of the a-functionality the current API uses (partly my fault 馃槰). One thing I might add would be an immediate parameter to the setX function, i.e. setOpacity(~immediate=true, 1.0).

Also, I know it's just convention, but it might make more sense to use the name transitionXTo (i.e. transitionOpacityTo(1.0)) rather than setX, which sounds more immediate.

I really hope this can get merged soon, because it will help a lot with my efforts on revery-material.

Great work @Et7f3 !!

@bryphe
Copy link
Member

bryphe commented Nov 2, 2019

Awesome work @Et7f3 ! (and thanks @glennsl and @zbaylin for reviewing it!)

Such a nice primitive to have now 馃帀

@Et7f3 Et7f3 merged commit 40ff5e4 into master Nov 2, 2019
@Et7f3 Et7f3 deleted the Et7f3/useTransition branch November 2, 2019 17:35
@Et7f3 Et7f3 restored the Et7f3/useTransition branch November 2, 2019 19:29
@Et7f3 Et7f3 deleted the Et7f3/useTransition branch November 2, 2019 20:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Animation: Implement 'Hooks.transition' hook
4 participants