在審美疲勞的今天笆凌，如何能開發(fā)出一款應(yīng)用讓用戶耳目一新吶，適當(dāng)?shù)膭?dòng)畫特效能為你的APP加分不少士葫，這一點(diǎn)在海外的APP上表現(xiàn)頗為明顯乞而。今天為大家?guī)?lái)一篇實(shí)用的自定義view，就是是TextView實(shí)現(xiàn)文字逐個(gè)顯示（類似打印機(jī)打字一樣慢显，逐個(gè)顯示的效果）爪模。
按照慣例，無(wú)圖無(wú)真相
1荚藻、開篇
在開始講解之前先問(wèn)一下大家屋灌，看到這樣的一個(gè)動(dòng)畫效果，腦海中首先先閃的思路是什么应狱，如果你的UI設(shè)計(jì)師讓你去實(shí)現(xiàn)的話共郭，你要怎么做吶，希望讀者在思考片刻之后再繼續(xù)閱讀，看看我們的設(shè)計(jì)思路是不是一樣落塑，如果不一樣比較一下哪種實(shí)現(xiàn)起來(lái)更方便纽疟，哪種效率更高，歡迎評(píng)論交流憾赁。你有一個(gè)思想污朽，我有一個(gè)思想，交換一下我們都有兩個(gè)思想龙考。
當(dāng)你讀到這里的時(shí)候說(shuō)明你應(yīng)該思考過(guò)上邊的問(wèn)題了蟆肆，就問(wèn)你第一想法是不是網(wǎng)上搜相關(guān)資料，看看有沒(méi)有現(xiàn)成的晦款，有的話直接拿來(lái)炎功，沒(méi)的話換個(gè)方式繼續(xù)搜索。缓溅。蛇损。比如到各個(gè)開發(fā)群里詢問(wèn)有沒(méi)有類似效果的demo之類的。坛怪。淤齐。
哈哈袜匿，開個(gè)玩笑啦更啄，第一時(shí)間去網(wǎng)上搜索不見(jiàn)得不好，汲取各個(gè)大神設(shè)計(jì)思路之精華嘛居灯，不過(guò)我好想近期沒(méi)這么做哦祭务，因?yàn)楸粋^(guò)，曾經(jīng)也是一有問(wèn)題就直接復(fù)制到網(wǎng)上和各個(gè)開發(fā)群詢問(wèn)怪嫌，但大部分得到的反饋都是沒(méi)人叼戳粒，記得收到回復(fù)最多的是這張圖娇斑！有種被鄙視的感覺(jué)有沒(méi)有暖侨。
2邢享、實(shí)現(xiàn)
扯了半天蛋暇番，終于步入正題了来累。
其實(shí)這樣的效果實(shí)現(xiàn)思路還是挺多的泉褐，有的是動(dòng)態(tài)生成多個(gè)TextView,每次設(shè)置一個(gè)字符控制顯示隱藏规哪，有的繼承自View完全自定義蛤袒，從頭繪制到底熄云。這里我的方式是繼承自TextView，我們只需實(shí)現(xiàn)文字逐個(gè)顯示的效果的邏輯就ok了妙真，至于設(shè)置文字顏色缴允，字體大小之類的屬性我們直接使用TextView自己屬性就好了，這樣大大簡(jiǎn)化了我們的開發(fā)流程。
實(shí)現(xiàn)步驟：
1练般、重寫onDraw方法矗漾，繪制文字
2、利用屬性動(dòng)畫在固定時(shí)間內(nèi)重繪顯示的文字
3薄料、封裝并暴露外部調(diào)用的方法
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) {
//設(shè)置文字繪制的區(qū)域
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;
//文字繪制到整個(gè)布局的中心位置
canvas.drawText(textString, getPaddingLeft(), baseline, getPaint());
}
看過(guò)我之前寫的那幾篇文章的朋友會(huì)發(fā)現(xiàn)我們自定義view系列的文章基本都有這個(gè)方法，可以封裝一下摄职，以后在任何需要使用的地方都可以拿來(lái)直接使用誊役。這個(gè)方法沒(méi)什么復(fù)雜的邏輯我們不過(guò)多解讀了。
2.2谷市、利用屬性動(dòng)畫動(dòng)態(tài)改變繪制的文字
代碼很好理解先上代碼蛔垢，跟著代碼我們?nèi)W(xué)習(xí)實(shí)現(xiàn)思路
/**
* 文字逐個(gè)顯示動(dòng)畫 通過(guò)插值的方式改變數(shù)據(jù)源
*/
private void initAnimation() {
//從0到textCount - 1 是設(shè)置從第一個(gè)字到最后一個(gè)字的變化因子
textAnimation = ValueAnimator.ofInt(0, textCount - 1);
//執(zhí)行總時(shí)間就是每個(gè)字的時(shí)間乘以字?jǐn)?shù)
textAnimation.setDuration(textCount * duration);
//勻速顯示文字
textAnimation.setInterpolator(new LinearInterpolator());
textAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int index = (int) valueAnimator.getAnimatedValue();
//過(guò)濾去重，保證每個(gè)字只重繪一次
if (currentIndex != index) {
stringBuffer.append(arr[index]);
currentIndex = index;
//所有文字都顯示完成之后進(jìn)度回調(diào)結(jié)束動(dòng)畫
if (currentIndex == (textCount - 1)) {
if (textAnimationListener != null) {
textAnimationListener.animationFinish();
}
}
invalidate();
}
}
});
}
思路是這樣的：為每個(gè)文字顯示的時(shí)間設(shè)置一個(gè)固定值duration迫悠，我這里默認(rèn)顯示300毫秒鹏漆，動(dòng)畫執(zhí)行的總時(shí)間就是總共的字?jǐn)?shù)乘以每個(gè)字顯示的時(shí)間（ textCount * duration），ValueAnimator.ofInt(0, textCount - 1)是為了根據(jù)這個(gè)字?jǐn)?shù)的因子當(dāng)做下標(biāo)獲取單個(gè)字符创泄，每次追加到 stringBuffer.append(arr[index])艺玲，代碼中我做了過(guò)濾重繪的判斷，保證每次只繪制一遍验烧，提升性能板驳，因?yàn)槲覀兊膙alueAnimator.getAnimatedValue()這個(gè)變化因子會(huì)不斷變化及時(shí)轉(zhuǎn)成int類型，每次也是有很多重復(fù)的碍拆，所以去重這一步就顯得格外重要若治，我們可以看一下打印日志。
看到這里其估計(jì)有人會(huì)問(wèn)怎么設(shè)置要顯示的字符串吶還有arr[index]十個(gè)什么鬼端幼，不要著急，繼續(xù)往下看就明白了
/**
* 設(shè)置逐漸顯示的字符串
*
* @param textString
* @return
*/
public FadeInTextView setTextString(String textString) {
if (textString != null) {
//總字?jǐn)?shù)
textCount = textString.length();
//存放單個(gè)字的數(shù)組
arr = new String[textCount];
for (int i = 0; i < textCount; i++) {
arr[i] = textString.substring(i, i + 1);
}
initAnimation();
}
return this;
}
我把傳入的字符串都存放到一個(gè)數(shù)組里邊每次根據(jù)index去取相應(yīng)的字符弧满，好啦婆跑，到此這個(gè)功能的實(shí)現(xiàn)已經(jīng)完成了。
3庭呜、對(duì)外暴露的方法
設(shè)置字符的方法少不了滑进，接下來(lái)開啟動(dòng)畫和停止動(dòng)畫，然后就是動(dòng)畫結(jié)束的回調(diào)募谎。
/**
* 開啟動(dòng)畫
*
* @return
*/
public FadeInTextView startFadeInAnimation() {
if (textAnimation != null) {
//動(dòng)畫開啟的時(shí)候參數(shù)都設(shè)置成初始狀態(tài)
stringBuffer.setLength(0);
currentIndex = -1;
textAnimation.start();
}
return this;
}
/**
* 停止動(dòng)畫
*
* @return
*/
public FadeInTextView stopFadeInAnimation() {
if (textAnimation != null) {
textAnimation.end();
}
return this;
}
/**
* 回調(diào)接口
*/
public interface TextAnimationListener {
void animationFinish();
}
4扶关、如何使用
fadeInTextView
.setTextString("自定義view實(shí)現(xiàn)字符串逐字顯示")
.startFadeInAnimation()
.setTextAnimationListener(new FadeInTextView.TextAnimationListener() {
@Override
public void animationFinish() {
}
});
至此本篇文章的介紹已經(jīng)結(jié)束，接下來(lái)會(huì)繼續(xù)推出相關(guān)系列的文章数冬。小功能大智慧节槐，功能再小還要新手敲一敲，不然。铜异。哥倔。不然。揍庄。咆蒿。看圖意會(huì)吧币绩，哈哈??!
github源碼地址傳送門
謹(jǐn)以此篇來(lái)記錄自己項(xiàng)目中遇到的問(wèn)題，獻(xiàn)給需要類似功能的小伙伴們缆镣。如果你有好的建議歡迎評(píng)論指出芽突，大家一起討論、學(xué)習(xí)董瞻、進(jìn)步寞蚌！
