最近迷上了《掃黑風暴》,崇拜起了李成陽,特此週末用flutter為大家獻上一個保熟的瓜。? ?
效果圖
##使用方法
Shimmer(
baseColor: const Color(0x08ffffff), // 背景顏色
highlightColor: Colors.white, // 高光的顏色
loop: 2, // 閃爍迴圈次數,不傳預設一直迴圈
child: Image.asset('assets/images/watermelon.png',width: 325, height: 260, fit: BoxFit.contain),
)
複製程式碼
實現原理
① 特效控制元件分為兩層:底層顯示呼叫方傳入的控制元件;上層覆蓋一層漸變著色器。
② 啟動動畫,根據動畫的進度,對漸變著色器的區域進行繪製,當區域變大變小時,著色器高光的地方也在相應進行偏移。
③ 同時著色器不能超出底層控制元件的繪製範圍,底層控制元件的形狀是不規則的,漸變層不能超出底層控制元件的layer物件。這樣才能實現完全貼合 底層控制元件形狀 的微光閃爍。
- 控制元件分層顯示
@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();
}
}
複製程式碼
- 重點:著色器該如何繪製,又該如何通過AnimationController的進度進行偏移?由於著色器不能超出底層控制元件的繪製範圍,所以必須拿到底層控制元件的繪製上下文【即 PaintingContext】,呼叫其pushLayer方法,讓引擎把著色器繪製上去。
需要用到PaintingContext,自然就需要去管理RenderObject,所以著色器的編寫使用RenderProxyBox進行計算並繪製出layer物件,計算的過程根據上面的AnimationController的進度進行計算。
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;
}
}
複製程式碼
寫在最後
- 這種閃爍動畫,應用場景多種多樣。可以作為對重要檢視的著重顯示,例如:勳章;也可以作為載入中骨架屏的載入動畫。自己靈活使用即可。
- 作為一個大前端開發者,我希望把UI盡善盡美的展現給使用者;此時你不僅需要一個集能力、審美、高標準於一體的設計師配合,更需要自己對所寫介面有著極高的追求。而Flutter作為一個UI框架,玩到最後其實就是特效動畫的高效能編寫,這勢必離不開其繪製原理,不要停留在widget、element的學習,Render、layer甚至再底層的C++才是我們學習路徑。
- 參考文件:
api.flutter-io.cn/flutter/ren… www.cnblogs.com/lxlx1798/ar… github.com/hnvn/flutte…
小弟班門弄斧,希望能一起學習進步!!!