Animations Introduction (Jetpack Compose)

[@jamesaidoo]

Thanks Mitch for this series. I'm learning compose by following this. I like it more this way because some of the things you use are no longer available, or have been simplified, which makes me find the new way to get it done. I love the challenge. For instance, high level animation APIs have been introduced to achieve this animation with much simplicity. Thanks again.

[@smokey4587]

I just came to show you some support and to give you a like. Don't stop doing this, it's very helpful 🤝

[@AyorindeAdesugba]

Happy new year Mitch 👏

[@tomandjerryofficial2030]

New Year Engagement. Love it when he isn't that well knowledgeable in animation but makes a video for us. Thanks, Mitch.

[@Shoan3D]

For a beginner course, I didn't think you would do animations..hehe Thanks a lot Mitch, for animation tutorial. I thought wrong again, I thought you would do animateTo or animateFloat API, first. I think the transition API was the most challenging for me to wrap my head around, understand when you said that you can do a course just on Animations. Grateful for the explanation.

[@vengateshm2122]

New year new day gift from mitch with a heart animation.

[@ranasaad8583]

13:30 thank god you are making this series for us.

[@shivamsethi3829]

Great content, happy new year

[@tonnie7079]

Not sure if this is an engagement or a question. I got "Unresolved reference: FloatPropKey" and could not follow through the video. I suspect this has been removed as I cannot find any reference of it in the docs. Anyway, I found a workaround.

[@abrarwiryawan]

When was floatpropkey got deprecated? I cant found it anywhere

[@bboydarknesz]

I found it by following this mitch man video, kzbin.info/www/bejne/nn2og6eNeJaHftk @Composable fun PulsingDemo() { val color = MaterialTheme.colors.primary val infiniteTransition = rememberInfiniteTransition() val pulseState = infiniteTransition.animateFloat( initialValue = 40f, targetValue = 50f, animationSpec = infiniteRepeatable( animation = tween( durationMillis = 500, easing = FastOutSlowInEasing ), repeatMode = RepeatMode.Restart ) ) Row( modifier = Modifier .fillMaxWidth() .height(55.dp), horizontalArrangement = Arrangement.Center ) { Image( imageVector = Icons.Default.Favorite, modifier = Modifier.align(CenterVertically) .height(pulseState.value.dp) .width(pulseState.value.dp), contentDescription = null ) } Canvas(modifier = Modifier .fillMaxWidth() .height(55.dp)) { drawCircle( radius = pulseState.value, brush = SolidColor(color) ) } }

[@randafahmy9688]

Yaaaaaaay I was waiting for this videoooo

[@codingwithmitch]

Tomorrow is another one on animations

[@ChrisAthanas]

Hoisting the main sails over the sea of composables, final destination? Land of 100k

[@MrVarsium]

nice Corona bear @Mitch !

[@fixitman5453]

Thanks, Mitch! That helped a lot

[@Hacker-x]

This time I am watching video while having lunch😋. Thanks Mitch, clear explanation.. Following from Oman. 😎

[@muhammedshahin6299]

Thank you, mitch

[@terencejumba1939]

very nice courses

[@johnybaby9574]

Thanks for your great courses! really

[@danyelsh874]

awesome!

[@mehraanakbarii]

Man, i have the experience working with flutter, i am started learning android, should i start learning with jetpack compose ?

[@codingwithmitch]

The more you know the better generally

[@mehraanakbarii]

@@codingwithmitch so u mean learning how to program with xml and layouts is better before start learning compose ? You know i switched from Flutter to native for understanding architectures , i didn't understand Flutter's declarative ui architecture (called bloc) 🤔

[@theapache64]

Mitch, do we have an official documentation on compose animations?

[@codingwithmitch]

No it changed again recently. I'll do another update video soon prob. The devs say it shouldn't change too much anymore.

[@bakytdjumabaev469]

great video!

[@hugosalazar6911]

Nice

[@Shoan3D]

Animating engagement

[@VivekSharma-qw5ky]

Your screen kinda flickering, when the suggestion window pops up, take a look in the video

[@codingwithmitch]

Ya it's compose not my screen. I don't know why but the ide looks like it's flickering sometimes

[@uwaisalqadri6703]

cool

[@u2gilles]

Great starting point for animation. Thanks Mitch. I tried to port this code on "Compose for Desktop". It works if I don't repeat the animation (pulsePropKey using tween) but when I try to repeat infinitely, "infiniteRepeatable" can't be imported. I may miss a dependency or it is not supported yet but if anymore have a solution to this issue, please let us know. Thanks (gist.github.com/u2gilles/30401e93b5d946517fcf58bf7fc1c74f#file-anim01-kt)

[@mukeshcse3131]

Happy Pongal(harvest celebration) engagement

[@VivekSharma-qw5ky]

If you guys don't get the import of infiniteRepeatable(), because I didn't get it and searched for that function in TransitionDefinition Class and didn't find it too Use this 👇 pulsePropKey using repeatable( iterations = AnimationConstants.Infinite, animation = tween( durationMillis = 500, easing = FastOutSlowInEasing ), repeatMode = RepeatMode.Restart ) Don't know why I didn't get it, maybe deprecated or something "Compose Things" , Anyone else didn't get it?

[@raheemadamboev]

I didn't find any animation functions used in the video

[@speedboy93640]

Anime Engagement

[@juangax100]

For those using the compose version 1.0.0-beta05 this is how i could make the animation work, my PulsingDemo.kt is: import androidx.compose.animation.core.* import androidx.compose.foundation.Canvas import androidx.compose.foundation.Image import androidx.compose.foundation.layout.* import androidx.compose.material.MaterialTheme import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Favorite import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.unit.dp @Composable fun PulsingDemo() { val color = MaterialTheme.colors.primary val infiniteTransition = rememberInfiniteTransition() val pulseMagnitude by infiniteTransition.animateFloat( initialValue = PulseAnimationDefinitions.PULSE_STATE_INITIAL, targetValue = PulseAnimationDefinitions.PULSE_STATE_FINAL, animationSpec = infiniteRepeatable( animation = tween(500, easing = FastOutSlowInEasing), repeatMode = RepeatMode.Restart ) ) Row( modifier = Modifier .fillMaxWidth() .height(55.dp), horizontalArrangement = Arrangement.Center ) { Image( modifier = Modifier .align(Alignment.CenterVertically) .height(pulseMagnitude.dp) .width(pulseMagnitude.dp), imageVector = Icons.Default.Favorite, contentDescription = "") } Canvas( modifier = Modifier .fillMaxWidth() .height(55.dp) ) { drawCircle( radius = pulseMagnitude, brush = SolidColor(color) ) } } object PulseAnimationDefinitions{ const val PULSE_STATE_INITIAL = 40f const val PULSE_STATE_FINAL = 50f }