Shulou(Shulou.com)05/31 Report--

This article mainly introduces based on Flutter how to make a heartbreak animation special effects related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone read this based on Flutter how to make a heartbreak animation special effects article will have a harvest, let's take a look at it.

The effect picture goes up first:

To achieve step 1, draw a heart

First of all, we use two third-order Bezier curves to make a heart. Here, because we need to achieve the effect of heartbreak, we need to draw the two segments of the heart with two-segment path path, the effect:

Draw the code:

Canvas.translate (size.width / 2, size.height / 2); Paint paint = Paint (); paint.. style = PaintingStyle.stroke.. strokeWidth = 2.. color = Colors.black87;Path path = Path (); path.moveTo (0,0); path.cubicTo (- 200,80,60,240,0,140); path.close (); Path path3 = Path (); canvas.save () Canvas.drawPath (path, paint..color = Colors.red.. style = PaintingStyle.stroke); canvas.restore (); path3.cubicTo (200,80,60,240,0,140); path3.close (); canvas.drawPath (path3, paint..color = Colors.black87); 2. Draw cracks in the heart.

We see that the heart is indeed divided into two halves, but there is still a lack of cracks in the middle, and then we draw the cracks of the heartbreak, which is also very simple, draw the line before the two paths path is closed, the effect:

Draw the code:

Path.relativeLineTo (- 10,30); path.relativeLineTo (20,5); path.relativeLineTo (- 20,30); path.relativeLineTo (20,20); path.relativeLineTo (- 10,20); path.relativeLineTo (10,10); path3.relativeLineTo (- 10,30); path3.relativeLineTo (20,5); path3.relativeLineTo (- 20,30); path3.relativeLineTo (20,20); path3.relativeLineTo (- 10,20); path3.relativeLineTo (10,10)

OK, we have seen that there is a crack in the heart, how to break the heart, just flip the canvas at a certain angle. Here we flip the canvas 45 °to see the effect:

Left:

On the right:

3. Add animation

Already have the feeling of heartbreak, then add animation elements to make the process of heartbreak move.

Idea: we can think about what the process of heartbreak is like, the color of the heart slowly turns gray, and then the heart slowly breaks open. The animation movement curve below looks more in line with the process of heartbreak, in which there is reluctance and reluctance. But in the end, the heart was slowly broken.

Let's fill in the brush and add this animation to see the final effect.

Is it heartbroken.

Knowledge: here we need to find the RGB color values of red and gray, and assign the color value of the color through the Color.fromRGBO (r, g, b, opacity) method. Then change the value of RGB through the animation value. The color values I use here are:

Red: Color.fromRGBO (255,0,0,1) Grey: Color.fromRGBO (169,169,169,1)

The complete code class XinSui extends StatefulWidget {const XinSui ({Key? Key}): super (key: key); @ override _ XinSuiState createState () = > _ XinSuiState ();} class _ XinSuiState extends State with SingleTickerProviderStateMixin {late AnimationController _ controller = AnimationController (vsync: this, duration: Duration (milliseconds: 4000). Repeat (); late CurvedAnimation cure = CurvedAnimation (parent: _ controller, curve: Curves.bounceInOut); late Animation animation = Tween (begin: 0.0,1.0) .animate (cure) @ override Widget build (BuildContext context) {return Container (child: CustomPaint (size: Size (double.infinity, double.infinity), painter: _ XinSuiPainter (animation),);} @ override void dispose () {_ controller.dispose (); super.dispose ();}} class _ XinSuiPainter extends CustomPainter {Animation animation; _ XinSuiPainter (this.animation): super (repaint: animation) @ override void paint (Canvas canvas, Size size) {canvas.translate (size.width / 2, size.height / 2); Paint paint = Paint (); paint.. style = PaintingStyle.stroke.. strokeWidth = 2.. color = Colors.black87; Path path = Path (); path.moveTo (0,0); path.cubicTo (- 200,80,-60,-240,0,140) Path.relativeLineTo (- 10,30); path.relativeLineTo (20,5); path.relativeLineTo (- 20,30); path.relativeLineTo (20,20); path.relativeLineTo (- 10,20); path.relativeLineTo (10,10); path.close (); Path path3 = Path (); canvas.save (); canvas.rotate (- pi / 4 * animation.value) Canvas.drawPath (path, paint.. color = Colors.red.. color = Color.fromRGBO (25555-(86 * animation.value) .toInt (), (animation.value * 169) .toInt (), (animation.value * 169.toInt (), 1).. style = PaintingStyle.fill); canvas.restore () Path3.cubicTo (200,80,60,-240,0,140); path3.relativeLineTo (- 10,30); path3.relativeLineTo (20,5); path3.relativeLineTo (- 20,30); path3.relativeLineTo (20,20); path3.relativeLineTo (- 10,20); path3.relativeLineTo (10,10); path3.close (); canvas.rotate (pi / 4 * animation.value); canvas.drawPath (path3,paint) } @ override bool shouldRepaint (covariant _ XinSuiPainter oldDelegate) {return oldDelegate.animation! = animation;}} this is the end of the article on "how to make a heartbreak animation special effect based on Flutter". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to make a heartbreak animation special effect based on Flutter". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.