欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flutter給控件實(shí)現(xiàn)鉆石般的微光特效

 更新時(shí)間:2021年08月23日 11:37:01   作者:Karl_wei  
這篇文章主要給大家介紹了關(guān)于Flutter給控件實(shí)現(xiàn)鉆石般的微光特效的相關(guān)資料,實(shí)現(xiàn)的效果非常不錯(cuò),非常適合大家做開(kāi)發(fā)的時(shí)候參考,需要的朋友可以參考下

效果圖

使用方法

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)用方傳入的控件;上層覆蓋一層漸變著色器。

② 啟動(dòng)動(dòng)畫(huà),根據(jù)動(dòng)畫(huà)的進(jìn)度,對(duì)漸變著色器的區(qū)域進(jìn)行繪制,當(dāng)區(qū)域變大變小時(shí),著色器高光的地方也在相應(yīng)進(jìn)行偏移。

③ 同時(shí)著色器不能超出底層控件的繪制范圍,底層控件的形狀是不規(guī)則的,漸變層不能超出底層控件的layer對(duì)象。這樣才能實(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,
          ),
        )
      ],
    );

開(kāi)啟動(dòng)畫(huà)

  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):著色器該如何繪制,又該如何通過(guò)AnimationController的進(jìn)度進(jìn)行偏移?由于著色器不能超出底層控件的繪制范圍,所以必須拿到底層控件的繪制上下文【即 PaintingContext】,調(diào)用其pushLayer方法,讓引擎把著色器繪制上去。

需要用到PaintingContext,自然就需要去管理RenderObject,所以著色器的編寫(xiě)使用RenderProxyBox進(jìn)行計(jì)算并繪制出layer對(duì)象,計(jì)算的過(guò)程根據(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對(duì)象繪制出來(lái)后,需要封裝成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;
  }
}

寫(xiě)在最后

這種閃爍動(dòng)畫(huà),應(yīng)用場(chǎng)景多種多樣。可以作為對(duì)重要視圖的著重顯示,例如:勛章;也可以作為加載中骨架屏的加載動(dòng)畫(huà)。自己靈活使用即可。

作為一個(gè)大前端開(kāi)發(fā)者,我希望把UI盡善盡美的展現(xiàn)給用戶(hù);此時(shí)你不僅需要一個(gè)集能力、審美、高標(biāo)準(zhǔn)于一體的設(shè)計(jì)師配合,更需要自己對(duì)所寫(xiě)界面有著極高的追求。而Flutter作為一個(gè)UI框架,玩到最后其實(shí)就是特效動(dòng)畫(huà)的高性能編寫(xiě),這勢(shì)必離不開(kāi)其繪制原理,不要停留在widget、element的學(xué)習(xí),Render、layer甚至再底層的C++才是我們學(xué)習(xí)路徑。

參考文檔:

總結(jié)

到此這篇關(guān)于Flutter給控件實(shí)現(xiàn)鉆石般的微光特效的文章就介紹到這了,更多相關(guān)Flutter控件微光特效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論