https://kotlinlang.org logo
Join Slack
Powered by
How do I place and remove images programatically? ...
# compose
m
How do I place and remove images programatically? I want to place an image somewhere on the page, fade it out, and then remove it. In fact I want to do that with lots of images. In "the old world" I'd create a view, add it to the viewGroup, animate its alpha and then remove it from the group when its alpha reached zero. I can see how I might do the fading with a transition spec, but other than that I'm feeling a bit stuck.
p
You can use an AnimatedVisibility
m
For the fading, @Paul Leclerc?
p
Yes, and when the transition is finished, the views are removed automatically
m
Thanks, that's very helpful. I hadn't realised the views would be removed automatically. The bit I can't get my head around is creating such a view programatically. What I'm doing is animating an image along a path and at frequent intervals it creates a static image that gets left behind it, fades out gradually and disappears. Being new here, I don't see how to create those "dropped" images.
p
Ok so I think the best for you to use an AnimatedContent which can make the transition between 2 views and changing its state with a LaunchedEffect and a timer
m
I think I wasn't clear. My main image continues along a path, it's always visible. It creates extra images behind it that gradually fade away. It's a "fading trail" behind it, so the path it has taken is visible for a short distance behind it. So it's not two images, it's one persistent image with some number of images showing where it's been before.
I don't see how to create these "where it's been before" images, although I now see how they would be removed. The main image creates an additional image wherever it happens to be every x milliseconds.
t
Maybe you could think of doing it inside of a Canvas? Not sure how many images you want to show. But when it is a big number the composeables approach could get very performance intensive. If you want to draw hundreds of images maybe it is even better to use OpenGL for that. Or AGSL.
m
That would be alright @Timo Drick except for the fading, or have I missed something?
t
Fading is just animating an alpha value. You can do this in every approach.
m
I think I might be missing something very simple, but I have the same problem with doing it on a canvas, how do I draw the image programmatically?
t
So you do have a path right? And than e.g. you could draw the same image on each point on the path. Depending on the time you could fade out images. You just need to think of a function which will do what you want 🙂
Maybe you could have a threshold. So when the alpha value gets below 0.01 or s.th. you do not draw the image at this position.
Canvas do offer a function to draw images.
m
So it does! Ok, I think I've got it now. Many thanks both of you.
👍 1
@Timo Drick - when you said "Fading is just animating an alpha value. You can do this in every approach", how would that work for something drawn on a canvas? How can I draw it with 100% alpha and then animate that down to 0?
t
I think you could just animate one variable with compose 
val progress = animateFloatAsState(...)
. Than you can use this value to decide which images you want to draw on your path and also which alpha value should be used.
Would recommend to animate value from 0f to 1f. E.g. when the progress is 0.5f you can draw half of the path.
m
In this part I need to draw an image which then gradually fades away. I don't think what you're suggesting lets me do that, does it?
t
It does. But you need to do some math. Of course if you only have one image that schould be fade away. You can animate a variable from 1f to 0f
m
I have x images that should fade away, each one after y milliseconds, where y is the time since it was drawn. They're not all drawn at the same time.
t
Than use this value to define the alpha value of the image.
Ok of course you can also use the time in milliseconds.
If you set the target value equal to the duration of the animation than you get time in milliseconds.
But not sure if this really makes the math easier and flexibility to change speed later
m
Ok, I think I see (again). Thanks again.
I was thinking of "canvas" as the whole space, but I can create a canvas for each image, then animations can be set up on each canvas... Yes?
t
No i think than it is better to just use Image composables. I mean at the end it does not matter but would be easier to handle i think.
15 Views
Open in Slack
PreviousNext
Powered by