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

Android實現(xiàn)流動的漸變色邊框效果

 更新時間:2022年06月15日 09:11:01   作者:島上碼農(nóng)  
本文將帶大家學習一下如何利用toast中的motion_toast組件實現(xiàn)一個流動的漸變色邊框效果,文中的示例代碼講解詳細,快跟隨小編一起學習學習吧

前言

記得在介紹 motion_toast 一篇的時候,開篇有一張動圖,邊框是漸變色而且感覺是流動的。這個動效挺有趣的,當時也有人問怎么實現(xiàn),經(jīng)過上一篇《讓你的聊天氣泡豐富多彩!》后,有了實現(xiàn)思路了。

實現(xiàn)思路

首先要實現(xiàn)但是漸變色邊框,這個其實可以參考上一篇的CustomPaint 的漸變填充實現(xiàn)。繪制一個矩形邊框,然后讓漸變色的區(qū)域填充到矩形區(qū)域內(nèi)就可以了。

void paint(Canvas canvas, Size size) {
  final rectWidth = 300.0, rectHeight = 100.0;
  Rect rect = Offset(
          size.width / 2 - rectWidth / 2, size.height / 2 - rectHeight / 2) &
      Size(rectWidth, rectHeight);
  final paint = Paint()
    ..shader = LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: colors,
      ),
    ).createShader(rect)
    ..style = PaintingStyle.stroke
    ..strokeWidth = 8.0;
  canvas.drawRect(rect, paint);
}

繪制出來的效果如下圖所示。

然后是讓漸變色流動起來,這里就需要動畫了,通過動畫控制漸變填充的角度,周而復始就能夠形成不斷流動的效果。這里還是要用到 LinearGradienttransform 屬性。Flutter 內(nèi)置了一個GradientRotation旋轉(zhuǎn)變換的類,正好可以進行角度變換實現(xiàn)角度控制,GradientRotation 接收一個角度值實現(xiàn)對漸變的角度控制,下面是0度和90度的對比圖,可以看到0度到90度邊框的漸變色起始位置正好是旋轉(zhuǎn)了90度。

有了以上兩個基礎(chǔ),我們通過一個 Animation 對象動畫過程中的值來控制旋轉(zhuǎn)角度就可以了。

void paint(Canvas canvas, Size size) {
  final rectWidth = 300.0, rectHeight = 100.0;
  Rect rect = Offset(
          size.width / 2 - rectWidth / 2, size.height / 2 - rectHeight / 2) &
      Size(rectWidth, rectHeight);
  final paint = Paint()
    ..shader = LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: colors,
      transform: GradientRotation(
        animation * 2 * pi,
      ), //改變 transform 值實現(xiàn)漸變旋轉(zhuǎn)效果
    ).createShader(rect)
    ..style = PaintingStyle.stroke
    ..strokeWidth = 8.0;
  canvas.drawRect(rect, paint);
}

動畫配置代碼如下,2秒旋轉(zhuǎn)一周,使用 Curves.linear 實現(xiàn)勻速旋轉(zhuǎn)。

class _GradientBoundDemoState extends State<GradientBoundDemo>
    with SingleTickerProviderStateMixin {
  late Animation<double> animation;
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
    animation = Tween<double>(begin: 0, end: 1.0).animate(CurvedAnimation(
      parent: controller,
      curve: Curves.linear,
    ))
      ..addListener(() {
        setState(() {});
      });
    controller.repeat();
  }
  
  //...
}

實現(xiàn)的效果如下所示。

調(diào)整一下顏色和 LinearGradientbeginend 參數(shù),還可以實現(xiàn)一些有趣的效果。下面這個效果就和開篇那個效果有點接近了。

如果是畫成圓圈邊框的話,做 Loading 效果其實也不錯。

源碼已經(jīng)提交至:繪圖相關(guān)源碼,文件名為:gradient_bound_demo.dart。

總結(jié)

本篇介紹了自定義繪制漸變色邊框,并通過動畫實現(xiàn)流動的效果,繪圖加動畫組合能夠?qū)崿F(xiàn)很多既有創(chuàng)意又有取的效果,大家也可以嘗試一下看看有哪些有趣的玩法。

到此這篇關(guān)于Android實現(xiàn)流動的漸變色邊框效果的文章就介紹到這了,更多相關(guān)Android漸變色邊框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Android 自定義View步驟

    Android 自定義View步驟

    這篇文章主要介紹了Android 自定義View步驟 的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • Android自定義控件實現(xiàn)雷達圖效果

    Android自定義控件實現(xiàn)雷達圖效果

    這篇文章主要為大家詳細介紹了Android自定義控件實現(xiàn)雷達圖效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-09-09
  • RecyclerView實現(xiàn)列表倒計時

    RecyclerView實現(xiàn)列表倒計時

    這篇文章主要為大家詳細介紹了RecyclerView實現(xiàn)列表倒計時,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • Android 分析實現(xiàn)性能優(yōu)化之啟動速度優(yōu)化

    Android 分析實現(xiàn)性能優(yōu)化之啟動速度優(yōu)化

    在移動端程序中,用戶希望的是應用能夠快速打開。啟動時間過長的應用不能滿足這個期望,并且可能會令用戶失望。輕則鄙視你,重則直接卸載你的應用
    2021-11-11
  • Android封裝高德地圖定位工具類Util的詳細步驟

    Android封裝高德地圖定位工具類Util的詳細步驟

    這篇文章主要給大家介紹了關(guān)于Android封裝高德地圖定位工具類Util的相關(guān)資料,封裝成工具類后非常方便以后的項目,可以直接使用,文中也給出了詳細的實例代碼,需要的朋友可以參考下
    2021-07-07
  • Android自定義view圓并隨手指移動

    Android自定義view圓并隨手指移動

    這篇文章主要為大家詳細介紹了Android自定義view圓并隨手指移動,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • Android 屏幕雙擊事件的捕獲簡單示例

    Android 屏幕雙擊事件的捕獲簡單示例

    本文主要介紹 Android屏幕雙擊事件的捕獲,這里整理了相關(guān)資料,并附示例代碼,有興趣的小伙伴可以參考下
    2016-08-08
  • Android橫豎屏切換實例總結(jié)

    Android橫豎屏切換實例總結(jié)

    這篇文章主要介紹了Android橫豎屏切換的相關(guān)技巧,結(jié)合實例形式總結(jié)分析了Android禁止及設置橫豎屏切換、修改切換布局及攔截切換等相關(guān)技巧,需要的朋友可以參考下
    2016-01-01
  • Android開發(fā)實現(xiàn)各種圖形繪制功能示例

    Android開發(fā)實現(xiàn)各種圖形繪制功能示例

    這篇文章主要介紹了Android開發(fā)實現(xiàn)各種圖形繪制功能,結(jié)合實例形式分析了Android圖形繪制常用的組件、函數(shù)使用方法及相關(guān)注意事項,需要的朋友可以參考下
    2017-09-09
  • Android Studio報:“Attribute application@theme or @ icon ”問題的解決

    Android Studio報:“Attribute application@theme or @ icon ”問題的解

    這篇文章主要給大家介紹了關(guān)于Android Studio報:“Attribute application@theme or @ icon ”問題的解決方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面隨著小編來一起學習學習吧。
    2017-12-12

最新評論