基于Flutter制作一個(gè)心碎動(dòng)畫特效

更新時(shí)間：2022年04月25日 17:14:29 作者：老李code

這篇文章主要為大家介紹了如何利用Flutter制作一個(gè)心碎動(dòng)畫特效，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Flutter有一定幫助，感興趣的可以了解一下

前言

繼續(xù)動(dòng)畫探索，今天用Flutter制作一個(gè)心碎的感覺(jué)，靈感來(lái)源于今天的股市，哎，心哇涼哇涼的。廢話不多說(shuō)，開始。

效果圖先上：

實(shí)現(xiàn)步驟

1、繪制一個(gè)心

首先我們使用兩段三階貝塞爾曲線制作一個(gè)心型，這里因?yàn)樾枰獙?shí)現(xiàn)心碎的效果，所以我們需要將心的兩段用兩段路徑path進(jìn)行繪制出來(lái)，效果：

繪制代碼：

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 path2 = Path();
canvas.save();
canvas.drawPath(
    path,
    paint
    ..color = Colors.red
      ..style = PaintingStyle.stroke);
canvas.restore();
path2.cubicTo(200, -80, 60, -240, 0, -140);
path2.close();
canvas.drawPath(
    path2,
    paint..color = Colors.black87);

2、繪制心的裂痕

我們看到心確實(shí)分成兩半了，但是中間還缺少裂痕，接下來(lái)我們就繪制心碎的裂痕，也很簡(jiǎn)單，在兩段路徑path閉合前進(jìn)行繪制線，效果：

繪制代碼：

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

path2.relativeLineTo(-10, 30);
path2.relativeLineTo(20, 5);
path2.relativeLineTo(-20, 30);
path2.relativeLineTo(20, 20);
path2.relativeLineTo(-10, 20);
path2.relativeLineTo(10, 10);

OK，我們已經(jīng)看到心已經(jīng)有了裂痕，如何心碎，只需將畫布進(jìn)行翻轉(zhuǎn)一定角度即可，這里我們將畫布翻轉(zhuǎn)45°，看下效果：

左邊：

右邊：

3、加入動(dòng)畫

已經(jīng)有心碎的感覺(jué)了，接下來(lái)加入動(dòng)畫元素讓心碎的過(guò)程動(dòng)起來(lái)。

思路： 我們可以想一下，心碎的過(guò)程是什么樣子，心的顏色慢慢變灰，心然后慢慢裂開，下方的動(dòng)畫運(yùn)動(dòng)曲線看起來(lái)更符合心碎的過(guò)程，里面有不舍，不甘，但最后心還是慢慢的碎了。

我們把畫筆進(jìn)行填充將這個(gè)動(dòng)畫加入進(jìn)來(lái)看下最終效果。

是不是心碎了一地。

知識(shí)點(diǎn)： 這里我們需要找到紅色和灰色的RGB色值，通過(guò)Color.fromRGBO(r, g, b, opacity)方法賦值顏色的色值。然后通過(guò)動(dòng)畫值改變RGB的值即可。這里我使用的色值是：

紅色：Color.fromRGBO(255, 0, 0, 1)灰色：Color.fromRGBO(169, 169, 169, 1)

完整代碼

class XinSui extends StatefulWidget {
  const XinSui({Key? key}) : super(key: key);

  @override
  _XinSuiState createState() => _XinSuiState();
}

class _XinSuiState extends State<XinSui> with SingleTickerProviderStateMixin {
  late AnimationController _controller =
      AnimationController(vsync: this, duration: Duration(milliseconds: 4000))
        ..repeat();
  late CurvedAnimation cure =
      CurvedAnimation(parent: _controller, curve: Curves.bounceInOut);

  late Animation<double> animation =
      Tween<double>(begin: 0.0, end: 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<double> 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 path2 = Path();
    canvas.save();
    canvas.rotate(-pi / 4 * animation.value);
    canvas.drawPath(
        path,
        paint
        ..color = Colors.red
          ..color = Color.fromRGBO(
              255 - (86 * animation.value).toInt(),
              (animation.value * 169).toInt(),
              (animation.value * 169).toInt(),
              1)

          ..style = PaintingStyle.fill);
    canvas.restore();
    path2.cubicTo(200, -80, 60, -240, 0, -140);
    path2.relativeLineTo(-10, 30);
    path2.relativeLineTo(20, 5);
    path2.relativeLineTo(-20, 30);
    path2.relativeLineTo(20, 20);
    path2.relativeLineTo(-10, 20);
    path2.relativeLineTo(10, 10);
    path2.close();
    canvas.rotate(pi / 4 * animation.value);
    canvas.drawPath(
        path2,paint);
  }
  @override
  bool shouldRepaint(covariant _XinSuiPainter oldDelegate) {
    return oldDelegate.animation != animation;
  }
}