在審美疲勞的今天，如何能開發出一款應用讓用戶耳目一新吶，適當的動畫特效能為你的APP加分不少，這一點在海外的APP上表現頗為明顯。今天為大家帶來一篇實用的自定義view，就是是TextView實現文字逐個顯示（類似打印機打字一樣，逐個顯示的效果）。
按照慣例，無圖無真相
1、開篇
在開始講解之前先問一下大家，看到這樣的一個動畫效果，腦海中首先先閃的思路是什么，如果你的UI設計師讓你去實現的話，你要怎么做吶，希望讀者在思考片刻之后再繼續閱讀，看看我們的設計思路是不是一樣，如果不一樣比較一下哪種實現起來更方便，哪種效率更高，歡迎評論交流。你有一個思想，我有一個思想，交換一下我們都有兩個思想。
當你讀到這里的時候說明你應該思考過上邊的問題了，就問你第一想法是不是網上搜相關資料，看看有沒有現成的，有的話直接拿來，沒的話換個方式繼續搜索。。。比如到各個開發群里詢問有沒有類似效果的demo之類的。。。
哈哈，開個玩笑啦，第一時間去網上搜索不見得不好，汲取各個大神設計思路之精華嘛，不過我好想近期沒這么做哦，因為被傷過，曾經也是一有問題就直接復制到網上和各個開發群詢問，但大部分得到的反饋都是沒人叼，記得收到回復最多的是這張圖！有種被鄙視的感覺有沒有。
2、實現
扯了半天蛋，終于步入正題了。
其實這樣的效果實現思路還是挺多的，有的是動態生成多個TextView,每次設置一個字符控制顯示隱藏，有的繼承自View完全自定義，從頭繪制到底。這里我的方式是繼承自TextView，我們只需實現文字逐個顯示的效果的邏輯就ok了，至于設置文字顏色，字體大小之類的屬性我們直接使用TextView自己屬性就好了，這樣大大簡化了我們的開發流程。
實現步驟：
1、重寫onDraw方法，繪制文字
2、利用屬性動畫在固定時間內重繪顯示的文字
3、封裝并暴露外部調用的方法
2.1 、重繪文字
@Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
if (stringBuffer != null) {
drawText(canvas, stringBuffer.toString());
}
}
stringBuffer就是需要繪制的文字
/**
* 繪制文字
*
* @param canvas 畫布
*/
private void drawText(Canvas canvas, String textString) {
//設置文字繪制的區域
textRect.left = getPaddingLeft();
textRect.top = getPaddingTop();
textRect.right = getWidth() - getPaddingRight();
textRect.bottom = getHeight() - getPaddingBottom();
Paint.FontMetricsInt fontMetrics = getPaint().getFontMetricsInt();
int baseline = (textRect.bottom + textRect.top - fontMetrics.bottom - fontMetrics.top) / 2;
//文字繪制到整個布局的中心位置
canvas.drawText(textString, getPaddingLeft(), baseline, getPaint());
}
看過我之前寫的那幾篇文章的朋友會發現我們自定義view系列的文章基本都有這個方法，可以封裝一下，以后在任何需要使用的地方都可以拿來直接使用。這個方法沒什么復雜的邏輯我們不過多解讀了。
2.2、利用屬性動畫動態改變繪制的文字
代碼很好理解先上代碼，跟著代碼我們去學習實現思路
/**
* 文字逐個顯示動畫 通過插值的方式改變數據源
*/
private void initAnimation() {
//從0到textCount - 1 是設置從第一個字到最后一個字的變化因子
textAnimation = ValueAnimator.ofInt(0, textCount - 1);
//執行總時間就是每個字的時間乘以字數
textAnimation.setDuration(textCount * duration);
//勻速顯示文字
textAnimation.setInterpolator(new LinearInterpolator());
textAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int index = (int) valueAnimator.getAnimatedValue();
//過濾去重，保證每個字只重繪一次
if (currentIndex != index) {
stringBuffer.append(arr[index]);
currentIndex = index;
//所有文字都顯示完成之后進度回調結束動畫
if (currentIndex == (textCount - 1)) {
if (textAnimationListener != null) {
textAnimationListener.animationFinish();
}
}
invalidate();
}
}
});
}
思路是這樣的：為每個文字顯示的時間設置一個固定值duration，我這里默認顯示300毫秒，動畫執行的總時間就是總共的字數乘以每個字顯示的時間（ textCount * duration），ValueAnimator.ofInt(0, textCount - 1)是為了根據這個字數的因子當做下標獲取單個字符，每次追加到 stringBuffer.append(arr[index])，代碼中我做了過濾重繪的判斷，保證每次只繪制一遍，提升性能，因為我們的valueAnimator.getAnimatedValue()這個變化因子會不斷變化及時轉成int類型，每次也是有很多重復的，所以去重這一步就顯得格外重要，我們可以看一下打印日志。
看到這里其估計有人會問怎么設置要顯示的字符串吶還有arr[index]十個什么鬼，不要著急，繼續往下看就明白了
/**
* 設置逐漸顯示的字符串
*
* @param textString
* @return
*/
public FadeInTextView setTextString(String textString) {
if (textString != null) {
//總字數
textCount = textString.length();
//存放單個字的數組
arr = new String[textCount];
for (int i = 0; i < textCount; i++) {
arr[i] = textString.substring(i, i + 1);
}
initAnimation();
}
return this;
}
我把傳入的字符串都存放到一個數組里邊每次根據index去取相應的字符，好啦，到此這個功能的實現已經完成了。
3、對外暴露的方法
設置字符的方法少不了，接下來開啟動畫和停止動畫，然后就是動畫結束的回調。
/**
* 開啟動畫
*
* @return
*/
public FadeInTextView startFadeInAnimation() {
if (textAnimation != null) {
//動畫開啟的時候參數都設置成初始狀態
stringBuffer.setLength(0);
currentIndex = -1;
textAnimation.start();
}
return this;
}
/**
* 停止動畫
*
* @return
*/
public FadeInTextView stopFadeInAnimation() {
if (textAnimation != null) {
textAnimation.end();
}
return this;
}
/**
* 回調接口
*/
public interface TextAnimationListener {
void animationFinish();
}
4、如何使用
fadeInTextView
.setTextString("自定義view實現字符串逐字顯示")
.startFadeInAnimation()
.setTextAnimationListener(new FadeInTextView.TextAnimationListener() {
@Override
public void animationFinish() {
}
});
至此本篇文章的介紹已經結束，接下來會繼續推出相關系列的文章。小功能大智慧，功能再小還要新手敲一敲，不然。。。不然。。?？磮D意會吧，哈哈??!
github源碼地址傳送門
謹以此篇來記錄自己項目中遇到的問題，獻給需要類似功能的小伙伴們。如果你有好的建議歡迎評論指出，大家一起討論、學習、進步！
