Flutter仿掘金点赞效果

逃离我推掉我的手 2023-02-10 08:09 13阅读 0赞

![20200520210603614.png][]

> 老孟导读：今天分享一下如何实现掘金点赞效果，这不仅仅是一篇技术文章，还是一篇解决问题思路的文章，遇到一个需求时，如何拆分需求，然后一步一步实现，这个过程比单纯的技术（此文）更有含金量。

先来看一下掘金点赞的效果：

![jue\_1][jue_1]

说点题外话，感谢一下**二哥**（**沉默王二** ），给了我很多建议和帮助，公众号搜索**沉默王二**即可关注。

遇到组合动画效果时，首先拆分一下这个动画，以掘金点赞效果为例，共分为3个动画效果：

1.  **小手**图标改变颜色并且缩放一下。
2.  **圆环**由粗变细，透明度逐渐变为0。
3.  最外圈**小点点**透明度逐渐变为0。

拆分好了之后，就一步一步实现其效果。

## 小手缩放效果 ##

**小手**缩放效果需要2个图标，选中和未选中两种状态，我从阿里的图标库中选了2个类似的图标（未找到一摸一样的）。两种状态的图标定义如下：

///
    /// 未点赞icon
    ///
    const Icon _unLikeIcon = Icon(
      IconData(0xe60a, fontFamily: 'appIconFonts'),
    );
    
    ///
    /// 点赞icon
    ///
    const Icon _likeIcon = Icon(
      IconData(0xe60c, fontFamily: 'appIconFonts'),
      color: Color(0xFF1afa29),
    );

关于如何使用阿里的图标库中的图标可以[查看此文章][Link 1]。

由于**小手**图标的动画效果是放大->还原，使用[组合动画][Link 2]实现其效果，代码如下：

@override
    initState() {
      _animationController =
          AnimationController(duration: Duration(milliseconds: 300), vsync: this);
    
    
      _iconAnimation = Tween(begin: 1.0, end: 1.3).animate(_animationController);
    
      _iconAnimation = TweenSequence([
        TweenSequenceItem(
            tween: Tween(begin: 1.0, end: 1.3)
                .chain(CurveTween(curve: Curves.easeIn)),
            weight: 50),
        TweenSequenceItem(tween: Tween(begin: 1.3, end: 1.0), weight: 50),
      ]).animate(_animationController);
    }
    
    @override
      Widget build(BuildContext context) {
        return _buildLikeIcon();
      }
    
    _buildLikeIcon() {
        return ScaleTransition(
          scale: _iconAnimation,
          child: widget.like
              ? IconButton(
                  padding: EdgeInsets.all(0),
                  icon: _likeIcon,
                  onPressed: () {
                    _clickIcon();
                  },
                )
              : IconButton(
                  padding: EdgeInsets.all(0),
                  icon: _unLikeIcon,
                  onPressed: () {
                    _clickIcon();
                  },
                ),
        );
      }

添加按钮点击效果：

_clickIcon() {
      if (_iconAnimation.status == AnimationStatus.forward ||
          _iconAnimation.status == AnimationStatus.reverse) {
        return;
      }
      setState(() {
        widget.like = !widget.like;
      });
      if (_iconAnimation.status == AnimationStatus.dismissed) {
        _animationController.forward();
      } else if (_iconAnimation.status == AnimationStatus.completed) {
        _animationController.reverse();
      }
    }

![jue\_2][jue_2]

## 圆环动画 ##

圆环的动画效果是线条宽度逐渐变为0，透明度逐渐变为0，相对简单，使用**AnimatedBuilder**实现：

_buildCircle() {
      return !widget.like
          ? Container()
          : AnimatedBuilder(
              animation: _circleAnimation,
              builder: (BuildContext context, Widget child) {
                return Container(
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(
                          color: Color(0xFF5FA0EC)
                              .withOpacity(_circleAnimation.value),
                          width: _circleAnimation.value * 8)),
                );
              },
            );
    }

定义**\_circleAnimation**：

_circleAnimation =
        Tween(begin: 1.0, end: 0.0).animate(_animationController);

![jue\_3][jue_3]

## 最外圈小点点 ##

最外圈的小点点动画效果是最简单的，透明度逐渐变为0，但布局相对复杂，围绕**小手**形成一个圆形，使用**Flow**实现此布局，**Flow**是一个非常酷炫的布局组件，更多用法[查看此文][Link 3]。

构建单个小圆点

_buildCirclePoint(double radius, Color color) {
      return !widget.like
          ? Container()
          : AnimatedBuilder(
              animation: _circleAnimation,
              builder: (BuildContext context, Widget child) {
                return Container(
                  width: radius,
                  height: radius,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: color.withOpacity(_circleAnimation.value)),
                );
              },
            );
    }

构建围绕**小手**的多个点：

_buildCirclePoints() {
      return Flow(
        delegate: CirclePointFlowDelegate(),
        children: <Widget>[
          _buildCirclePoint(2, Color(0xFF97B1CE)),
          _buildCirclePoint(5, Color(0xFF4AC6B7)),
          _buildCirclePoint(2, Color(0xFF97B1CE)),
          _buildCirclePoint(5, Color(0xFF4AC6B7)),
          _buildCirclePoint(2, Color(0xFF97B1CE)),
          _buildCirclePoint(5, Color(0xFF4AC6B7)),
          _buildCirclePoint(2, Color(0xFF97B1CE)),
          _buildCirclePoint(5, Color(0xFF4AC6B7)),
          _buildCirclePoint(2, Color(0xFF97B1CE)),
          _buildCirclePoint(5, Color(0xFF4AC6B7)),
          _buildCirclePoint(2, Color(0xFF97B1CE)),
          _buildCirclePoint(5, Color(0xFF4AC6B7)),
          _buildCirclePoint(2, Color(0xFF97B1CE)),
          _buildCirclePoint(5, Color(0xFF4AC6B7)),
          _buildCirclePoint(2, Color(0xFF97B1CE)),
          _buildCirclePoint(5, Color(0xFF4AC6B7)),
        ],
      );
    }

CirclePointFlowDelegate 定义如下：

class CirclePointFlowDelegate extends FlowDelegate {
      CirclePointFlowDelegate();
    
      @override
      void paintChildren(FlowPaintingContext context) {
        var radius = min(context.size.width, context.size.height) / 2.0;
        //中心点
        double rx = radius;
        double ry = radius;
        for (int i = 0; i < context.childCount; i++) {
          if (i % 2 == 0) {
            double x =
                rx + (radius - 5) * cos(i * 2 * pi / (context.childCount - 1));
            double y =
                ry + (radius - 5) * sin(i * 2 * pi / (context.childCount - 1));
            context.paintChild(i, transform: Matrix4.translationValues(x, y, 0));
          } else {
            double x = rx +
                (radius - 5) *
                    cos((i - 1) * 2 * pi / (context.childCount - 1) +
                        2 * pi / ((context.childCount - 1) * 3));
            double y = ry +
                (radius - 5) *
                    sin((i - 1) * 2 * pi / (context.childCount - 1) +
                        2 * pi / ((context.childCount - 1) * 3));
            context.paintChild(i, transform: Matrix4.translationValues(x, y, 0));
          }
        }
      }
    
      @override
      bool shouldRepaint(FlowDelegate oldDelegate) => true;
    }

![jue\_4][jue_4]

## 交流 ##

老孟Flutter博客地址（近200个控件用法）：[http://laomengit.com][http_laomengit.com]

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

[20200520210603614.png]: https://img-blog.csdnimg.cn/20200520210603614.png
[jue_1]: https://img-blog.csdnimg.cn/20200520210603773.png
[Link 1]: http://laomengit.com/flutter/articles/openProject/iconfont.html
[Link 2]: http://laomengit.com/flutter/articles/aboutAnimation/animation_combined.html
[jue_2]: https://img-blog.csdnimg.cn/20200520210603950.png
[jue_3]: https://img-blog.csdnimg.cn/2020052021060473.png
[Link 3]: http://laomengit.com/flutter/widgets/Flow.html
[jue_4]: https://img-blog.csdnimg.cn/20200520210604243.png
[http_laomengit.com]: http://laomengit.com