Android Flutter实现点赞效果的示例代码

目录
  • 前言
  • 绘制小手
  • 完整源码

前言

点赞这个动作不得不说在社交、短视频等App中实在是太常见了,当用户手指按下去的那一刻,给用户一个好的反馈效果也是非常重要的,这样用户点起赞来才会有一种强烈的我点了赞的效果,那么今天我们就用Flutter实现一个掘金App上的点赞效果。

首先我们看下掘金App的点赞组成部分,有一个小手,点赞数字、点赞气泡效果,还有一个震动反馈,接下来我们一步一步实现。

知识点:绘制、动画、震动反馈

绘制小手

这里我们使用Flutter的Icon图标中的点赞小手,Icons图标库为我们提供了很多App常见的小图标,如果使用苹果苹果风格的小图标可以使用cupertino_icons: ^1.0.2插件,图标并不是图片,本质上和emoji图标一样,可以添加到文本中使用,所以图标才可以设置不同的颜色属性,对比使用png格式图标可以节省不少的内存。

接下来我们就将这两个图标绘制出来,首先我们从上图可以看到真正的图标数据其实是IconData类,里面有一个codePoint属性可以获取到Unicode统一码,通过String.fromCharCode(int charCode)可以返回一个代码单元,在Text文本中支持显示。

class IconData{
/// The Unicode code point at which this icon is stored in the icon font.
/// 获取此图标的Unicode代码点
final int codePoint;
}

class String{
/// 如果[charCode]可以用一个UTF-16编码单元表示,则新的字符串包含一个代码单元
external factory String.fromCharCode(int charCode);
}

接下来我们就可以把图标以绘制文本的形式绘制出来了

关键代码:

 // 赞图标
  final icon = Icons.thumb_up_alt_outlined;
// 通过TextPainter可以获取图标的尺寸
  TextPainter textPainter = TextPainter(
      text: TextSpan(
          text: String.fromCharCode(icon.codePoint),
          style: TextStyle(
              fontSize: 30,
              fontFamily: icon.fontFamily,// 字体形象家族,这个字段一定要设置,不然显示不出来
              color: Colors.black)),
      textAlign: TextAlign.center,
      textDirection: TextDirection.ltr);
  textPainter.layout(); // 进行布局
  Size size2 = textPainter.size; // 尺寸必须在布局后获取
  //将图标偏移到画布中央
  textPainter.paint(canvas, Offset(-size2.width / 2, -size2.height / 2));

通过上方代码我们就实现了将图标绘制到画板当中

接下来继续绘制点赞数量

代码:

TextPainter textPainter2 = TextPainter(
    text: TextSpan(
        text: "点赞",// 点赞数量
        style: TextStyle(
            fontSize: 9, fontWeight: FontWeight.w500, color: Colors.black)),
    textAlign: TextAlign.center,
    textDirection: TextDirection.ltr);
textPainter2.layout(); // 进行布局
// 向右上进行偏移在小手上面
textPainter2.paint(canvas, Offset(size.width / 9, -size.height / 2 + 5));

然后图标就变成了这样样子

我们看到,掘金App点赞的过程中,周围还有一些小气泡的效果,这里提供一个思路,将这些气泡的坐标点放到一个圆的外环上面,通过动画改变圆的半径达到小圆点由内向外发散,发散的同时改变小圆点的大小,从而达到气泡的效果, 关键代码:

var r = size.width / 2 - 15; // 半径
var d = 4; // 偏移量 气泡的移动距离

// 绘制小圆点 一共4个 掘金也是4个 角度可以自由发挥 这里根据掘金App的发散角度定义的
canvas.drawPoints(
    ui.PointMode.points,
    [
      Offset((r + d * animation2.value) * cos(pi - pi / 18 * 2),
          (r + d * animation2.value) * sin(pi - pi / 18 * 2)),
      Offset((r + d * animation2.value) * cos(pi + pi / 18 * 2),
          (r + d * animation2.value) * sin(pi + pi / 18 * 2)),
      Offset((r + d * animation2.value) * cos(pi * 1.5 - pi / 18),
          (r + d * animation2.value) * sin(pi * 1.5 - pi / 18)),
      Offset((r + d * animation2.value) * cos(pi * 1.5 + pi / 18 * 5),
          (r + d * animation2.value) * sin(pi * 1.5 + pi / 18 * 5)),
    ],

    _paint
      ..strokeWidth = 5
      ..color = Colors.blue
      ..strokeCap = StrokeCap.round);

得到现在的图形, 发散前

发散后

接下来继续我们来添加交互效果,添加动画,如果有看上一篇吃豆人,相信这里就很so easy了,首先创建两个动画类,控制小手和气泡,再创建两个变量,是否点赞和点赞数量,代码:

late Animation<double> animation; // 赞
late Animation<double> animation2; // 小圆点
ValueNotifier<bool> isZan = ValueNotifier(false); // 记录点赞状态 默认没点赞
ValueNotifier<int> zanNum = ValueNotifier(0); // 记录点赞数量 默认0点赞

这里我们需要使用动画曲线CurvedAnimation这个类,这个类可以实现不同的0-1的运动曲线,根据掘金的点赞效果,比较符合这个曲线规则,快速放大,然后回归正常大小,这个类帮我们实现了很多好玩的运动曲线,有兴趣的小伙伴可以尝试下其他运动曲线。

小手运动曲线

气泡运动曲线:

有了运动曲线之后,接下来我们只需将属性赋值给小手手和小圆点就好了

完整源码

封装一下,对外暴露大小,就是一个点赞组件了。

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

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

class _ZanDemoState extends State<ZanDemo> with TickerProviderStateMixin {
  late Animation<double> animation; // 赞
  late Animation<double> animation2; // 小圆点
  ValueNotifier<bool> isZan = ValueNotifier(false); // 记录点赞状态 默认没点赞
  ValueNotifier<int> zanNum = ValueNotifier(0); // 记录点赞数量 默认0点赞

  late AnimationController _controller; // 控制器
  late AnimationController _controller2; // 小圆点控制器
  late CurvedAnimation cure; // 动画运行的速度轨迹 速度的变化
  late CurvedAnimation cure2; // 动画运行的速度轨迹 速度的变化

  int time = 0;// 防止快速点两次赞导致取消赞

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 500)); //500ms
    _controller2 = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 500)); //500ms

    cure = CurvedAnimation(parent: _controller, curve: Curves.easeInOutBack);
    cure2 = CurvedAnimation(parent: _controller2, curve: Curves.easeOutQuint);
    animation = Tween(begin: 0.0, end: 1.0).animate(cure);
    animation2 = Tween(begin: 0.0, end: 1.0).animate(_controller2);
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Center(
        child: CustomPaint(
          size: Size(50, 50),
          painter: _ZanPainter(animation, animation2, isZan, zanNum,
              Listenable.merge([animation, animation2, isZan, zanNum])),
        ),
      ),
      onTap: () {
        if (!isZan.value && !_isDoubleClick()) {
          _controller.forward(from: 0);
          // 延迟300ms弹窗气泡
          Timer(Duration(milliseconds: 300), () {
            isZan.value = true;
            _controller2.forward(from: 0);
          });
          Vibrate.feedback(FeedbackType.success);
          zanNum.value++;
        } else if (isZan.value) {
          Vibrate.feedback(FeedbackType.success);
          isZan.value = false;
          zanNum.value--;
        }
      },
    );
  }

  bool _isDoubleClick() {
    if (time == 0) {
      time = DateTime.now().microsecondsSinceEpoch;
      return false;
    } else {
      if (DateTime.now().microsecondsSinceEpoch - time < 800 * 1000) {
        return true;
      } else {
        time = DateTime.now().microsecondsSinceEpoch;
        return false;
      }
    }
  }
}

class _ZanPainter extends CustomPainter {
  Animation<double> animation;
  Animation<double> animation2;
  ValueNotifier<bool> isZan;
  ValueNotifier<int> zanNum;
  Listenable listenable;

  _ZanPainter(
      this.animation, this.animation2, this.isZan, this.zanNum, this.listenable)
      : super(repaint: listenable);

  Paint _paint = Paint()..color = Colors.blue;
  List<Offset> points = [];

  @override
  void paint(Canvas canvas, Size size) {
    canvas.clipRect(Offset.zero & size);
    canvas.translate(size.width / 2, size.height / 2);
    // 赞
    final icon =
        isZan.value ? Icons.thumb_up_alt_rounded : Icons.thumb_up_alt_outlined;
    // 通过TextPainter可以获取图标的尺寸
    TextPainter textPainter = TextPainter(
        text: TextSpan(
            text: String.fromCharCode(icon.codePoint),
            style: TextStyle(
                fontSize: animation.value < 0 ? 0 : animation.value * 30,
                fontFamily: icon.fontFamily,
                color: isZan.value ? Colors.blue : Colors.black)),
        textAlign: TextAlign.center,
        textDirection: TextDirection.ltr);
    textPainter.layout(); // 进行布局
    Size size2 = textPainter.size; // 尺寸必须在布局后获取
    //将图标偏移到画布中央
    textPainter.paint(canvas, Offset(-size2.width / 2, -size2.height / 2));

    var r = size.width / 2 - 15; // 半径
    var d = 4; // 偏移量

    canvas.drawPoints(
        ui.PointMode.points,
        [
          Offset((r + d * animation2.value) * cos(pi - pi / 18 * 2),
              (r + d * animation2.value) * sin(pi - pi / 18 * 2)),
          Offset((r + d * animation2.value) * cos(pi + pi / 18 * 2),
              (r + d * animation2.value) * sin(pi + pi / 18 * 2)),
          Offset((r + d * animation2.value) * cos(pi * 1.5 - pi / 18 * 1),
              (r + d * animation2.value) * sin(pi * 1.5 - pi / 18 * 1)),
          Offset((r + d * animation2.value) * cos(pi * 1.5 + pi / 18 * 5),
              (r + d * animation2.value) * sin(pi * 1.5 + pi / 18 * 5)),
        ],
        _paint
          ..strokeWidth = animation2.value < 1 ? 5 * animation2.value : 0
          ..color = Colors.blue
          ..strokeCap = StrokeCap.round);
    TextPainter textPainter2 = TextPainter(
        text: TextSpan(
            text: zanNum.value == 0 ? "点赞" : zanNum.value.toString(),
            style: TextStyle(
                fontSize: 9, fontWeight: FontWeight.w500, color: Colors.black)),
        textAlign: TextAlign.center,
        textDirection: TextDirection.ltr);
    textPainter2.layout(); // 进行布局
    // 向右上进行偏移在小手上面
    textPainter2.paint(canvas, Offset(size.width / 9, -size.height / 2 + 5));
  }

  @override
  bool shouldRepaint(covariant _ZanPainter oldDelegate) {
    return oldDelegate.listenable != listenable;
  }
}

到这里发现是不是少了点什么,不错,还少了震动的效果,这里我们引入flutter_vibrate: ^1.3.0这个插件,这个插件是用来管理设备震动效果的,Andoroid端记得加入震动权限

<uses-permission android:name="android.permission.VIBRATE"/>使用方法也很简单,这个插件封装了一些常见的提示震动,比如操作成功、操作警告、操作失败等,其实就是震动时间的长短,这里我们就在点赞时候调用Vibrate.feedback(FeedbackType.success);有一个点击成功的震动就好了。

最后来看下最终效果图吧:

是不是和掘金App的效果一样,不信你点个赞看看~~

以上就是Android Flutter实现点赞效果的示例代码的详细内容,更多关于Flutter点赞的资料请关注我们其它相关文章!

(0)

相关推荐

  • Android仿直播特效之点赞飘心效果

    本文实例为大家分享了Android实现点赞飘心效果的具体代码,供大家参考,具体内容如下 一.概述 老规矩先上图 好了,基本就是这个样子,录完的视频用格式工厂转换完就这个样子了,将就看吧 二.定义我们自己的Layout /** * @author 刘洋巴金 * @date 2017-4-27 * * 定义我们自己的布局 * */ public class LoveLayout extends RelativeLayout{ private Context context; private Layo

  • Android实现简单点赞动画

    思路 找到Activity中DecorView的RootView 确定点赞控件位于屏幕中的坐标值 将点赞效果View加入到RootView中, 给效果View添加自己想要的动画效果. 重复点击时候, 需要将效果View先移除掉再重新加入到RootView中. 代码 /**  * 普通点赞效果, 点击控件后出现一个View上浮  */ public class ViewLikeUtils {     public interface ViewLikeClickListener {        

  • android实现直播点赞飘心动画效果

    前段时间在写直播的时候,需要观众在看直播的时候点赞的效果,在此参照了腾讯大神写的点赞(飘心动画效果).下面是效果图: 1.自定义飘心动画的属性 在attrs.xml 中增加自定义的属性 <!-- 飘心动画自定义的属性 --> <declare-styleable name="HeartLayout"> <attr name="initX" format="dimension"/> <attr name=&

  • Android贝塞尔曲线实现直播点赞效果

    本文实例为大家分享了Android实现直播点赞效果的具体代码,供大家参考,具体内容如下 效果展示 原理分析 点赞效果最主要的难点和原理在于贝塞尔曲线动画的生成,我们通过图片主要讲解贝塞尔曲线动画 1.需要找到贝塞尔曲线的四个点 2.通过三级贝塞尔曲线的公式计算,获取贝塞尔曲线的轨迹路径点 3.通过设置点赞图片X,Y坐标,从而形成点赞的效果 实现步骤 1.初始化变量 //1.继承RelativeLayout public class ChristmasView extends RelativeLa

  • Flutter实现抖音点赞效果

    效果图如下: 分析效果 1.整个控件可以点击,控件可以铺满屏幕,点赞效果在子部件之上. 2.可以实现单击 3.连击的情况下,呈现红心的动画效果,并且有红心叠加 4.动画的位置会随着手指的点击位置改变 思路 1.通过GestureDetector来监控手势,在手指抬起的时候记录时间毫秒值,手指再次按下时,通过获取到毫秒值与之前的时间毫秒值的差值,来判断是单击还是呈现红心动画效果. 2.使用Stack部件来确定视图层级,比如说如果要在视频视图上实现点赞效果的话,视频视图部件就作为子部件,置于下层.

  • Android实现仿今日头条点赞动画效果实例

    目录 一.前言 二.需求拆分 三.实现方案 1.点赞控件触摸事件处理 2.点赞动画的实现 2.1.点赞效果图片的获取和存储管理 2.2.点赞表情图标动画实现 2.3.点赞次数和点赞文案的绘制 3.存放点赞动画的容器 4.启动动画 四.遇到的问题 五.实现效果 六.完整代码获取 七.参考和感谢 总结 一.前言 我们在今日头条APP上会看到点赞动画效果,感觉非常不错,正好公司有点赞动画的需求,所以有了接下来的对此功能的实现的探索. 二.需求拆分 仔细观察点赞交互,看出大概以下几个步骤: 1:点赞控件

  • Android Flutter实现点赞效果的示例代码

    目录 前言 绘制小手 完整源码 前言 点赞这个动作不得不说在社交.短视频等App中实在是太常见了,当用户手指按下去的那一刻,给用户一个好的反馈效果也是非常重要的,这样用户点起赞来才会有一种强烈的我点了赞的效果,那么今天我们就用Flutter实现一个掘金App上的点赞效果. 首先我们看下掘金App的点赞组成部分,有一个小手,点赞数字.点赞气泡效果,还有一个震动反馈,接下来我们一步一步实现. 知识点:绘制.动画.震动反馈 绘制小手 这里我们使用Flutter的Icon图标中的点赞小手,Icons图标

  • Android Flutter制作交错动画的示例代码

    目录 前言 动画解析 编码实现 总结 前言 之前一篇我们讲了 Flutter组合动画实现的方式 —— 交错动画.借助 GIF 和绘图技巧是可以做到类似 GIF 那种效果的.本篇我们来一个应用实例,我们让轮子在草地滚动着前进,而且还能粘上“绿色的草”,运行效果如下动画所示. 动画解析 上面实现的效果实际上由三个动画组成: 轮子前进的动画 轮子滚动 轮子的边缘颜色渐变(由黑色变成绿色) 这三个动画是同时进行的,因此需要使用到交错动画,即使用一个 AnimationController来控制三个 Tw

  • Android输入框实时模糊搜索效果的示例代码

    Android输入框实时模糊搜索 很多开发场景会用到搜索框实时模糊搜索来帮助用户输入内容,如图 思路是在EditText 字符变动的时候 弹出ListPopupwindow并更新列表,这样的做法google已经封装为AutoCompleteTextView 用法 mAutoCompleteTextView.setAdapter(adapter); mAutoCompleteTextView.setFocusable(true); mAutoCompleteTextView.setOnItemCl

  • android实现音乐跳动效果的示例代码

    效果图 实现 整体的流程图如下 上面主要步骤分为3个 1.计算宽度能放下多少列的音频块. 2.计算每一列中音频块的个数 3.绘制音频块 1.计算宽度能放下多少列的音频块. 设置音频块的宽度为danceWidth,音频块横向之间的间距为danceGap,那么可以算出能放的列数: /** * 先计算当前宽度能够放下多少个音频块 */ val widthNum = (getAvailableWith() / (danceGap + danceWidth)).toInt() /** * 获取可以用的宽度

  • Android Flutter实现"斑马纹"背景的示例代码

    目录 最终效果图 实现思维 斑马纹(45°角,向左倾斜) 画笔 斑马纹坐标位置计算 圆角裁剪(如果需要) 作为背景 代码 使用处 main_page.dart 斑马纹具体实现类 zebra_stripes_back.dart 计算过程解释 由于工作中项目需求,需要将H5转换为Flutter代码. 其中的斑马纹背景需要根据接口返回的颜色来渲染,所以不能只是图片形式,无法通过decoration属性配置图片背景板. 楼主这边想到的方法就是通过 实现一个canvas绘制斑马纹类.使用Stack布局,将

  • Android实现雷达View效果的示例代码

    样式效果 还是先来看效果: 这是一个仿雷达扫描的效果,是之前在做地图sdk接入时就想实现的效果,但之前由于赶着毕业设计,就没有亲手去实现,不过现在自己撸一个发现还是挺简单的. 这里主要分享一下我的做法. 目录 主体轮廓的实现(雷达的结构) 动画的实现(雷达扫描的效果) 目标点的加入(图片/点) 主体轮廓实现 不难分析得出,这个View主要由外部的一个圆,中间的锚点圆以及扇形旋转区域组成.而且每个部分理应由不同的Paint去绘制,以方便去定制各部分的样式. 外部圆以及锚点圆的绘制较为简单,主要的点

  • Android利用Flutter path绘制粽子的示例代码

    目录 前言 绘制 基本轮廓 粽叶 嘴巴 眼睛 腮红 手&脚 头巾 咸甜是一家 发声 动画控制嘴巴开合 用到的技术点 总结 前言 大家好,端午将至,首先提前祝小伙伴端午安康,端午作为中华民族的非常重要的传统节日,粽子那是必不可少的,但是你真的知道粽子的历史吗? 今天跟随本篇文章用Flutter path画一个会科普节日的的粽子吧- 绘制 基本轮廓 首先我们需要将粽子的基本轮廓绘制出来,通过图片可以看到粽子的轮廓是一个圆圆的三角形状, 本篇文章所有的图形都是用纯Path路径制作,这里我们可以将粽子的

  • Android 自定义加载动画Dialog弹窗效果的示例代码

    效果图 首先是创建弹窗的背景 这是上面用到的 以shape_bg_5_blue.xml为例,其他的三个无非就是里面的颜色不一样而已 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="5dp"

  • Android仿高德首页三段式滑动效果的示例代码

    目录 高德的效果 实现的效果 自定义View源码 xml布局中的使用 高德首页按钮处理 源码地址 最近发现很多app都使用了三段式滑动,比如说高德的首页和某宝等物流信息都是使用的三段式滑动方式,谷歌其实给了我们很好的2段式滑动,就是BottomSheet,所以这次我也是在这个原理基础上做了一个小小的修改来实现我们今天想要的效果. 高德的效果 实现的效果 我们实现的效果和高德差距不是很大,也很顺滑.具体实现其实就是继承CoordinatorLayout.Behavior 自定义View源码 /**

  • Flutter实现牛顿摆动画效果的示例代码

    目录 前言 实现步骤 1.绘制静态效果 2.加入动画 两个关键点 完整源码 总结 前言 牛顿摆大家应该都不陌生,也叫碰碰球.永动球(理论情况下),那么今天我们用Flutter实现这么一个理论中的永动球,可以作为加载Loading使用. - 知识点:绘制.动画曲线.多动画状态更新 效果图: 实现步骤 1.绘制静态效果 首先我们需要把线和小圆球绘制出来,对于看过我之前文章的小伙伴来说这个就很简单了,效果图: 关键代码: // 小圆球半径 double radius = 6; /// 小球圆心和直线终

随机推荐