一篇文本跳动控件,为你打开一扇大门,学会这两点心得,控件你也会写

1字数 1636阅读 956
本篇文章已授权微信公众号(鸿洋)独家发布

做开发已经3年有余了,一事无成,一直静不下心来安心做好一件事情,很多时候内心很浮躁,迷失了前行的方向,我该当何去何从?一个人闲下来的时候,总想放纵自己,二个人在一起总会吵吵闹闹,在物质驱使的年代里,活得一点不像自己,像我这样的人,还有多少人?

心里的话一直想找人说,让大家见笑了。本篇是讲技术的,而不是来听我的感慨。先来看看文本跳动控件的最终效果图:

跳动文本控件

一款优秀的 app 往往会有一些新颖的控件,让用户在视觉与体验都会觉得很棒,第一时间留住用户的心。那么怎样打造一款炫酷的自定义控件(只考虑编程层面)?

群里有很大一部分童鞋反应,觉得写自定义控件好难,害怕去写,有的还没开始就结束了,还有的开始没多久就放弃了,剩下的都在放弃的路上。其实写自定义控件并没有那么难,那我谈谈自己的心得,有两点:

  1. 第一,拆分

  2. 第二,模仿

控件的难点在于动画,动画往往有规律可循,那么我们需要把动画变慢去寻找规律,一是ui设计师给出相应的参数,有时需要模仿竞品的控件效果,可以在开发者选择中设置动画缩放时长:

动画缩放时长

还可以通过adb命令进行录屏与截图:

// 截屏
adb shell /system/bin/screencap -p /sdcard/a.png  
// 录屏
adb shell screenrecord /sdcard/a.mp4
// 拉到电脑上
adb pull /sdcard/a.mp4 

动画变慢了,我们就可以进行拆分,在平面(2D)动画中我们一般只考虑横纵坐标,那么就可以拆分为 xy 方向的动画,动画无非就是平移,旋转,缩放以及透明度变换中的一种或者几种,化繁为简,本篇会以文本跳动控件具体讲解。

第二点心得是模仿,腾讯,小米一直在模仿,一直很成功,那么写控件一样,也需要模仿,尤其对于初学者,更需要模仿。先不论你写的控件是不是最优方案,性能是否有过渡损耗,动手模仿写一写,可以找些简单例子练练手,强力推荐 启舰大牛,写的很细很全面,有时候需要知道竞品使用了什么控件,可以让你少走许多弯路?推荐一款sdk自带的工具:

viewer

看到这里,你有信心写好上方跳动文本控件吗?如果是你拿到这个控件需求,你会怎么分析?欢迎留言,很多时候实现方案往往不会是一种,你的答案,可能对他人有所帮助,接下来具体讲解跳动文本控件的实现。

跳动文本案例

需求分析:

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类中存取了新旧文本的相同字符以及在新旧文本中的位置,这个方法应该不难理解,接下来分析相同字符在动画周期内的偏移量。

相同字符偏移量

首先需要弄清一个概念,那就是绘制字符的xy坐标:


/**
* text:要绘制的文字
* x:绘制原点x坐标
* y:绘制原点y坐标
* paint:用来做画的画笔
*/
public void drawText(String text, float x, float y, Paint paint)

这里的xy表示的是基线xy坐标,具体请参考自定义控件之绘图篇( 五):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

推荐阅读更多精彩内容