基于Flutter制作一个心碎动画特效

更新时间：2022年04月25日 17:14:29 作者：老李code

这篇文章主要为大家介绍了如何利用Flutter制作一个心碎动画特效，文中的示例代码讲解详细，对我们学习Flutter有一定帮助，感兴趣的可以了解一下

前言

继续动画探索，今天用Flutter制作一个心碎的感觉，灵感来源于今天的股市，哎，心哇凉哇凉的。废话不多说，开始。

效果图先上：

实现步骤

1、绘制一个心

首先我们使用两段三阶贝塞尔曲线制作一个心型，这里因为需要实现心碎的效果，所以我们需要将心的两段用两段路径path进行绘制出来，效果：

绘制代码：

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、绘制心的裂痕

我们看到心确实分成两半了，但是中间还缺少裂痕，接下来我们就绘制心碎的裂痕，也很简单，在两段路径path闭合前进行绘制线，效果：

绘制代码：

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，我们已经看到心已经有了裂痕，如何心碎，只需将画布进行翻转一定角度即可，这里我们将画布翻转45°，看下效果：

左边：

右边：

3、加入动画

已经有心碎的感觉了，接下来加入动画元素让心碎的过程动起来。

思路： 我们可以想一下，心碎的过程是什么样子，心的颜色慢慢变灰，心然后慢慢裂开，下方的动画运动曲线看起来更符合心碎的过程，里面有不舍，不甘，但最后心还是慢慢的碎了。

我们把画笔进行填充将这个动画加入进来看下最终效果。

是不是心碎了一地。

知识点： 这里我们需要找到红色和灰色的RGB色值，通过Color.fromRGBO(r, g, b, opacity)方法赋值颜色的色值。然后通过动画值改变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;
  }
}

小结

动画曲线Curves配合绘制可以实现很多好玩的东西，这个需要勤加练习方能掌握，仅将此心碎献给今天受伤的股民朋友们

到此这篇关于基于Flutter制作一个心碎动画特效的文章就介绍到这了,更多相关Flutter心碎动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Flutter Image实现图片加载
这篇文章主要为大家详细介绍了Flutter Image实现图片加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
图解Windows环境下Android Studio安装和使用教程
这篇文章主要介绍了图解Windows环境下Android Studio安装和使用教程的相关资料,需要的朋友可以参考下
2015-12-12
Android网页H5 Input选择相机和系统相册
这篇文章主要为大家详细介绍了Android网页H5 Input选择相机和系统相册，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-10-10
搭建mac使用Charles抓包安卓app环境配置过程
这篇文章主要为大家介绍了mac使用Charles抓包，安卓app环境搭建的配置过程步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
2022-02-02
JetPack Compose底部导航栏的实现方法详解
开发一个新项目，底部导航栏一般是首页的标配，在以前的xml布局中，我们可以很轻松的是用谷歌提供的BottomNavigationView或者自定义来实现底部导航的功能，在Compose中也有也提供了一个类似的控件androidx.compose.material.BottomNavigation
2022-09-09
Android studio 混淆配置详解
这篇文章主要介绍了Android studio 混淆配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
android使用Jsoup 抓取页面的数据
本篇文章主要介绍了android使用Jsoup 抓取页面的数据，jsoup 是一款Java的HTML解析器，有需要的朋友可以了解一下。
2016-11-11
android打开应用所在的市场页面进行评分操作的方法
这篇文章主要介绍了android打开应用所在的市场页面进行评分操作的方法,涉及Android操作市场页面评分效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
Kotlin实现Android系统悬浮窗详解
大家好，本篇文章主要讲的是Kotlin实现Android系统悬浮窗详解，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下，方便下次浏览
2021-12-12
Android实现使用流媒体播放远程mp3文件的方法
这篇文章主要介绍了Android实现使用流媒体播放远程mp3文件的方法,结合实例形式分析了Android远程播放音频文件的相关步骤与实现技巧,需要的朋友可以参考下
2016-08-08