[ad_1]
Discover ways to use AnimatedContent for extra customized transitions between several types of content material
Are you switching between completely different composables and anxious concerning the jarring impact when customers immediately see adjustments on display, with out having a swish transition between the 2? Nicely look no additional! AnimatedContent (presently experimental) is a composable that lets you transition between completely different composables with a smoother and extra customized transition impact. By default, wrapping your altering composables in AnimatedContent, will fade and scale your content material out and in. This could make a giant distinction to the appear and feel of your app, with out a lot effort.
Let’s check out a easy instance, within the Jetsurvey app, we’ve a conditional that switches between both the outcomes of the survey, or the questions contained in the survey itself:
Operating this, we will observe the state change transition isn’t as clean as we wish it to be:
If we wrap the when assertion in AnimatedContent, passing within the new state as targetState, we will get a significantly better transition between these two screens fairly simply:
Contained in the AnimatedContent lambda, it’s essential to make use of targetState parameter and never the state parameter, as it will make sure the animation runs easily when it must shortly change between completely different states. Operating this, we will see there’s a huge enchancment within the transition between the 2 composables (slowed to 0.25x):
Let’s customise this transition a bit extra, by utilizing the elective transitionSpec parameter that may be discovered on the AnimatedContent composable. By default, the transitionSpec will carry out a custom-made fade and scale of the content material for the enter and exit transitions. To make it a bit extra customized, let’s change the brand new content material to slideInVertically from the underside and fadeOut earlier content material.
The slideInVertically operate takes in an initialOffsetY operate. This can be a operate that can resolve the place the place to begin the animation from. On this case, we return an initialOffsetY of fullHeight of the content material. This implies the animation will begin with an offset set on the backside of the display (on the fullHeight). It may appear a bit complicated, however the coordinate system when drawing in Android, begins with the [0,0] level on the high left nook of the content material, so the coordinate [0, fullHeight] is on the backside of the content material. We are able to additionally specify the animationSpec (tween, spring and many others.) on these transition capabilities to customise the period or kind of animation. Let’s see what this now seems like:
That appears quite a bit higher! The content material slides in from the underside, and the outgoing content material fades out. To see what different choices can be found for customizing the transition, see the EnterTransition and ExitTransition documentation.
One other instance implementation of utilizing AnimatedContent is when transitioning between completely different questions within the set. Beforehand the content material would change with out animation as follows:
By wrapping the Query composable in AnimatedContent, we are going to get the default transition on the query transition:
To make this transition even higher, we will slide the earlier questions out to the left of the display and new questions in from the precise. Let’s specify the transitionSpec as proven earlier:
That is nice for going forwards in our survey, the content material slides in as anticipated. However you might discover, if we click on the earlier button the animation doesn’t make a lot sense because it exits the display from the wrong path:
We’d like it to invert the animation and slide the “new” content material from the left in, and the previous content material out to the precise. To do that, we will develop on how we’re utilizing transitionSpec. This has AnimatedContentScope as a receiver, giving us the power to look at or entry the initialState and the targetState. This enables us to conditionally change our logic primarily based on the completely different states:
We are able to verify the targetState.questionIndex and evaluate it with the initialState.questionIndex, if the goal.questionIndex is larger, we all know we’re shifting ahead within the survey. We then set the animation to slideInHorizontally with a begin offset of the width of the content material and slideOutHorizontally to the detrimental width of the content material. If the targetState.questionIndex is much less, we all know we’re shifting backwards within the survey. We are able to then set the alternative of what going ahead used: -fullWidth for sliding in, and fullWidth for sliding out:
We now have a significantly better animation for going ahead and backwards:
There’s a helper methodology, slideIntoContainer, that can be used to attain sliding animations from sure instructions, while not having to determine the preliminary offset required. slideIntoContainer(in direction of = AnimatedContentScope.SlideDirection.Up) can exchange our usages of slideInHorizontally and slideOutHorizontally. The distinction between the slideIntoContainer and slideIn/OutHorizontally/Vertically is that slideIntoContainer/slideOutOfContainer use the container dimension because the preliminary/goal offset. That is significantly helpful when the scale of the container adjustments as a consequence of SizeTransform because it slides in or out.
One other property that may be custom-made is the targetContentZIndex on AnimatedContent. The targetContentZIndex specifies how composables will stack on high of each other. The upper the zIndex, the additional to the highest of the stack the composable will seem. Utilizing the identical instance above, we may customise the animation to make it appear to be a paper stacking impact:
We set the targetContentZIndex to the questionIndex as this quantity can be greater the additional alongside within the survey we go. This might produce the next animation:
AnimatedContent additionally supplies the power to customise the animation for the container dimension change, by specifying a SizeTransform, we will regulate how the scale change can be animated. For instance, trying on the Crane pattern app:
If we add AnimatedContent across the fly/sleep/eat tabs on the high of our display, we will customise how the scale change occurs over time. On this instance, we use tween because the sizeAnimationSpec, to alter the scale of the container at completely different frames in our animation:
We may simply as effectively present it with any of the opposite animationSpec choices, for instance, we may additionally use keyframes and use the initialSize and targetSize offered to find out completely different keyframes we might want on this animation. For now although a easy tween seems good. This might produce the next animation:
AnimatedContent is an easy API that makes transitions between composables extra pleasant. To see the total code pattern, check out this Jetsurvey pull request that introduces this alteration and the Crane pull request which introduces AnimatedContent too.
It’s price mentioning that this API is experimental and we’re actively in search of any suggestions you could have on it, try the AnimatedContent documentation for extra data.
When you have any questions, be at liberty to succeed in out to me on Twitter @riggaroo, alternatively you probably have any suggestions or bugs to report — please report it on the Compose Animation Challenge Tracker.
Completely satisfied transitioning! 💫
[ad_2]
Source_link