Path文本动画实战

小鱼儿 2022-05-27 12:09 66阅读 0赞

转载请注明链接: [https://blog.csdn.net/feather\_wch/article/details/79991218][https_blog.csdn.net_feather_wch_article_details_79991218]

# Path文本动画实战 #

版本:2018/4/18-1

1、Path获取文本路径

> 1.  参数1：字符串
> 2.  参数2/3: 字符串中的一部分(这里是全部字符串0~length)
> 3.  参数4，参数5. 本文开始的坐标(0, 文本高度)
> 4.  mSrcPath为存储文本路径的path

paint.getTextPath(text, 0, text.length(), 0, paint.getTextSize(),
                   mSrcPath);

2、通过PathMeasure获取文本路径以及总长度

//1. 设置mPathMeasure
            mPathMeasure.setPath(mSrcPath, false);
    
    //2. 通过PathMeasure获取文字路径的总长度（需要循环遍历）
            mLengthSum = mPathMeasure.getLength();
            while (mPathMeasure.nextContour()) {
                mLengthSum += mPathMeasure.getLength();
            }

3、PathMeasure的`getSegment`方法

> 1.  `PathMeasure`中将文字分为一个个`segment片段`，调用第一次`getSegment仅仅是获得第一个文字`
> 2.  `mPathMeasure.nextContour()`能进行遍历

//1-设置Src路径
    mPathMeasure.setPath(mSrcPath, false);
    //2-拼接出目标路径
    while (stopDistance > mPathMeasure.getLength()) {
        stopDistance -= mPathMeasure.getLength();
        mPathMeasure.getSegment(0, mPathMeasure.getLength(), mDstPath, true);
        if (!mPathMeasure.nextContour()) {
            break;
        }
    }
    //3-最后一段
    mPathMeasure.getSegment(0, stopDistance, mDstPath, true);

## TextPathView ##

public class TextPathView extends AppCompatTextView { 
        /** * 最终绘制目标的路径 */
        Path mDstPath = new Path();
        /** * Path辅助进行截断 */
        PathMeasure mPathMeasure = new PathMeasure();
        /** * 绘制目标的画笔 */
        Paint mPaint = new Paint();
        /** * 源文字路径 */
        private Path mSrcPath = new Path();
        /** * 动画进度(0~1f) */
        private float mProgress = 0f;
        /** * 源文本路径的总长度 */
        private float mLengthSum = 0;
    
        /** * 文字线条的宽度 */
        private float mStrokeWidth = 1f;
    
        /** * 动画时长 */
        private int mDuration = 2000;
    
        public int getDuration() {
            return mDuration;
        }
    
        public void setDuration(int duration) {
            mDuration = duration;
        }
    
        public float getStrokeWidth() {
            return mStrokeWidth;
        }
    
        public void setStrokeWidth(float strokeWidth) {
            mStrokeWidth = strokeWidth;
        }
    
        public TextPathView(Context context) {
            super(context);
            initPath(getText().toString());
        }
    
        private void initPath(String text) {
    
            Paint paint = new Paint();
            paint.setTextSize(getTextSize());
            //1. 获取到文字路径,保存到path中
            paint.getTextPath(text, 0, text.length(), 0, paint.getTextSize(),
                    mSrcPath);
    
            //2. 设置mPathMeasure
            mPathMeasure.setPath(mSrcPath, false);
    
            //3. 通过PathMeasure获取文字路径的总长度
            mLengthSum = mPathMeasure.getLength();
            while (mPathMeasure.nextContour()) {
                mLengthSum += mPathMeasure.getLength();
            }
        }
        public TextPathView(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
            initPath(getText().toString());
        }
    
        public TextPathView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            initPath(getText().toString());
        }
    
        public float getProgress() {
            return mProgress;
        }
    
        public void setProgress(float progress) {
            mProgress = progress;
            postInvalidate();
        }
    
        /** * 设置字符串(内部会进行动画的准备工作) * @param text */
        public void setText(String text) {
            setText(text, BufferType.NORMAL);
            initPath(text);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            //1. 结束的长度
            float stopDistance = mLengthSum * mProgress;
            //2. 配置好pathmeasure
            mPathMeasure.setPath(mSrcPath, false);
            //3.
            while (stopDistance > mPathMeasure.getLength()) {
                stopDistance -= mPathMeasure.getLength();
                mPathMeasure.getSegment(0, mPathMeasure.getLength(), mDstPath, true);
                if (!mPathMeasure.nextContour()) {
                    break;
                }
            }
            mPathMeasure.getSegment(0, stopDistance, mDstPath, true);
            //4. 绘制
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(mStrokeWidth);
            mPaint.setColor(getCurrentTextColor());
            mPaint.setAntiAlias(true);
            canvas.drawPath(mDstPath, mPaint);
        }
    
        public void startAnim() {
            ObjectAnimator objectAnimator
                    = ObjectAnimator.ofFloat(TextPathView.this, "Progress",
                    0, 1f);
            objectAnimator.setDuration(mDuration);
            objectAnimator.start();
        }
    }

[https_blog.csdn.net_feather_wch_article_details_79991218]: https://blog.csdn.net/feather_wch/article/details/79991218

发表评论取消回复

表情：

评论列表（有 0 条评论，66人围观）

还没有评论，来说两句吧...

相关阅读

相关【项目实战】文本标注

一、什么是数据标注？数据标注即通过分类、画框、标注、注释等，对图片、语音、文本、视频等数据进行处理，标记对象的特征，以作为机器学习基础素材的过程。机器学习需要反复学习

今天药忘吃喽~/ 2024年02月17日 11:33/ 0 赞/ 46 阅读

相关【Flutter 实战】动画核心

![20200707071106160.png][] > 老孟导读：动画系统是任何一个UI框架的核心功能，也是开发者学习一个UI框架的重中之重，同时也是比较难掌握的一部分，下

电玩女神/ 2023年02月23日 09:30/ 0 赞/ 35 阅读

相关探秘神奇的运动路径动画 Motion Path

CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1\[1\]，翻译过来也就是运动路径。本文将对 motion path 一探究

╰+攻爆jí腚メ/ 2023年01月19日 14:59/ 0 赞/ 18 阅读

相关【Flutter 实战】动画序列、共享动画、路由动画

![20200825071144392.png][] > 老孟导读：此篇文章是 Flutter 动画系列文章第四篇，本文介绍动画序列、共享动画、路由动画。动画序列

灰太狼/ 2022年11月30日 15:46/ 0 赞/ 286 阅读

相关 Android动画实战-仿简聊App动画菜单

在上一篇博客中，我们分析了Android中四大动画的基本介绍、使用方法、特征。还没有浏览的童靴看这里：[Android动画之旅一Android动画基本介绍][Android_A

旧城等待，/ 2022年07月28日 09:56/ 0 赞/ 181 阅读

相关 Android 动画实战

前言通过之前的[《Android 动画总结》][Android]，对常用的Android动画有了一个整体认识。但是，之前的内容都是概念性的，所列的demo也没有实际意义

超、凢脫俗/ 2022年07月15日 04:59/ 0 赞/ 185 阅读

相关 Path文本动画实战

转载请注明链接: [https://blog.csdn.net/feather\_wch/article/details/79991218][https_blog.csdn.n

小鱼儿/ 2022年05月27日 12:09/ 0 赞/ 67 阅读

相关 iOS动画实战之Lottie动画

介绍如果你还不知道Lottie是什么, 那你真的out了. 如果把iOS动画分为两类: 交互式动画, 播放式动画, 那么其中的播放动画完全可以使用Lottie来完成,

一时失言乱红尘/ 2022年05月19日 01:13/ 0 赞/ 346 阅读

相关 fasttext文本分类实战

一、安装fastext fastText在Python2和Python3中都可以使用，已有了现成的包，但只支持Linux和mac系统，windows暂时还不支持fastT

一时失言乱红尘/ 2022年04月23日 06:34/ 0 赞/ 457 阅读

相关 BERT文本分类实战

一、简介在开始使用之前，我们先简单介绍一下到底什么是BERT，大家也可以去BERT的github上进行详细的了解。在CV问题中，目前已经有了很多成熟的预训练模型供大家使

系统管理员/ 2021年11月23日 05:06/ 0 赞/ 470 阅读