做开发已经3年有余了,一事无成,一直静不下心来安心做好一件事情,很多时候内心很浮躁,迷失了前行的方向,我该当何去何从?一个人闲下来的时候,总想放纵自己,二个人在一起总会吵吵闹闹,在物质驱使的年代里,活得一点不像自己,像我这样的人,还有多少人?
心里的话一直想找人说,让大家见笑了。本篇是讲技术的,而不是来听我的感慨。先来看看文本跳动
控件的最终效果图:
一款优秀的 app
往往会有一些新颖的控件,让用户在视觉与体验都会觉得很棒,第一时间留住用户的心。那么怎样打造一款炫酷的自定义控件
(只考虑编程层面)?
群里有很大一部分童鞋反应,觉得写自定义控件
好难,害怕去写,有的还没开始就结束了,还有的开始没多久就放弃了,剩下的都在放弃的路上。其实写自定义控件
并没有那么难,那我谈谈自己的心得,有两点:
-
第一,拆分
-
第二,模仿
控件的难点在于动画,动画往往有规律可循,那么我们需要把动画变慢去寻找规律,一是ui
设计师给出相应的参数,有时需要模仿竞品的控件效果,可以在开发者选择
中设置动画缩放时长:
还可以通过adb
命令进行录屏与截图:
// 截屏
adb shell /system/bin/screencap -p /sdcard/a.png
// 录屏
adb shell screenrecord /sdcard/a.mp4
// 拉到电脑上
adb pull /sdcard/a.mp4
动画变慢了,我们就可以进行拆分,在平面(2D)动画中我们一般只考虑横纵坐标,那么就可以拆分为 x
和 y
方向的动画,动画无非就是平移,旋转,缩放以及透明度变换中的一种或者几种,化繁为简,本篇会以文本跳动
控件具体讲解。
第二点心得是模仿,腾讯,小米一直在模仿,一直很成功,那么写控件一样,也需要模仿,尤其对于初学者,更需要模仿。先不论你写的控件是不是最优方案,性能是否有过渡损耗,动手模仿写一写,可以找些简单例子练练手,强力推荐 启舰大牛,写的很细很全面,有时候需要知道竞品使用了什么控件,可以让你少走许多弯路?推荐一款sdk
自带的工具:
看到这里,你有信心写好上方跳动文本
控件吗?如果是你拿到这个控件需求,你会怎么分析?欢迎留言,很多时候实现方案往往不会是一种,你的答案,可能对他人有所帮助,接下来具体讲解跳动文本
控件的实现。
跳动文本案例
需求分析:
1、筛选出新旧文本的相同字符并记录索引值
2、计算筛选出每个相同字符在动画周期内的偏移量
3、旧文本剩余字符的平移与透明度动画
4、新文本剩余字符的平移与透明度动画
为了方便理解,简化字符,延迟动画时长,效果如下:
从以上效果图可以知道,红色字体的 wen
为已经绘制的文本(旧文本),白色的 tianxia
为即将绘制的文本(新文本),新旧文本相同的字符为 n
,针对新旧文本拆分 x,y
轴方向的动画:
旧文本
- x 轴方向字符
n
平移 - y 轴方向除
n
外的字符平移,透明度(向上平移,透明度0~1)
新文本
- x 轴方向无动画
- y 轴方向除
n
外的字符平移,透明度(向上平移,透明度1~0)
拆分后你会发现就只有简单的平移与透明度动画,是不是一下就觉得简单了许多。
筛选相同字符
直接看代码:
public static List<CharacterDiffResult> diff(CharSequence oldText, CharSequence newText) {
List<CharacterDiffResult> differentList = new ArrayList<>();
Set<Integer> skip = new HashSet<>();
for (int i = 0; i < oldText.length(); i++) {
char c = oldText.charAt(i);
for (int j = 0; j < newText.length(); j++) {
if (!skip.contains(j) && c == newText.charAt(j)) {
skip.add(j);
CharacterDiffResult different = new CharacterDiffResult();
different.c = c;
// 在旧文本中的位置
different.fromIndex = i;
// 在新文本中的位置
different.moveIndex = j;
differentList.add(different);
break;
}
}
}
return differentList;
}
在CharacterDiffResult
类中存取了新旧文本的相同字符以及在新旧文本中的位置,这个方法应该不难理解,接下来分析相同字符在动画周期内的偏移量。
相同字符偏移量
首先需要弄清一个概念,那就是绘制字符的x
,y
坐标:
/**
* text:要绘制的文字
* x:绘制原点x坐标
* y:绘制原点y坐标
* paint:用来做画的画笔
*/
public void drawText(String text, float x, float y, Paint paint)
这里的x
,y
表示的是基线
的x
,y
坐标,具体请参考自定义控件之绘图篇( 五):drawText()详解
通过以下方法可以获取新旧文本的基线
的x
坐标:
int layoutDirection = ViewCompat.getLayoutDirection(EvaporateTextView.this);
// 获取x坐标
oldStartX = layoutDirection == LAYOUT_DIRECTION_LTR ? getLayout().getLineLeft(0) : getLayout().getLineRight(0);
为了计算偏移量,需要存取新旧字符串中每个字符的宽度:
mOldPaint.setTextSize(mTextSize);
mOldPaint.setColor(getCurrentTextColor());
mOldPaint.setTypeface(getTypeface());
oldGapList.clear();
for (int i = 0; i < mOldText.length(); i++) {
// measureText 测量文本宽度
oldGapList.add(mOldPaint.measureText(String.valueOf(mOldText.charAt(i))));
}
}
通过以上参数就可以获取到动画周期内相同字符的偏移量(基线的x坐标):
/**
* 获取旧文本字符n的x坐标
*
* @param from 旧文本字符n的索引位置
* @param move 新文本字符n的索引位置
* @param progress 当前进度
* @param startX 新文本baseline的x坐标
* @param oldStartX 旧文本baseline的y坐标
* @param gaps 新文本每个字符对应的x坐标集合
* @param oldGaps 旧文本每个字符对应的x坐标集合
* @return
*/
public static float getOffset(int from, int move, float progress, float startX, float oldStartX,
List<Float> gaps, List<Float> oldGaps) {
float dist = startX;
for (int i = 0; i < move; i++) {
dist += gaps.get(i);
}
float cur = oldStartX;
for (int i = 0; i < from; i++) {
cur += oldGaps.get(i);
}
return cur + (dist - cur) * progress;
}
根据数学公式(n 字符x坐标 = 起点 + (终点 - 起点)x 进度)
,起点与终点分别对应旧新文本字符 n
所在的 x
轴坐标,进度的取值范围为[0~1]
。
旧文本平移透明动画
// 透明度动画
mOldPaint.setAlpha((int) ((1 - pp) * 255));
// pp 表示的是进度
float y = startY - pp * mTextHeight;
// (oldGapList.get(i) - width) / 2 值为0 oldOffset + (oldGapList.get(i) - width) / 2
// oldOffset 基线x坐标 平移动画
canvas.drawText(mOldText.charAt(i) + "", 0, 1, oldOffset, y, mOldPaint);
oldOffset += oldGapList.get(i);
请参考注释,或者下载demo
对应代码理解,文末会给出demo
地址,还有干货哟。
新文本平移透明动画
动画比较简单,直接贴代码:
if (i < mText.length()) {
if (!CharacterUtils.stayHere(i, differentList)) {
// 渐显效果 延迟 alpha 的计算稍微费脑一点
int alpha = (int) (255f / charTime * (progress * duration - charTime * i / mostCount));
alpha = alpha > 255 ? 255 : alpha;
alpha = alpha < 0 ? 0 : alpha;
mPaint.setAlpha(alpha);
mPaint.setTextSize(mTextSize);
// float pp = progress * duration / (charTime + charTime / mostCount * (mText.length() - 1));
float pp = progress;
float y = mTextHeight + startY - pp * mTextHeight;
float width = mPaint.measureText(mText.charAt(i) + "");
canvas.drawText(mText.charAt(i) + "", 0, 1, offset + (gapList.get(i) - width) / 2, y, mPaint);
}
offset += gapList.get(i);
}
跳动文本
讲到这里就差不多了,有什么不懂的地方,请留言讨论。
总结
写好控件在于分析与拆分,再复杂的动画也是由简单的动画组合而成,先化繁为简,后以简组繁,多练多写,多借鉴更优的实现方案。本篇的文本跳动
控件,是否为你打开了一扇大门?
小编正在维护MeiWidgetView库,有炫酷的控件可以推荐,希望有人能够和小编一起维护,万分感谢,给小编一颗 star,才是最好最美的回报。
参考的相关文章地址:
https://github.com/hanks-zyh/HTextView
https://blog.csdn.net/harvic880925/article/details/50995268