Jetpack Compose working with rotation animation
I discovered Jetpack Compose a few months ago and I wanted to share with you a simple prototype. For fun I tried to create an audio player prototype with an old school vinyl style in Jetpack Compose.
I tweeted the result with a short video.
First of all, if you are starting with Jetpack Compose, take a look Get started with Jetpack Compose, very good point of start with Jetpack Compose.
In this sample I just create a vinyl with rotation animation and a play/pause button.
In my sample I tried to use my Photoshop skills to draw the vinyl. I created three images for three layers. The first layer for vinyl background, the second layer for lighting effect and the last a fake album cover.
This composable is a simple
Box with rotation as parameters. This rotation will be applied only to the vinyl layer and the album layer (light effect stay static). A shape is applied to the box to simulate the small hole in the vinyl.
This composable only allows you to manage the rotation animation based on the playing status.
If status is play, an infinite repeatable animation start, else if status is pause, a simple animation start based on current rotation value and end the rotation by slowing down. This value is given to the composable
A simple composable working as toggle button.
I just compose the main page (with a gradient as background) with
AudioControl(). The playing state is passed to these two composable for changing animation and button icon.
The complete source code is available on GitHub, working with
Android Studio Canary 14 and
Jetpack Compose 1.0.0-beta04