最近迷上了《掃黑風(fēng)暴》详拙，崇拜起了李成陽帝际，特此周末用flutter為大家獻(xiàn)上一個(gè)保熟的瓜。?? ??
效果圖
這瓜保熟
使用方法
Shimmer(
baseColor: const Color(0x08ffffff), // 背景顏色
highlightColor: Colors.white, // 高光的顏色
loop: 2, // 閃爍循環(huán)次數(shù)饶辙，不傳默認(rèn)一直循環(huán)
child: Image.asset('assets/images/watermelon.png',width: 325, height: 260, fit: BoxFit.contain),
)
實(shí)現(xiàn)原理
① 特效控件分為兩層：底層顯示調(diào)用方傳入的控件蹲诀；上層覆蓋一層漸變著色器。
② 啟動動畫弃揽，根據(jù)動畫的進(jìn)度脯爪，對漸變著色器的區(qū)域進(jìn)行繪制，當(dāng)區(qū)域變大變小時(shí)矿微，著色器高光的地方也在相應(yīng)進(jìn)行偏移痕慢。
③ 同時(shí)著色器不能超出底層控件的繪制范圍，底層控件的形狀是不規(guī)則的冷冗，漸變層不能超出底層控件的layer對象守屉。這樣才能實(shí)現(xiàn)完全貼合 底層控件形狀 的微光閃爍。
- 控件分層顯示
@override
Widget build(BuildContext context) {
return Stack(
children: [
// 底層控件
widget.child,
// 覆蓋閃爍微光
AnimatedBuilder(
animation: _controller,
child: widget.child,
builder: (BuildContext context, Widget? child) => _Shimmer(
child: child,
percent: _controller.value,
direction: widget.direction,
gradient: widget.gradient,
),
)
],
);
- 開啟動畫
late AnimationController _controller;
int _count = 0;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: widget.duration)
..addStatusListener((AnimationStatus status) {
if (status != AnimationStatus.completed) {
return;
}
_count++;
if (widget.loop != 0 && _count < widget.loop) {
_controller.forward(from: 0.0);
}
});
if (widget.loop == 0) {
_controller.repeat();
} else {
_controller.forward();
}
}
- 重點(diǎn)：著色器該如何繪制蒿辙，又該如何通過AnimationController的進(jìn)度進(jìn)行偏移拇泛？由于著色器不能超出底層控件的繪制范圍，所以必須拿到底層控件的繪制上下文【即 PaintingContext】思灌，調(diào)用其pushLayer方法俺叭，讓引擎把著色器繪制上去。
需要用到PaintingContext泰偿，自然就需要去管理RenderObject熄守，所以著色器的編寫使用RenderProxyBox進(jìn)行計(jì)算并繪制出layer對象，計(jì)算的過程根據(jù)上面的AnimationController的進(jìn)度進(jìn)行計(jì)算。
class _ShimmerFilter extends RenderProxyBox {
ShimmerDirection _direction;
Gradient _gradient;
double _percent;
_ShimmerFilter(this._percent, this._direction, this._gradient);
@override
ShaderMaskLayer? get layer => super.layer as ShaderMaskLayer?;
set percent(double newValue) {
if (newValue != _percent) {
_percent = newValue;
markNeedsPaint();
}
}
set gradient(Gradient newValue) {
if (newValue != _gradient) {
_gradient = newValue;
markNeedsPaint();
}
}
set direction(ShimmerDirection newDirection) {
if (newDirection != _direction) {
_direction = newDirection;
markNeedsLayout();
}
}
@override
void paint(PaintingContext context, Offset offset) {
if (child != null) {
final double width = child!.size.width;
final double height = child!.size.height;
Rect rect;
double dx, dy;
if (_direction == ShimmerDirection.rtl) {
dx = _offset(width, -width, _percent);
dy = 0.0;
rect = Rect.fromLTWH(dx - width, dy, 3 * width, height);
} else if (_direction == ShimmerDirection.ttb) {
dx = 0.0;
dy = _offset(-height, height, _percent);
rect = Rect.fromLTWH(dx, dy - height, width, 3 * height);
} else if (_direction == ShimmerDirection.btt) {
dx = 0.0;
dy = _offset(height, -height, _percent);
rect = Rect.fromLTWH(dx, dy - height, width, 3 * height);
} else {
dx = _offset(-width, width, _percent);
dy = 0.0;
rect = Rect.fromLTWH(dx - width, dy, 3 * width, height);
}
layer ??= ShaderMaskLayer();
layer!
..shader = _gradient.createShader(rect)
..maskRect = offset & size
..blendMode = BlendMode.srcIn;
context.pushLayer(layer!, super.paint, offset);
} else {
layer = null;
}
}
double _offset(double start, double end, double percent) {
return start + (end - start) * percent;
}
}
Render對象繪制出來后裕照，需要封裝成widget使用攒发，由于是單一組件，用SingleChildRenderObjectWidget即可晋南。
class _Shimmer extends SingleChildRenderObjectWidget {
@override
_ShimmerFilter createRenderObject(BuildContext context) {
return _ShimmerFilter(percent, direction, gradient);
}
@override
void updateRenderObject(BuildContext context, _ShimmerFilter shimmer) {
shimmer.percent = percent;
shimmer.gradient = gradient;
shimmer.direction = direction;
}
}
寫在最后
- 這種閃爍動畫惠猿，應(yīng)用場景多種多樣「杭洌可以作為對重要視圖的著重顯示偶妖，例如：勛章；也可以作為加載中骨架屏的加載動畫政溃。自己靈活使用即可趾访。
- 作為一個(gè)大前端開發(fā)者，我希望把UI盡善盡美的展現(xiàn)給用戶董虱；此時(shí)你不僅需要一個(gè)集能力扼鞋、審美、高標(biāo)準(zhǔn)于一體的設(shè)計(jì)師配合空扎，更需要自己對所寫界面有著極高的追求藏鹊。而Flutter作為一個(gè)UI框架，玩到最后其實(shí)就是特效動畫的高性能編寫转锈，這勢必離不開其繪制原理盘寡，不要停留在widget、element的學(xué)習(xí)撮慨，Render竿痰、layer甚至再底層的C++才是我們學(xué)習(xí)路徑。
- 參考文檔：
https://api.flutter-io.cn/flutter/rendering/PaintingContext-class.html
https://www.cnblogs.com/lxlx1798/articles/11219684.html
https://github.com/hnvn/flutter_shimmer
小弟班門弄斧砌溺，希望能一起學(xué)習(xí)進(jìn)步Ｓ吧妗！规伐！
