1. 程式人生 > >翻翻git之---閃爍動畫的TextView RevealTextView

翻翻git之---閃爍動畫的TextView RevealTextView

今天上一個自身閃爍,用於吸引使用者注意力的TextView * RevealTextView*

先上下效果圖:(這圖片夠大的)

這裡寫圖片描述

How to use?

Gradle

dependencies {
  compile 'com.antonionicolaspina:revealtextview:2.0'
}

Eclipse
Copy下 attires.xml 和RevealTextView.java就行了,內容不多。

這裡寫圖片描述

接下來我們來拆拆實現,先看一下自定義Styleable的東西

 <declare-styleable name="RevealTextView">
<attr name="rtv_duration" format="integer" /> <attr name="android:text" /> </declare-styleable>

就只有持續時間和文字

接下來看具體實現

public final class RevealTextView extends TextView implements Runnable, ValueAnimator.AnimatorUpdateListener

繼承於TextView 實現多執行緒以及動畫的時間,一看就知道 他沒有用諸如Handler的實現,純粹的主執行緒子執行緒的相互操作配合動畫來實現閃爍效果

  protected void init(TypedArray attrs) {
    try {
      animationDuration = attrs.getInteger(R.styleable.RevealTextView_rtv_duration, animationDuration);
      text = attrs.getString(R.styleable.RevealTextView_android_text);
    } finally {
      attrs.recycle();
    }

    setAnimatedText(text);
}

接著就是初始化,然後就是呼叫開始動畫的操作,這裡是把標籤傳來的字送了過去。

public void setAnimatedText(String text) {
    this.text = text;
    alphas    = new double[text.length()];
    for(int i=0; i<text.length(); i++) {
      alphas[i] = Math.random() - 1.0f;
    }

    setText(text);

    replayAnimation();
  }

這邊用一個數組作為整個字串的容器,然後把每個字元生成一個隨機數放入容器中,然後開始多執行緒的操作。

public void replayAnimation() {
    if (null != text) {
      post(this);
    }
  }

當字串不為空開始執行多執行緒操作。

並且這2個方法是public的,給予我們外部呼叫的。

 @Override
  public void run() {
    final int color = getCurrentTextColor();

    red   = Color.red(color);
    green = Color.green(color);
    blue  = Color.blue(color);

    ValueAnimator animator = ValueAnimator.ofFloat(0f, 2f);
    animator.setDuration(animationDuration);
    animator.addUpdateListener(this);
    animator.start();
  }

在run方法中執行了 我們的動畫的初始化操作

  @Override
  public void onAnimationUpdate(ValueAnimator valueAnimator) {
    final float value = (float) valueAnimator.getAnimatedValue();
    SpannableStringBuilder builder = new SpannableStringBuilder(text);
    for(int i=0; i<text.length(); i++) {
      builder.setSpan(new ForegroundColorSpan(Color.argb(clamp(value + alphas[i]), red, green, blue)), i, i+1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }
    setText(builder);
  }

在onAnimationUpdate中對字型進行二次處理最終實現了 圖中的效果