QQ20191224-093618.gif
Flutter 仿抖音效果 (一) 全屏点爱星
Flutter 仿抖音效果 (二) 界面布局
[Flutter 仿抖音效果 (三) 视频播放列表] (https://www.jianshu.com/p/d0f44241d80f)

项目地址:https://github.com/CZXBigBrother/flutter_TikTok 持续效果更新

实现点爱心的效果需要解决的问题

• 1.onDoubleTap 无法获取到点击的坐标
• 2.flutter 用tree布局的如何将爱心分离出原来StatefulWidget 进行动画和操作
• 3.连贯动画如何实现

如何解决flutter原生的double事件没有返回坐标

flutter 有个onTapUp 事件,字面意思就是 点击抬起的,会返回 TapUpDetails details,通过localPosition属性就能获取到x,y坐标
计算double 并不复杂,每次点击的时候记录下当前的事件戳,只要两个点击的时间戳和坐标距离小于自己设定的阈值,就可以视为双击事件

代码如下

  // 记录时间
  var touchTime = new DateTime.now();
  // 记录坐标
  var touchPoint = new MathPoint(-999, -999);

实现双击

onTapUp: (TapUpDetails details) {
          // 当前时间-上次记录的时间
          var t = new DateTime.now().millisecondsSinceEpoch -
              this.touchTime.millisecondsSinceEpoch;
          // 获取当前坐标
          var currentPoint =
              new MathPoint(details.localPosition.dx, details.localPosition.dy);
          //计算两次距离
          var distance = currentPoint.distanceTo(this.touchPoint);
          // 记录当前时间
          this.touchTime = new DateTime.now();
          // 记录当前坐标
          this.touchPoint = currentPoint;
          // 判断两次间隔是否小于300毫秒
          if (t < 300 && distance < 20) {
            this.touchTime = new DateTime.fromMicrosecondsSinceEpoch(0);
            // print(details.localPosition.dx);
            // print(details.localPosition.dy);
          }

如何解决tree布局的如何将爱心分离出

我们使用OverlayEntry 控件,控件详细介绍 https://www.jianshu.com/p/cc8aab935e11

var overlayState = Overlay.of(context);
    OverlayEntry overlayEntry;
    double width = 50;
    double height = 50;
    double x = dx - width / 2;
    double y = dy + height / 2;

    overlayEntry = new OverlayEntry(builder: (context) {
      return Stack(
        children: <Widget>[
          new Positioned(
            left: x,
            top: y,
            child: new LikeView(
              overlayEntry: overlayEntry,
            ),
          ),
        ],
      );
    });
    ///插入全局悬浮控件
    overlayState.insert(overlayEntry);

连贯动画如何实现

效果一共有 缩小 → 上移 → 放大 → 消失
第一组动画(缩小 上移) → 第二组动画(放大 消失)
flutter 动画需要两个类
AnimationController 负责管理动画
Animation 负责具体值操作

• 分解第一步:缩小
  我们设置初始值为1.5倍的大小,然后动画缩回1倍

scaleAnimate = Tween<double>(
      begin: 1.5,
      end: 1,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0,
          1.0,
          curve: Curves.ease,
        ),
      ),
    );

然后通过 Transform.scale 函数的,对scale值进行改变

return AnimatedBuilder(
        builder: (BuildContext context, Widget child) {
          return Transform.scale(
           ..........
            scale: scaleAnimate.value,
          );
        },
        animation: controller,
      );

• 分解第二步:上移
  我们初始化时候先下20个坐标点,在动画还原到原来的位置,这点很关键,为什么我们不是从0开始下移20个坐标呢,主要是因为动画比较多,我们要将动画分成两次去刷新,如果我们是从0开始往上,我们再第二次动画时候就要手动改变初始化坐标,到上移的20个点,这样我们可以少做一次操作看后面的代码

// 向上移动
    upLocation = Tween<EdgeInsets>(
      begin: EdgeInsets.only(top: 20.0),
      end: EdgeInsets.only(top: 0.0),
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0,
          1.0,
          curve: Curves.ease,
        ),
      ),
    );

补全第一组动画

return AnimatedBuilder(
        builder: (BuildContext context, Widget child) {
          return Transform.scale(
            child: Padding(
              padding: upLocation.value,
              child: Image.asset(
                'assets/images/love.jpeg',
                fit: BoxFit.fill,
                width: width,
                height: height,
              ),
            ),
            scale: scaleAnimate.value,
          );
        },
        animation: controller,
      );

• 分解第三第四步 放大消失 同理

// 消失动画
    display = Tween<double>(
      begin: 1,
      end: 0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0,
          1.0,
          curve: Curves.ease,
        ),
      ),
    );
    //放大
    scaleAnimate2 = Tween<double>(
      begin: 1,
      end: 1.5,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0,
          1.0,
          curve: Curves.ease,
        ),
      ),
    );

现实

return AnimatedBuilder(
        builder: (BuildContext context, Widget child) {
          return Transform.scale(
            child: Opacity(
              opacity: display.value,
              child: Image.asset(
                'assets/images/love.jpeg',
                fit: BoxFit.fill,
                width: width,
                height: height,
              ),
            ),
            scale: scaleAnimate2.value,
          );
        },
        animation: controller,
      );

• 第一组和第二组动画刷新
  我们设置一个标签step,通过对AnimationController的监听,我在第一次动画结束时更新step,然后开始第二组动画,当第二组动画结束时 删除对象

controller = new AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          print("status is completed");
          if (this.step == 0) {
            this.step = 1;
            controller.reset();
            this.setState(() {});
          } else if (this.step == 1) {
            widget.overlayEntry.remove();
          }
        }
      });

QQ20191224-093618.gif

项目地址:https://github.com/CZXBigBrother/flutter_TikTok 持续效果更新