PK Creative Spring Festival, I am participating in the “Spring Festival Creative Submission Contest”

rendering

Don’t get me wrong, the renderings are not the ones above… The picture above is too complicated, the tiger I draw is not so good 😂..

Ha, ha, ha, ha, ha. Don’t worry about the details, it doesn’t matter! What matters is the hot and pure heart that welcomes the year of the Tiger in 2022, with a little animation that moves when the tiger’s head is clicked…

Here I wish you all in the year of tiger, tiger tiger sleep every day!

Train of thought

Originally wanted to draw a beautiful tiger, but really began to feel a little at a loss, originally thought of layer by layer pictures, a bit of PS that meaning, that effect is really better than this, but the sincerity and this stroke by stroke is not the same.

I decided to draw by Path, because Path in Compose was used less frequently in the previous project. Go ahead and follow me step by step to draw the ugly tiger.

Began to lu code

Painted head

Let’s draw the tiger’s head first. At best, it’s called the tiger’s head. At worst, it’s a circle.

val size = this.size val path = Path() path.moveTo(size.width / 2, Rect(Rect(start, 300f, start * 5, 300 + start * 5 - start)) path.close() drawPath(path = path, color = Color.Yellow, style = Stroke(width = 10f))Copy the code

You can draw a circle using addOval directly, and then calculate the position of the circle.

Draw the king on the head

The head is finished, then draw the king word on the head of the tiger, which is the symbol of the tiger!

AddRect (Rect(start * 3-40f, 300f + 60f, start * 3 + 40f, 300f + 65f)) path.addRect(Rect(start * 3 - 50f, 300f + 85f, start * 3 + 50f, 300f + 90f)) path.addRect(Rect(start * 3 - 35f, 300f + 110f, start * 3 + 35f, 300f + 115f)) path.addRect(Rect(start * 3-2.5f, 300f + 60f, start * 3 + 2.5f, 300f + 115f))Copy the code

AddRect adds a rectangle to Path. This can be done by drawLine, but if Path is used, let’s use it.

How, have a bit of meaning 😂!

Draw eyebrows and eyes

Head and king are all drawn, the next to draw eyebrows and eyes, eyebrows can also be used to replace the rectangle, the eyes are also used to replace the circle:

Path. addRect(Rect(start * 1.5f + 50, bigSize + 200f, start * 1.5f + 130f, BigSize + 205f)) path.addRect(Rect(start * 3.5f + 50, bigSize + 200f, start * 3.5f + 130f, AddOval (Rect(start * 1.5f + 50, 550f, start * 1.5f + 130f, 550 + start * 1.5f + 130f - (start * 1.5f + 50)) path.addoval (Rect(start * 3.5f + 50, 550f, start * 3.5f + 130f, 550 + Start * 3.5F + 130F - (start * 3.5F + 50))Copy the code

Ladies and gentlemen, please:

Draw the nose and mouth

The eyes are also available, and the nose and mouth are not yet drawn, but the nose is also rectangular, and the mouth is elliptical:

AddRect (Rect(start * 3-40F, 680F, start * 3 + 40F, In the 80f + start * 3 + 40F - (start * 3-40F))) // IN the 80F + start * 3 + 40F - (start * 3-40F)) // In the 80F (start * 3-100F, 850F, start * 3 + 100F, 850f + start * 3 + 40f - (start * 3 - 40f) ) )Copy the code

Here’s how it works:

Painting beard

The graph above eye, nose, mouth all had, connect the king word on the head all drew, how does the feeling not resemble tiger?? By the way, tigers have whiskers, which can also be replaced by rectangles:

In the 80f (Rect(start-70F, 680F, Start + 70F, 685F)) in the 80F (Rect(start-100F, 725F, start + 100F, 730f) ) path.addRect( Rect(start - 80f, 770f, start + 80f, 775f) ) path.addRect( Rect(start * 5 - 70f, 680f, start * 5 + 70f, 685f) ) path.addRect( Rect(start * 5 - 100f, 725f, start * 5 + 100f, 730f) ) path.addRect( Rect(start * 5 - 80f, 770f, start * 5 + 80f, 775f) )Copy the code

Ah, yes, three on the left and right, everyone, please:

Draw the ear

How still feel wrong?? What is missing??

Yeah! Ears? I haven’t got my five senses yet!

AddOval (Rect(start * 1.2f, bigSize -50f, start * 2.2f, Bigsize-50f + start)) path.addoval (Rect(start * 3.8f, bigsize-50f, start * 4.8f, bigsize-50f + start))Copy the code

The ears can also be round, very simple, now let’s look at:

Ha ha ha, there is that taste!!

Write a message

Tiger finished, it’s time to add a blessing!

The Column (modifier = modifier. FillMaxSize (), horizontalAlignment = Alignment. CenterHorizontally,) {Text (Text = "congratulations", Sp, color = color. Yellow, fontFamily = fontfamily.serif) text-align = center, fontSize = 150.sp, color = Color.Yellow, fontFamily = FontFamily.Serif) }Copy the code

Now add the tiger, and consider the vertical screen switch:

@Composable fun NewYearWidget() { val isLand = LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE if (! isLand) { Column( modifier = Modifier .fillMaxSize() .background(color = Color.Red), horizontalAlignment = Alignment.CenterHorizontally, ) { TigerWidget() TextWidget() } } else { Row( modifier = Modifier .fillMaxSize() .background(color = Color.Red), verticalAlignment = Alignment.CenterVertically, ) { TigerWidget() TextWidget() } } }Copy the code

Let the tiger move

Just draw a tiger’s head, not the body, now think of a way to make it move. Move it when you click on the tiger’s head.

var isBig by remember { mutableStateOf(true) } val bigSize by animateFloatAsState( if (isBig) 300f else 150f, animationSpec = spring(Spring.StiffnessVeryLow) ) Canvas( modifier = Modifier .size(360.dp) .background(color = Color.Red) .clickable { isBig = ! isBig } )Copy the code

Compose’s UI is data-driven, so you can set it directly to the State of the animation.

This is the end of the drawing, is not very simple, ha ha ha, when click on the tiger head will be like the above renderings of the expansion.

conclusion

Because this year is the year of the tiger, so I wanted to draw a little tiger, but I ended up crying because I was ugly. But that’s what it means. As many of you may have noticed, this article does not run the project directly. Instead, it uses the Compose Preview feature to Preview the project.

All the code for this article is in Github. Here is the Github address:

Github.com/zhujiang521…

Finally, happy New Year to everyone here!!

Happy New Year to you all! All the best in the Year of the Tiger!