QQ20191224-093618.gif
Flutter 仿抖音效果 (一) 全屏點(diǎn)愛星
Flutter 仿抖音效果 (二) 界面布局
[Flutter 仿抖音效果 (三) 視頻播放列表] (http://www.lxweimin.com/p/d0f44241d80f)
項(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ù)效果更新