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

[Shared Element Transition] Animation restart #4043

Merged
merged 29 commits into from
Feb 17, 2023

Conversation

piaskowyk
Copy link
Member

@piaskowyk piaskowyk commented Feb 10, 2023

Summary

This change allows restarting of animation in two cases:

  • when someone changes the current screen during transition animation
  • when an update of layout comes for shared view during the transition animation

Known limitation: If the parent of shared view updates owns the layout during the shared transition it doesn't affect for shared view layout. This issue will be fixed in the future.

@jwajgelt jwajgelt changed the title [Shared Element Transition] Aniamtion restart [Shared Element Transition] Animation restart Feb 10, 2023
@piaskowyk piaskowyk marked this pull request as ready for review February 16, 2023 10:19
@piaskowyk piaskowyk requested a review from tomekzaw February 16, 2023 10:19
ios/native/NativeProxy.mm Outdated Show resolved Hide resolved
ios/native/NativeProxy.mm Outdated Show resolved Hide resolved
ios/native/NativeProxy.mm Outdated Show resolved Hide resolved
ios/LayoutReanimation/REASharedTransitionManager.m Outdated Show resolved Hide resolved
ios/LayoutReanimation/REASharedTransitionManager.m Outdated Show resolved Hide resolved
android/src/main/cpp/NativeProxy.cpp Outdated Show resolved Hide resolved
@piaskowyk piaskowyk requested a review from tomekzaw February 16, 2023 14:00
@@ -53,7 +53,8 @@ export class SharedTransition implements ILayoutAnimationBuilder {
const keyToTargetValue =
'target' + propName.charAt(0).toUpperCase() + propName.slice(1);
animations[propName] = withTiming(values[keyToTargetValue], {
duration: 1000,
// native screen transition takes around 500ms
duration: 500,
Copy link
Member

Choose a reason for hiding this comment

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

I think it's 350 ms to be exact (source) but 500 ms is okay as well

Copy link
Member Author

@piaskowyk piaskowyk Feb 16, 2023

Choose a reason for hiding this comment

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

I set 500 ms because, in my subjective opinion, the transition with a 500 ms duration looks much better than animation with a 350 ms duration, but like I said. This is my subjective opinion. I think we should allow for users to determine the default transition duration. We should do it in another PR.

ios/LayoutReanimation/REAAnimationsManager.m Show resolved Hide resolved
Common/cpp/LayoutAnimations/LayoutAnimationsManager.cpp Outdated Show resolved Hide resolved
@piaskowyk piaskowyk requested a review from tomekzaw February 16, 2023 17:28
Copy link
Member

@tomekzaw tomekzaw left a comment

Choose a reason for hiding this comment

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

Looks good to me, haven't tested it in the Example app though.

@piaskowyk piaskowyk added this pull request to the merge queue Feb 17, 2023
Merged via the queue into main with commit 5bcc258 Feb 17, 2023
@piaskowyk piaskowyk deleted the @piaskowyk/SET-rerun-animation branch February 17, 2023 12:16
piaskowyk added a commit that referenced this pull request Feb 24, 2023
In #4043 I changed the restarting animation logic in
`animationManager.ts`. Accidentally I removed restarting animation for
the rest of the Layout Animations. Fortunately, I found a better way to
handle restart animation for both LA and SET animations types.
fluiddot pushed a commit to wordpress-mobile/react-native-reanimated that referenced this pull request Jun 5, 2023
## Summary

This change allows restarting of animation in two cases:
- when someone changes the current screen during transition animation
- when an update of layout comes for shared view during the transition
animation

**Known limitation**: If the parent of shared view updates owns the
layout during the shared transition it doesn't affect for shared view
layout. This issue will be fixed in the future.
fluiddot pushed a commit to wordpress-mobile/react-native-reanimated that referenced this pull request Jun 5, 2023
In software-mansion#4043 I changed the restarting animation logic in
`animationManager.ts`. Accidentally I removed restarting animation for
the rest of the Layout Animations. Fortunately, I found a better way to
handle restart animation for both LA and SET animations types.
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.

2 participants