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.
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.
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.
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?
@@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) 🤔
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)
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.
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.
New year new day gift from mitch with a heart animation.
I just came to show you some support and to give you a like. Don't stop doing this, it's very helpful 🤝
New Year Engagement. Love it when he isn't that well knowledgeable in animation but makes a video for us. Thanks, Mitch.
13:30 thank god you are making this series for us.
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
}
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.
This time I am watching video while having lunch😋. Thanks Mitch, clear explanation.. Following from Oman. 😎
Happy new year Mitch 👏
Thanks, Mitch! That helped a lot
Hoisting the main sails over the sea of composables, final destination? Land of 100k
Great content, happy new year
Yaaaaaaay I was waiting for this videoooo
Tomorrow is another one on animations
nice Corona bear @Mitch !
When was floatpropkey got deprecated? I cant found it anywhere
I found it by following this mitch man video, th-cam.com/video/hLERtWC1THw/w-d-xo.html
@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)
)
}
}
Thank you, mitch
Thanks for your great courses! really
Animating engagement
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?
I didn't find any animation functions used in the video
very nice courses
Man, i have the experience working with flutter, i am started learning android, should i start learning with jetpack compose ?
The more you know the better generally
@@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) 🤔
Mitch, do we have an official documentation on compose animations?
No it changed again recently. I'll do another update video soon prob. The devs say it shouldn't change too much anymore.
great video!
awesome!
Your screen kinda flickering, when the suggestion window pops up, take a look in the video
Ya it's compose not my screen. I don't know why but the ide looks like it's flickering sometimes
Nice
Happy Pongal(harvest celebration) engagement
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)
cool
Anime Engagement