QQ20191224-093618.gif

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

實現(xiàn)點愛心的效果需要解決的問題

• 1.onDoubleTap 無法獲取到點擊的坐標
• 2.flutter 用tree布局的如何將愛心分離出原來StatefulWidget 進行動畫和操作
• 3.連貫動畫如何實現(xiàn)

如何解決flutter原生的double事件沒有返回坐標

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

代碼如下

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

實現(xiàn)雙擊

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 控件,控件詳細介紹 http://www.itdecent.cn/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);

連貫動畫如何實現(xiàn)

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

• 分解第一步:縮小
  我們設(shè)置初始值為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 函數(shù)的,對scale值進行改變

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

• 分解第二步:上移
  我們初始化時候先下20個坐標點,在動畫還原到原來的位置,這點很關(guān)鍵,為什么我們不是從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,
        ),
      ),
    );

現(xiàn)實

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

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

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 持續(xù)效果更新