PathAnimView

> 编程语言

开源

用于做Path动画的自定义View。 I have a path.I have a view. (Oh~),Path(Anim)View.

1.1K stars0 点赞1 次浏览

访问官网 GitHub

工具介绍

用于做Path动画的自定义View。 I have a path.I have a view. (Oh~),Path(Anim)View.

PathAnimView

用于做Path动画的自定义View。

I have a path.I have a view. (Oh~),Path(Anim)View.

现已经找到图片->SVG->PATH的正确姿势，

Now i have a pic.I have a view. Oh~,Path(Anim)View.

使用：

Step 1. 在项目根build.gradle文件中增加JitPack仓库依赖。

    allprojects {
		repositories {
			...
			maven { url "https://jitpack.io" }
		}
	}

Step 2. Add the dependency

	dependencies {
	        compile 'com.github.mcxtzhang:PathAnimView:V1.0.0'
	}

一概述

原本只是想模仿一下我魂牵梦萦的StoreHouse效果，没想到意外撸出来一个工具库。

最简单用法，给我一个path，我还你一个动画。

I have a path.I have a view. (Oh~),Path(Anim)View.

    Path sPath = new Path();
    sPath.moveTo(0, 0);
    sPath.addCircle(40, 40, 30, Path.Direction.CW);
    pathAnimView1.setSourcePath(sPath);

先看效果图：(真机效果很棒哦，我自己的手机是去年某款599的手机，算是低端的了，6个View一起动画，不会卡，查看GPU呈现模式，95%时间都处于16ms线以下。性能还可以的)

其中图1 是普通逐渐填充的效果，无限循环。图2 是仿StoreHouse 残影流动效果。（但与原版并不是完全一模一样，估计原版不是用Path做的）图3 是逐渐填充的效果，设置了只执行一次。图4 是仿StoreHouse效果。数据源来自R.array.xxxx 图5 是另一种自定义PathAnimHelper实现的自定义动画效果。类似Android L+ 系统进度条效果。图6 是仿StoreHouse效果，但是将动画时长设置的很大，所以能看到它逐渐的过程。

2017 01 05 更新：

I have a pic.I have a view. Oh~,Path(Anim)View. 效果先随便上几个图，以后你找到的图有多精彩，gif就有多精彩：

StoneHouse效果如下简单使用：

        pathAnimView1 = (StoreHouseAnimView) findViewById(R.id.pathAnimView1);
        Path sPath = new Path();
        sPath.moveTo(0, 0);
        sPath.addCircle(40, 40, 30, Path.Direction.CW);
        pathAnimView1.setSourcePath(PathParserUtils.getPathFromArrayFloatList(StoreHousePath.getPath("McXtZhang")));
        pathAnimView1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                pathAnimView1.startAnim();
            }
        });

参数

目前可配参数： 1 绘制方面，支持绘制Path的前景背景色。

    //设置颜色
    fillView2.setColorBg(Color.WHITE).setColorFg(Color.BLACK);

2 动画方面，目前支持设置动画的时长，是否无限循环等。

    //设置了动画总时长，只执行一次的动画
    fillView2.setAnimTime(3000).setAnimInfinite(false).startAnim();

3 仿StoreHouse风格的View，还支持设置残影的长度。

//设动画时长，设置了stoneHouse残影长度
    storeView3.setPathMaxLength(1200).setAnimTime(20000).startAnim();

4 当然你可以拿到Paint自己搞事情：

    //当然你可以自己拿到Paint，然后搞事情，我这里设置线条宽度
    pathAnimView1.getPaint().setStrokeWidth(10);

数据源：

PathAnimView的数据源是Path。（给我一个Path，还你一个动画View）所以内置了几种将别的资源->Path的方法。 1 直接传string。 StoreHouse风格支持的A-Z,0-9 "." "- " " "（源自百万大神的库文末也有鸣谢，）

    //根据String 转化成Path
    setSourcePath(PathParserUtils.getPathFromArrayFloatList(StoreHousePath.getPath("ZhangXuTong", 1.1f, 16)));

2 定义在R.array.xxx里

    //动态设置 从StringArray里取
    storeView2.setSourcePath(PathParserUtils.getPathFromStringArray(this, R.array.storehouse, 3));

3 简单的SVG(半成品) 以前从gayHub上找了一个SVG-PATH的转换类：SvgPathParser，现在派上了用场，简单的SVG-PATH，可以，复杂的还有问题，还需要继续寻找更加方案。

        //SVG转-》path
        //还在完善中，我从github上找了如下工具类，发现简单的SVG可以转path，复杂点的 就乱了
/*        SvgPathParser svgPathParser = new SvgPathParser();
        try {
            Path path = svgPathParser.parsePath("M1,1 L1,50 L50,50 L50,50 L50,1 Z");
            storeView3.setSourcePath(path);
        } catch (ParseException e) {
            e.printStackTrace();
        }*/

简单用法API

1 xml定义

普通PathAnimView 效果如图1 3。动画是进度填充直到满的效果。

高仿StoreHouse风格AnimView：这种View显示出来的效果如图2 4 6 。动画是残影流动的效果。

2 开始动画

    fillView1.startAnim();

3 停止动画

    fillView1.stopAnim();

4 清除并停止动画

    fillView1.clearAnim();

稍微搞基高级点的用法预览

看到这里细心的朋友可能会发现，上一节，我没有提第5个图View是怎么定义的，而且第五个View的效果，貌似和其他的不一样，仔细看动画是不是像Android L+的系统自带进度条ProgressBar的效果？那说明它的动画效果和我先前提到的两种不一样，是的，一开始我撸是照着StoreHouse那种效果撸的，这是我第二天才扩展的。高级的用法，就是本控件动画的扩展性。你完全可以通过继承PathAnimHelper类，重写onPathAnimCallback（）方法，扩展动画，图5就是这么来的。先讲用法预览，稍后章节会详解。用法：对任意一个普通的PathAnimView，设置一个自定义的PathAnimHelper类即可：

        //代码示例 动态对path加工，通过Helper
        pathAnimView1.setPathAnimHelper(new CstSysLoadAnimHelper(pathAnimView1, pathAnimView1.getSourcePath(), pathAnimView1.getAnimPath()));

自定义的PathAnimHelper类:

…

二逐个介绍

这里我简单画了一下本文介绍的几个类的类图：对于重要方法和属性标注了一下。

我们的主角PathAnimView继承自View，是一个自定义View。它内部持有一个PathAnimHelper，专注做Path动画。它默认的实现是 逐渐填充 的动画效果。

一般情况下只需要更换PathAnimHelper,PathAnimView即可做出不同的动画。（图1第5个View）

但是如果需要扩充一些动画属性供用户设置，例如仿StoreHouse风格的动画View，想暴露 残影长度 属性供设置。我这里采用的是：继承自PathAnimView，并增加属性get、set 方法，并重写getInitAnimHeper()方法，返回自定义的PathAnimHelper。如StoreHouseAnimView继承自PathAnimView,增加了残影长度的get、set方法。并重写getInitAnimHeper()方法，返回StoreHouseAnimHelper对象。 StoreHouseAnimHelper类继承的是PathAnimHelper。

先看PathAnimView: 这里我将一些不重要的get、set方法和构造方法剔除，留下比较重要的方法。

…

代码本身不难，注释也比较详细，核心的话，就是onDraw()方法咯：我这里用平移做的paddingLeft、paddingTop。先利用源Path绘制底边的样子。再利用animPath绘制前景，这样animPath不断变化，并且重绘View->onDraw()，前景就会不断变化，形成动画效果。那么核心就是animPath的的变化了，animPath的变化交由 mPathAnimHelper去做。

    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //平移
        canvas.translate(mPaddingLeft, mPaddingTop);
        
        //先绘制底，
        mPaint.setColor(mColorBg);
        canvas.drawPath(mSourcePath, mPaint);
        
        //再绘制前景，mAnimPath不断变化，不断重绘View的话，就会有动画效果。
        mPaint.setColor(mColorFg);
        canvas.drawPath(mAnimPath, mPaint);
    }