Android+Flutter實(shí)現(xiàn)文字跑馬燈特效

更新時(shí)間：2022年11月30日 11:13:42 作者：WeninerIo

跑馬燈常常被運(yùn)用在很多領(lǐng)域, 例如商場(chǎng)的電子條幅、大樓的宣傳廣告位、地鐵的廣告位。今天我們來說一下flutter 怎么通過繪制來實(shí)現(xiàn)跑馬燈效果!，希望對(duì)大家有所幫助

分析實(shí)現(xiàn)

我們都知道跑馬燈是不停的往前跑. 在給定的區(qū)域里,如果是最小的繪制區(qū)域,我們也至少繪制出它左邊剛出頭,右邊剛出尾的所有子項(xiàng).同時(shí)我們也需要一個(gè)東西來驅(qū)動(dòng)它去前行.

同時(shí),文字也會(huì)有很多情況.

它可能很短,也可能和給定的的區(qū)域相等,也可能遠(yuǎn)超我們給定的區(qū)域. 在這種情況下,我們應(yīng)該首先獲取文字的寬度.然后確定每秒它會(huì)移動(dòng)多少.并且還需要一個(gè)驅(qū)動(dòng)器來驅(qū)動(dòng)它去做這些變化.

測(cè)量文字

如果大家寫過Flutter, 一定用過Text Widget. 既然Text Widget 可以根據(jù)文字大小來展示,說明Flutter中是有一個(gè)api可以測(cè)量文字長(zhǎng)寬的.這里直接給出答案:

// 我們最終繪制的文字
final String kText = 'Flutter 文字特效之跑馬燈';
{
    // 需要被測(cè)量的文字 Widget
    TextSpan measureText =
        TextSpan(text: kText, style: const TextStyle(color: Colors.black));
    TextPainter _painter = TextPainter(
      text: measureText,
      textDirection: TextDirection.ltr,
      // 這里定義最大為1行
      maxLines: 1,
      // 這里給定文字繪制的約束最小為0.0, 最大不限制.從而獲取真實(shí)的文字寬高
    )..layout(minWidth: 0.0, maxWidth: double.infinity);
}

其中,TextPainter便包含了我們需要的文字寬高.我們創(chuàng)建一個(gè)對(duì)象去保存這個(gè)信息,方便后面去繪制.

// 這里繼承里ChangeNotifier, 可以讓我們以最小的代價(jià)刷新界面
class _TextInfo extends ChangeNotifier {
  // 繪制時(shí)最前面的文字偏移
  double head = 0.0;

  double width;

  double margin;

  _TextInfo(this.width, this.margin);

  // speed是我們定義的偏移速度,
  // 這里與我們的偏移量息息相關(guān)
  void update(double speed) {
    // 首先先讓偏移量自減
    head -= speed;
    // 如果超過了文字大小和間距的總長(zhǎng)度,說明當(dāng)前的文字已經(jīng)超出了屏幕.
    // 我們應(yīng)該用緊接著下一條數(shù)據(jù)的偏移量賦值.
    if (head < -width - margin) {
      head += width + margin;
    }
    notifyListeners();
  }
}

動(dòng)畫為媒

文字測(cè)量完后, 我們還需要一個(gè)可以驅(qū)動(dòng)文字移動(dòng)的驅(qū)動(dòng)器. 這里你可以通過ticker自己實(shí)現(xiàn)一個(gè)驅(qū)動(dòng). 我們?yōu)榱撕?jiǎn)單化考慮, 沒錯(cuò)~ 我們又要請(qǐng)出我們的好兄弟AnimationController重出江湖了

實(shí)際上這里運(yùn)用不了太多AnimationController的參數(shù),我們唯一需要在乎的就是Duration, 也就是時(shí)間越短.我們將跑的越快.時(shí)間越長(zhǎng),跑的越慢.可以說是反比關(guān)系.

{
    AnimationController _scrollController =
        AnimationController(vsync: this, duration: const Duration(seconds:1));
}

最終繪制

萬事俱備,只欠東風(fēng). 像一個(gè)方程, 我們所有的未知數(shù)都有了解. 只剩下最后求y了. 這里我們通過CustomPainter來繪制文字. 我們之前通過創(chuàng)建自己的類保存了文字信息,同時(shí)讓它繼承了ChangeNotifier就是為了今朝.

  _RevolvingLanternPainter(
    this.painter,
    this.textInfo,
  ) : super(repaint: textInfo);

我們將CustomPainter的repaint參數(shù)賦值成我們自己定義的類. 每次我們update() 都會(huì)通知界面來刷新,從而不會(huì)影響別的界面, 只影響當(dāng)前的繪制畫布. 然后, 我們就可以去真正的繪制啦~ 這里我們唯一需要做的,就是給一個(gè)值x記錄下所有文字的偏移量. 如果偏移量大于當(dāng)前的界面. 說明它不在界面上, 也就不用繪制啦!

    @override
    void paint(Canvas canvas, Size size) {
        double x = textInfo.head;
        while (x < size.width) {
            painter.paint(canvas, Offset(x, 0.0));
            x += textInfo.width + textInfo.margin;
        }
    }

通過這種方法, 我們實(shí)現(xiàn)了跑馬燈文字的繪制~~