Flutter實(shí)現(xiàn)抖音點(diǎn)贊效果

更新時間：2021年05月14日 10:23:33 作者：碼農(nóng)釘某人

抖音的點(diǎn)贊效果在第一次看到的時候，總有一種眼前一亮的感覺。一邊看視頻，還能在視頻上點(diǎn)贊，而且整個屏幕都能夠點(diǎn)贊，并伴隨動畫，還是很炫酷的。今天我們用Flutter來實(shí)現(xiàn)一下這個效果

效果圖如下：

分析效果

1.整個控件可以點(diǎn)擊，控件可以鋪滿屏幕，點(diǎn)贊效果在子部件之上。
2.可以實(shí)現(xiàn)單擊
3.連擊的情況下，呈現(xiàn)紅心的動畫效果，并且有紅心疊加
4.動畫的位置會隨著手指的點(diǎn)擊位置改變

思路

1.通過GestureDetector來監(jiān)控手勢，在手指抬起的時候記錄時間毫秒值，手指再次按下時，通過獲取到毫秒值與之前的時間毫秒值的差值，來判斷是單擊還是呈現(xiàn)紅心動畫效果。
2.使用Stack部件來確定視圖層級，比如說如果要在視頻視圖上實(shí)現(xiàn)點(diǎn)贊效果的話，視頻視圖部件就作為子部件，置于下層。
3.我們可以看到紅心的動畫效果不是一個個的去執(zhí)行，而是根據(jù)手指的點(diǎn)擊位置和時間去執(zhí)行。怎么實(shí)現(xiàn)這樣的需求呢？我們可以使用列表來存儲手指點(diǎn)擊的位置，通過遍歷的方式獲取列表的位置，并在對應(yīng)的位置上執(zhí)行動畫，同時從列表中刪除這個位置。
至于動畫，我們可以通過Flutter提供的動畫小部件去實(shí)現(xiàn)。

實(shí)現(xiàn)

1.對外公開的參數(shù)

通過繼承StatefuleWidget來實(shí)現(xiàn)自定義部件。

類：LikeGestureWidget

  const LikeGestureWidget({
    Key? key,
    required this.child,
    this.onAddFavorite,
    this.onSingleTap,
  }) : super(key: key);

  final Function? onAddFavorite;//添加愛心的回調(diào)
  final Function? onSingleTap;//單擊的回調(diào)
  final Widget child;//子部件

2.聲明需要的對象

在_LikeGestureWidgetState中聲明需要的對象

類：_LikeGestureWidgetState

  GlobalKey _key = GlobalKey();//用于位置的計(jì)算
  List<Offset> icons = [];//存儲點(diǎn)擊位置
  int lastMilliSeconds = -1;//記錄上次手指抬起的時間毫秒值

3.手勢的處理

我們通過GestureDetector來監(jiān)聽手指按下和抬起的事件。
使用lastMilliSeconds記錄抬起時的時間毫秒值，在onTapDown回調(diào)的時候，獲取當(dāng)前的時間毫秒值，通過抬起和按下的時間差值，我們設(shè)定判斷條件。這里如果差值小于500毫秒，就向列表中添加此時手指點(diǎn)擊的位置，如果大于500毫秒就是單擊事件，同時重建UI。
GestureDetector是最外層的部件，既控制手勢的點(diǎn)贊效果，同時也控制布局。使用Stack作為GestureDetector的子部件，Stack是層疊式布局，將外部的部件至于小紅心動畫視圖的下面

類：_LikeGestureWidgetState

 @override
  Widget build(BuildContext context) {

    return GestureDetector(
      key: _key,
      onTapDown: (detail) {

        setState(() {
          //獲取當(dāng)前時間的毫秒值
          int currentMilliSeconds = DateTime.now().millisecondsSinceEpoch;
          //計(jì)算當(dāng)前時間毫秒值與上次抬起時間的差值
          int diff = currentMilliSeconds - lastMilliSeconds;
          //如果差值小于500毫秒，就向列表中添加此時手指點(diǎn)擊的位置，如果大于500毫秒就是單擊事件
          if(diff < 500){
            icons.add(_convertPosition(detail.globalPosition));
            widget.onAddFavorite?.call();
          }else{
            widget.onSingleTap?.call();
          }
        });
      },
      onTapUp: (detail) {
        //手指抬起時的時間毫秒值
        lastMilliSeconds = DateTime.now().millisecondsSinceEpoch;
      },

      child: Stack(
        children: <Widget>[
          //外部的部件，至于動畫的下面
          widget.child,
          //小紅心動畫效果
          _getIconStack(),
        ],
      ),
    );
   }
  // 將給定的點(diǎn)從邏輯像素的全局坐標(biāo)系統(tǒng)轉(zhuǎn)換為此部件的局部坐標(biāo)系統(tǒng)。
  Offset _convertPosition(Offset p) {
    RenderBox getBox = _key.currentContext!.findRenderObject() as RenderBox;
    return getBox.globalToLocal(p);
  }

4.動畫小紅心的布局

好了，我們現(xiàn)在安排小紅心動效。小紅心是可以層疊顯示的，所以這里還是使用Stack部件來作為小紅心的父布局。遍歷列表icons來創(chuàng)建Stack的子部件。

類：_LikeGestureWidgetState

 _getIconStack() {
    return Stack(
      children: icons.map<Widget>(
            (position) => TikTokFavoriteAnimationIcon(
              key: Key(position.toString()),
              position: position,
              onAnimationStart: () {
            icons.remove(position);
          },
        ),
      ).toList(),
    );
  }

5.小紅心動效

我們將小紅心的動效提取成一個單獨(dú)的部件TikTokFavoriteAnimationIcon，構(gòu)造函數(shù)如下:

類：TikTokFavoriteAnimationIcon

  final Offset? position;//位置
  final double size;//圖標(biāo)大小
  final Function? onAnimationStart;//動畫開始的回調(diào)

  const TikTokFavoriteAnimationIcon({
    Key? key,
    this.onAnimationStart,
    this.position,
    this.size: 160,
  }) : super(key: key);

_TikTokFavoriteAnimationIconState中聲明動畫控制器，以及小紅心的旋轉(zhuǎn)角度，每一次setState的時候，旋轉(zhuǎn)角度都會隨機(jī)生成。

類：_TikTokFavoriteAnimationIconState

  //動畫控制器
  AnimationController? _animationController;
  //圖標(biāo)的旋轉(zhuǎn)角度，隨機(jī)
  double rotate = pi / 10.0 * (2 * Random().nextDouble() - 1);
  
    @override
  void initState() {
    _animationController = AnimationController(
      lowerBound: 0,
      upperBound: 1,
      duration: Duration(milliseconds: 1000),
      vsync: this,
    );

    _animationController!.addListener(() {
      setState(() {});
    });
    startAnimation();
    super.initState();
  }

開始動畫的時候，我們就要將動畫的位置刪除，

  //開始動畫,動畫一執(zhí)行，就從列表里刪除動畫對應(yīng)的位置
  startAnimation() async {
    await _animationController!.forward();
    widget.onAnimationStart?.call();
  }

小紅心在布局中的位置，我們怎么來顯示呢？之前我們使用了Stack部件作為布局，這個就簡單了，使用Position部件可以準(zhǔn)確的確定小紅心的位置，我們也可以控制小紅心在手指按下位置的偏移。

  @override
  Widget build(BuildContext context) {
    return widget.position == null
        ? Container()
        : Positioned(
            left: widget.position!.dx - widget.size /2,
            top: widget.position!.dy - widget.size ,
            child: _getBody(),
          );
  }

小紅心的動效有旋轉(zhuǎn)、不透明度、縮放這三種效果，以及漸變的效果。

 _getBody() {
    return Transform.rotate(
      angle: rotate,
      child: Opacity(
        opacity: opacity,
        child: Transform.scale(
          alignment: Alignment.bottomCenter,
          scale: scale,
          child: _getContent(),
        ),
      ),
    );
  }


  //獲取動畫的值
  double get value => _animationController!.value;

  //獲取動畫的不透明度
  double get opacity {
    if (value < 0.1) {
      return 0.9 / 0.1 * value;
    }
    if (value < 0.8) {
      return 0.9;
    }
    var res = 0.9 - (value - 0.8) / (1 - 0.8);
    return res < 0 ? 0 : res;

  }

  //獲取動畫的縮放比例
  double get scale {
    if(value <= 0.5){
      return  0.6+value / 0.5 * 0.5;
    }else if(value<=0.8){
      return 1.1 * (1/1.1 + (1.1 -1)/1.1 * (value - 0.8) / 0.25);
    }else {
      return 1 + (value - 0.8)/0.2 * 0.5;
    }
  }

  _getContent() {
    return ShaderMask(
      child: _getChild(),
      blendMode: BlendMode.srcATop,
      shaderCallback: (Rect bounds) => RadialGradient(
        center: Alignment.topLeft.add(Alignment(0.5, 0.5)),
        colors: [
          Color(0xffEF6F6F),
          Color(0xffF03E3E),
        ],
      ).createShader(bounds),
    );
  }
  //圖標(biāo)
  _getChild() {
    return Icon(Icons.favorite_rounded,size: widget.size,);
  }