闲聊
人一旦运气差，喝水都能噎着。我又被发”毕业证“了，😭，对！！！没有听错，发毕业证的当天上午刚讨论完需求，中午吃完饭，正常去公司前面的小公园溜达，没想到，从天而降的暗器打到我的手臂上，我下意识一跺脚，发出一声”我靠“。原来是一口鸟屎。心里掐指一算，我这是要中奖？晚上下班一定买个彩票。
下午和设计正讨论动画如何做时，企业微信收到一个消息，咳咳，龙哥来xxx会议室下。这时我才明白中午鸟屎的真正含义。心里发出一声”我靠“。从会议室出来才知道我解放了，在一分钟后，我才知道整个团队都解放了。收拾东西就可以走了，这时我才明白中午鸟屎是让我可以早点下班，才可以赶上买彩票。要不然正常下班赶不上了。
需求
这两天看不下去八股文，就想先休息几天追追剧，打开腾讯视频看看动漫，发现腾讯视频的顶部banner效果满新颖的，处于个人爱好，就简单实现了下这个效果，不过我在此基础上加了一些修改。自己也充当一次产品经理过把瘾，具体效果见效果图。
效果
实现
因为没多少代码，比较的简单，几分钟搞定，也懒得写实现原理了，直接一把嗦上代码。
直接定义一个widget，啥玩意都放上。
/// 仿腾讯视频Banner效果
/// 这里有一些区别，纯属个人觉得这样更喜欢，所以充当了一下产品，修改了需求不同意见莫怪😁
/// 区别1、手势滑动正经半圆效果，腾讯视频是曲线，这里看个人喜好。
/// 区别2、左滑和右滑圆弧效果和手势方向一样，腾讯视频是相同方向都向右。
/// 区别3、不管左滑右滑都是切换相同的下一个，腾讯视频是不同的。
///
class TxBannerWidget extends StatefulWidget {
const TxBannerWidget({
super.key,
required this.children,
});
final List<Widget> children;
@override
State<TxBannerWidget> createState() => _TxBannerWidgetState();
}
class _TxBannerWidgetState extends State<TxBannerWidget>
with TickerProviderStateMixin {
double _clipFraction = 0.0;
double _clipFractionCache = 0.0;
int currentIndex = 0;
double? scale;
Timer? _timer;
late AnimationController _controller;
late AnimationController _autoController;
late Animation<double> _animation;
List<Widget> get bannerWidgets {
List<Widget> widgetList = [];
int n = widget.children.length;
int widgetIndex = currentIndex + n;
while (widgetIndex >= currentIndex) {
if (widgetIndex == currentIndex) {
widgetList.add(
ClipPath(
clipper: BannerClipper(clipFraction: _clipFraction),
child: widget.children[widgetIndex % n],
),
);
} else {
widgetList.add(widget.children[widgetIndex % n]);
}
widgetIndex--;
}
return widgetList.toList();
}
@override
void initState() {
super.initState();
// 手势操作后动画
_controller = AnimationController(
duration: const Duration(milliseconds: 300),
vsync: this,
);
_animation = Tween<double>(begin: 1, end: 0.0).animate(_controller)
..addListener(() {
setState(() {
if (_clipFractionCache.abs() >= (scale ?? 0.5)) {
if (_clipFractionCache > 0) {
_clipFraction = _clipFractionCache +
((1 + (scale ?? 0.5)) - _clipFractionCache) *
(1 - _animation.value);
} else {
_clipFraction = _clipFractionCache -
((1 + (scale ?? 0.5)) - _clipFractionCache.abs()) *
(1 - _animation.value);
}
} else {
_clipFraction = _clipFractionCache * _animation.value;
}
});
})
..addStatusListener((status) {
setState(() {
if (status == AnimationStatus.completed && _clipFraction.abs() >= 1) {
_clipFraction = 0.0;
currentIndex = currentIndex + 1;
}
});
});
// 自动切换动画
_autoController = AnimationController(
duration: const Duration(milliseconds: 500),
lowerBound: 0.0,
upperBound: (1 + (scale ?? 0.5)),
vsync: this,
)
..addListener(() {
setState(() {
_clipFraction = -_autoController.value;
});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
_clipFraction = 0.0;
currentIndex = currentIndex + 1;
}
});
WidgetsBinding.instance.addPostFrameCallback((_) {
_startAutoTimer();
});
}
/// 开启自动切换计时器
void _startAutoTimer() {
const duration = Duration(seconds: 3);
_timer = Timer.periodic(duration, (Timer timer) {
_clipFraction = 0.0;
_autoController.reset();
_autoController.forward();
});
}
/// 停止自动切换计时器
void _stopAutoTimer() {
_timer?.cancel();
_timer = null;
}
/// 开启手势抬起后动画
void _startAnimation() {
_controller.reset();
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
_autoController.dispose();
_stopAutoTimer();
super.dispose();
}
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
scale = constraints.maxHeight / constraints.maxWidth;
return GestureDetector(
onHorizontalDragDown: (DragDownDetails details) {
_clipFraction = 0.0;
_stopAutoTimer();
},
onHorizontalDragUpdate: (DragUpdateDetails details) {
setState(() {
_clipFraction += details.delta.dx / context.size!.width;
_clipFractionCache = _clipFraction;
});
},
onHorizontalDragEnd: (DragEndDetails details) {
_startAnimation();
_startAutoTimer();
},
child: Stack(
fit: StackFit.expand,
children: [
...bannerWidgets,
Positioned(
left: 0,
right: 0,
bottom: 10,
child: PointWidget(
index: currentIndex % widget.children.length,
max: widget.children.length,
),
)
],
),
);
},
);
}
}
/// 自定义裁剪
class BannerClipper extends CustomClipper<Path> {
final double clipFraction;
BannerClipper({required this.clipFraction});
@override
Path getClip(Size size) {
Path path = Path();
if (clipFraction >= 0) {
double width = size.width * clipFraction;
path.moveTo(width, 0);
path.lineTo(size.width, 0);
path.lineTo(size.width, size.height);
path.lineTo(width, size.height);
path.arcTo(
Rect.fromLTWH(width - size.height, 0, size.height, size.height),
pi / 2,
-pi,
false,
);
path.close();
} else {
double width = size.width * (1 + clipFraction);
path.moveTo(0, 0);
path.lineTo(width, 0);
path.arcTo(
Rect.fromLTWH(width, 0, size.height, size.height),
-pi / 2,
-pi,
false,
);
path.lineTo(width, size.height);
path.lineTo(0, size.height);
path.close();
}
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return true;
}
}
/// 游标widget
class PointWidget extends StatelessWidget {
const PointWidget({
Key? key,
required this.max,
required this.index,
}) : super(key: key);
final int max;
final int index;
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [..._pointsWidget()],
);
}
List<Widget> _pointsWidget() {
List<Widget> points = [];
for (int i = 0; i < max; i++) {
points.add(Container(
margin: const EdgeInsets.only(left: 4),
width: 8,
height: 8,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: index == i ? Colors.blue : Colors.white,
),
));
}
return points;
}
}
使用
TxBannerWidget(
children: [
Image.asset(
ImageUtils.getImgPath("img1", format: "jpg"),
fit: BoxFit.fill,
),
Image.asset(
ImageUtils.getImgPath("img2", format: "jpg"),
fit: BoxFit.fill,
),
Image.asset(
ImageUtils.getImgPath("img3", format: "jpg"),
fit: BoxFit.fill,
),
Image.asset(
ImageUtils.getImgPath("img4", format: "jpg"),
fit: BoxFit.fill,
),
],
),
好了就这样吧，如有发现bug，自己慢慢修改下就行了，毕竟没有项目使用过，懒得写结尾了，我去追剧了。
完整代码见github搜索：flutter_xy
