網站首頁編程語言正文

Android?Flutter實現點贊效果的示例代碼_Android

作者：老李code ? 更新時間： 2022-06-20 編程語言

前言

點贊這個動作不得不說在社交、短視頻等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的效果一樣，不信你點個贊看看~~

原文鏈接：https://juejin.cn/post/7088960905429385253

上一篇：基于python?的Pygame最小開發框架_python
下一篇：.NET?Core企業微信網頁授權登錄的實現_實用技巧

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁編程語言正文

Android?Flutter實現點贊效果的示例代碼_Android

目錄

前言

繪制小手

完整源碼

相關推薦

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁 編程語言 正文

Android?Flutter實現點贊效果的示例代碼_Android

目錄

前言

繪制小手

完整源碼

相關推薦

網站首頁編程語言正文