QQ20191224-093618.gif

項(xiàng)目地址:https://github.com/CZXBigBrother/flutter_TikTok 持續(xù)效果更新

實(shí)現(xiàn)點(diǎn)愛心的效果需要解決的問(wèn)題

• 1.onDoubleTap 無(wú)法獲取到點(diǎn)擊的坐標(biāo)
• 2.flutter 用tree布局的如何將愛心分離出原來(lái)StatefulWidget 進(jìn)行動(dòng)畫和操作
• 3.連貫動(dòng)畫如何實(shí)現(xiàn)

如何解決flutter原生的double事件沒(méi)有返回坐標(biāo)

flutter 有個(gè)onTapUp 事件,字面意思就是 點(diǎn)擊抬起的,會(huì)返回 TapUpDetails details,通過(guò)localPosition屬性就能獲取到x,y坐標(biāo)
計(jì)算double 并不復(fù)雜,每次點(diǎn)擊的時(shí)候記錄下當(dāng)前的事件戳,只要兩個(gè)點(diǎn)擊的時(shí)間戳和坐標(biāo)距離小于自己設(shè)定的閾值,就可以視為雙擊事件

代碼如下

  // 記錄時(shí)間
  var touchTime = new DateTime.now();
  // 記錄坐標(biāo)
  var touchPoint = new MathPoint(-999, -999);

實(shí)現(xiàn)雙擊

onTapUp: (TapUpDetails details) {
          // 當(dāng)前時(shí)間-上次記錄的時(shí)間
          var t = new DateTime.now().millisecondsSinceEpoch -
              this.touchTime.millisecondsSinceEpoch;
          // 獲取當(dāng)前坐標(biāo)
          var currentPoint =
              new MathPoint(details.localPosition.dx, details.localPosition.dy);
          //計(jì)算兩次距離
          var distance = currentPoint.distanceTo(this.touchPoint);
          // 記錄當(dāng)前時(shí)間
          this.touchTime = new DateTime.now();
          // 記錄當(dāng)前坐標(biāo)
          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 控件,控件詳細(xì)介紹 http://www.lxweimin.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);

連貫動(dòng)畫如何實(shí)現(xiàn)

效果一共有 縮小 → 上移 → 放大 → 消失
第一組動(dòng)畫(縮小 上移) → 第二組動(dòng)畫(放大 消失)
flutter 動(dòng)畫需要兩個(gè)類
AnimationController 負(fù)責(zé)管理動(dòng)畫
Animation 負(fù)責(zé)具體值操作

• 分解第一步:縮小
  我們?cè)O(shè)置初始值為1.5倍的大小,然后動(dòng)畫縮回1倍

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

然后通過(guò) Transform.scale 函數(shù)的,對(duì)scale值進(jìn)行改變

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

• 分解第二步:上移
  我們初始化時(shí)候先下20個(gè)坐標(biāo)點(diǎn),在動(dòng)畫還原到原來(lái)的位置,這點(diǎn)很關(guān)鍵,為什么我們不是從0開始下移20個(gè)坐標(biāo)呢,主要是因?yàn)閯?dòng)畫比較多,我們要將動(dòng)畫分成兩次去刷新,如果我們是從0開始往上,我們?cè)俚诙蝿?dòng)畫時(shí)候就要手動(dòng)改變初始化坐標(biāo),到上移的20個(gè)點(diǎn),這樣我們可以少做一次操作看后面的代碼

// 向上移動(dòng)
    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,
        ),
      ),
    );

補(bǔ)全第一組動(dòng)畫

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,
      );

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

// 消失動(dòng)畫
    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,
        ),
      ),
    );

現(xiàn)實(shí)

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,
      );

• 第一組和第二組動(dòng)畫刷新
  我們?cè)O(shè)置一個(gè)標(biāo)簽step,通過(guò)對(duì)AnimationController的監(jiān)聽,我在第一次動(dòng)畫結(jié)束時(shí)更新step,然后開始第二組動(dòng)畫,當(dāng)?shù)诙M動(dòng)畫結(jié)束時(shí) 刪除對(duì)象

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

項(xiàng)目地址:https://github.com/CZXBigBrother/flutter_TikTok 持續(xù)效果更新