问说网手机版
躺着 站着 跪着轻松访问
问说网 / 蜀ICP备号
感谢您对问说网的支持，提出您在使用过程中遇到的问题或宝贵建议，您的反馈对我们产品的完善有很大帮助。
您的反馈我们已收到！
感谢您提供的宝贵意见，我们会在1-2个工作日，通过您留下的联系方式将处理结果反馈给您！&nbsp&#8250&nbsp&nbsp&#8250&nbsp
Android实现炫酷SVG动画效果
原文出处：&svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言，使用svg格式我们可以直接用代码来描绘图像，可以用任何文字处理工具打开svg图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器(如火狐浏览器)来观看。使用svg格式可让你设计激动人心的、高分辨率的Web图形页面。svg格式具备目前网络流行的jpg和png等格式无法具备的优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价;可在svg图像中保留可编辑和可搜寻的状态;平均来讲，svg文件比其它格式的图像文件要小很多，因而下载也很快。我们先来看几张Android上使用SVG的效果图：从上面的图片看到，如果我们自己来实现这样的特效，非常的麻烦，不过接下来给大家介绍一个开源控件，就可以配合SVG实现这些效果。首先我们来了解SVG文件的格式，举个例子：&svg&xmlns=&http://www.w3.org/2000/svg&&id=&svg&&class=&svg&&viewBox=&0&0&960&480&&preserveAspectRatio=&xMinYMin&meet&&
&&&&&&&&&path&fill=&#B4BEC8&&stroke=&#B4BEC8&&stroke-width=&2px&&stroke-miterlimit=&10&&d=&M570.14&440.2l-29.165-28.99c-7.103-8.5-6.152-36.718-6.02-40.665H425.048c.133&3.947&1.082&32.164-6.018&40.666l-29.166&28.99c-1.237&1.404-1.712&2.505-1.623&3.37h-.054c.76&7.727&6.664&6.332&13.607&6.332H558.01c6.696&0&12.412&1.27&13.493-5.56.58-.953.274-2.282-1.364-4.14z&&style=&fill-opacity:&1;&stroke-opacity:&0;&-webkit-transition:&fill-opacity&1s&ease-in-out,&stroke-opacity&1s&ease-in-&transition:&fill-opacity&1s&ease-in-out,&stroke-opacity&1s&ease-in-&stroke-dasharray:&474.px,&474.&stroke-dashoffset:&0&&&/path&
&&&&&&&&&path&fill=&#C8D2DC&&stroke=&#C8D2DC&&stroke-width=&2px&&stroke-miterlimit=&10&&d=&M727.488&355.125c0&8.514-6.597&15.42-14.738&15.42h-465.5c-8.14&0-14.74-6.906-14.74-15.42V45.42c0-8.517&6.6-15.42&14.74-15.42h465.5c8.142&0&14.738&6.903&14.738&15.42v309.705z&&style=&fill-opacity:&1;&stroke-opacity:&0;&-webkit-transition:&fill-opacity&1s&ease-in-out,&stroke-opacity&1s&ease-in-&transition:&fill-opacity&1s&ease-in-out,&stroke-opacity&1s&ease-in-&stroke-dasharray:&6875px,&6875&stroke-dashoffset:&0&&&/path&
&&&&&&&&&path&fill=&#fff&&stroke=&#C8D2DC&&stroke-width=&2px&&stroke-miterlimit=&10&&d=&M489.01&343.713c-.042-4.223&3.447-6.254&3.605-6.352-1.963-2.866-5.018-3.263-6.102-3.31-2.602-.26-5.074&1.53-6.39&1.53s-3.356-1.49-5.506-1.448c-2.836.04-5.445&1.645-6.907&4.182-2.942&5.11-.75&12.672&2.116&16.814&1.4&2.02&3.072&4.305&5.268&4.22&2.114-.08&2.913-1.362&5.467-1.362&2.556&0&3.274&1.363&5.51&1.322&2.273-.04&3.716-2.064&5.105-4.098&1.61-2.35&2.273-4.63&2.313-4.748-.05-.02-4.434-1.7-4.48-6.75M484.807&331.31c1.168-1.41&1.953-3.37&1.738-5.327-1.68.068-3.713&1.12-4.916&2.53-1.08&1.247-2.027&3.245-1.77&5.16&1.87.143&3.784-.95&4.947-2.362&&style=&fill-opacity:&1;&stroke-opacity:&0;&-webkit-transition:&fill-opacity&1s&ease-in-out,&stroke-opacity&1s&ease-in-&transition:&fill-opacity&1s&ease-in-out,&stroke-opacity&1s&ease-in-&stroke-dasharray:&115.px,&115.&stroke-dashoffset:&0&&&/path&
&&&&&&&&&path&fill=&#3C4650&&stroke=&#3C4650&&stroke-width=&2px&&stroke-miterlimit=&10&&d=&M727.488&315.527V45.982c0-8.828-6.597-15.982-14.738-15.982h-465.5c-8.14&0-14.74&7.155-14.74&15.982v269.545H727.49z&&style=&fill-opacity:&1;&stroke-opacity:&0;&-webkit-transition:&fill-opacity&1s&ease-in-out,&stroke-opacity&1s&ease-in-&transition:&fill-opacity&1s&ease-in-out,&stroke-opacity&1s&ease-in-&stroke-dasharray:&9063px,&9063&stroke-dashoffset:&0&&&/path&
&&&&&&&&&path&fill=&#141E28&&stroke=&#141E28&&stroke-width=&2px&&stroke-miterlimit=&10&&d=&M251.2&48.887h457.205v245.52H251.2z&&style=&fill-opacity:&1;&stroke-opacity:&0;&-webkit-transition:&fill-opacity&1s&ease-in-out,&stroke-opacity&1s&ease-in-&transition:&fill-opacity&1s&ease-in-out,&stroke-opacity&1s&ease-in-&stroke-dasharray:&7188px,&7188&stroke-dashoffset:&0&&&/path&
&&&&&&&/svg&上面的代码很复杂，如果说它们是代码的话，但是我们可以注意到，这种书写方式，有点类似于html，都是使用标签使用最多的标签是path，也就是路径有的人也会想到，要实现照片上的动态效果，我们可以使用Android自带的绘图类和函数，复杂的曲线路径，我们可以使用path这个类来制定那会不会SVG里面的path，其实也是这样，那么我们就可以将SVG中的path，对应到android，然后绘制出来就好了。SVG里面还有各种标签：包括line直线，circle圆，rect矩形，eliipse椭圆，polygon多边形，等等这些只要我们有一个SVG文件，都可以将其转换成java代码作为一个程序员，我们当然不能手动去做这个工作，那就涉及两个问题，一个是SVG的解析，一个是解析后的绘制幸运的是，已经有人完成了这个工作，并且在Github上开源&这篇文章将作为一个简单的例子，来使用上面的开源控件为了解析SVG,我们需要将一个androidsvg.jar包含进我们的lib下面我们来看这个控件的简单使用，作为一个自定义控件，我们只需要在布局文件里面添加&?xml&version=&1.0&&encoding=&utf-8&?&
&LinearLayout
&&&&xmlns:android=&/apk/res/android&
&&&&android:orientation=&vertical&
&&&&android:background=&#ff0000&
&&&&android:layout_width=&fill_parent&
&&&&android:layout_height=&fill_parent&&
&&&&&com.example.kaiyicky.myapplication.PathView
&&&&&&&&xmlns:app=&/apk/res-auto&
&&&&&&&&android:id=&@+id/pathView&
&&&&&&&&android:layout_width=&match_parent&
&&&&&&&&android:layout_height=&match_parent&
&&&&&&&&app:pathColor=&@android:color/white&
&&&&&&&&app:svg=&@raw/ironman_white&
&&&&&&&&app:pathWidth=&5&/&
&/LinearLayout&其实app:svg指定了一个SVG文件，我们可以把这个文章放在raw目录下面然后来看Activity里面：public&class&MainActivity&extends&FragmentActivity&{
&&&&@Override
&&&&protected&void&onCreate(Bundle&savedInstanceState)&{
&&&&&&&&super.onCreate(savedInstanceState);
&&&&&&&&setContentView(R.layout.activity_main);
&&&&&&&&final&PathView&pathView&=&(PathView)&findViewById(R.id.pathView);
//&&&&&&&&final&Path&path&=&makeConvexArrow(50,&100);
//&&&&&&&&pathView.setPath(path);
&&&&&&&&pathView.setFillAfter(true);
&&&&&&&&pathView.useNaturalColors();
&&&&&&&&pathView.setOnClickListener(new&View.OnClickListener()&{
&&&&&&&&&&&&@Override
&&&&&&&&&&&&public&void&onClick(View&v)&{
&&&&&&&&&&&&&&&&pathView.getPathAnimator().
&&&&&&&&&&&&&&&&&&&&&&&&delay(100).
&&&&&&&&&&&&&&&&&&&&&&&&duration(1500).
&&&&&&&&&&&&&&&&&&&&&&&&interpolator(new&AccelerateDecelerateInterpolator()).
&&&&&&&&&&&&&&&&&&&&&&&&start();
&&&&&&&&&&&&}
&&&&&&&&});
&&&&private&Path&makeConvexArrow(float&length,&float&height)&{
&&&&&&&&final&Path&path&=&new&Path();
&&&&&&&&path.moveTo(0.0f,&0.0f);
&&&&&&&&path.lineTo(length&/&4f,&0.0f);
&&&&&&&&path.lineTo(length,&height&/&2.0f);
&&&&&&&&path.lineTo(length&/&4f,&height);
&&&&&&&&path.lineTo(0.0f,&height);
&&&&&&&&path.lineTo(length&*&3f&/&4f,&height&/&2f);
&&&&&&&&path.lineTo(0.0f,&0.0f);
&&&&&&&&path.close();
&&&&&&&&return&
}看到注释的部分，调用了makeConvexArraw()方法，如果我们没有在xml文件里面指定svg文件，我们也可以在代码中手动指定绘制的路径让代码跑起来，点击屏幕，于是就实现了以下效果：就是这么简单，至于这么制作SVG文件，大家可以找美工帮忙，使用ps和ai,可以将图片转换成SVG最后是源码下载地址：整个过程有两个类，一个是SVG解析工具类：/**
&*&Util&class&to&init&and&get&paths&from&svg.
public&class&SvgUtils&{
&&&&&*&It&is&for&logging&purposes.
&&&&private&static&final&String&LOG_TAG&=&&SVGUtils&;
&&&&&*&All&the&paths&with&their&attributes&from&the&svg.
&&&&private&final&List&SvgPath&&mPaths&=&new&ArrayList&SvgPath&();
&&&&&*&The&paint&provided&from&the&view.
&&&&private&final&Paint&mSourceP
&&&&&*&The&init&svg.
&&&&private&SVG&mS
&&&&&*&Init&the&SVGUtils&with&a&paint&for&coloring.
&&&&&*&@param&sourcePaint&-&the&paint&for&the&coloring.
&&&&public&SvgUtils(final&Paint&sourcePaint)&{
&&&&&&&&mSourcePaint&=&sourceP
&&&&&*&Loading&the&svg&from&the&resources.
&&&&&*&@param&context&&&&&Context&object&to&get&the&resources.
&&&&&*&@param&svgResource&int&resource&id&of&the&svg.
&&&&public&void&load(Context&context,&int&svgResource)&{
&&&&&&&&if&(mSvg&!=&null)&
&&&&&&&&try&{
&&&&&&&&&&&&mSvg&=&SVG.getFromResource(context,&svgResource);
&&&&&&&&&&&&mSvg.setDocumentPreserveAspectRatio(PreserveAspectRatio.UNSCALED);
&&&&&&&&}&catch&(SVGParseException&e)&{
&&&&&&&&&&&&Log.e(LOG_TAG,&&Could&not&load&specified&SVG&resource&,&e);
&&&&&*&Draw&the&svg&to&the&canvas.
&&&&&*&@param&canvas&The&canvas&to&be&drawn.
&&&&&*&@param&width&&The&width&of&the&canvas.
&&&&&*&@param&height&The&height&of&the&canvas.
&&&&public&void&drawSvgAfter(final&Canvas&canvas,&final&int&width,&final&int&height)&{
&&&&&&&&final&float&strokeWidth&=&mSourcePaint.getStrokeWidth();
&&&&&&&&rescaleCanvas(width,&height,&strokeWidth,&canvas);
&&&&&*&Render&the&svg&to&canvas&and&catch&all&the&paths&while&rendering.
&&&&&*&@param&width&&-&the&width&to&scale&down&the&view&to,
&&&&&*&@param&height&-&the&height&to&scale&down&the&view&to,
&&&&&*&@return&All&the&paths&from&the&svg.
&&&&public&List&SvgPath&&getPathsForViewport(final&int&width,&final&int&height)&{
&&&&&&&&final&float&strokeWidth&=&mSourcePaint.getStrokeWidth();
&&&&&&&&Canvas&canvas&=&new&Canvas()&{
&&&&&&&&&&&&private&final&Matrix&mMatrix&=&new&Matrix();
&&&&&&&&&&&&@Override
&&&&&&&&&&&&public&int&getWidth()&{
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&}
&&&&&&&&&&&&@Override
&&&&&&&&&&&&public&int&getHeight()&{
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&}
&&&&&&&&&&&&@Override
&&&&&&&&&&&&public&void&drawPath(Path&path,&Paint&paint)&{
&&&&&&&&&&&&&&&&Path&dst&=&new&Path();
&&&&&&&&&&&&&&&&//noinspection&deprecation
&&&&&&&&&&&&&&&&getMatrix(mMatrix);
&&&&&&&&&&&&&&&&path.transform(mMatrix,&dst);
&&&&&&&&&&&&&&&&paint.setAntiAlias(true);
&&&&&&&&&&&&&&&&paint.setStyle(Paint.Style.STROKE);
&&&&&&&&&&&&&&&&paint.setStrokeWidth(strokeWidth);
&&&&&&&&&&&&&&&&mPaths.add(new&SvgPath(dst,&paint));
&&&&&&&&&&&&}
&&&&&&&&};
&&&&&&&&rescaleCanvas(width,&height,&strokeWidth,&canvas);
&&&&&&&&return&mP
&&&&&*&Rescale&the&canvas&with&specific&width&and&height.
&&&&&*&@param&width&&&&&&&The&width&of&the&canvas.
&&&&&*&@param&height&&&&&&The&height&of&the&canvas.
&&&&&*&@param&strokeWidth&Width&of&the&path&to&add&to&scaling.
&&&&&*&@param&canvas&&&&&&The&canvas&to&be&drawn.
&&&&private&void&rescaleCanvas(int&width,&int&height,&float&strokeWidth,&Canvas&canvas)&{
&&&&&&&&final&RectF&viewBox&=&mSvg.getDocumentViewBox();
&&&&&&&&final&float&scale&=&Math.min(width
&&&&&&&&&&&&&&&&&&&&&&&&/&(viewBox.width()&+&strokeWidth),
&&&&&&&&&&&&&&&&height&/&(viewBox.height()&+&strokeWidth));
&&&&&&&&canvas.translate((width&-&viewBox.width()&*&scale)&/&2.0f,
&&&&&&&&&&&&&&&&(height&-&viewBox.height()&*&scale)&/&2.0f);
&&&&&&&&canvas.scale(scale,&scale);
&&&&&&&&mSvg.renderToCanvas(canvas);
&&&&&*&Path&with&bounds&for&scalling&,&length&and&paint.
&&&&public&static&class&SvgPath&{
&&&&&&&&/**
&&&&&&&&&*&Region&of&the&path.
&&&&&&&&&*/
&&&&&&&&private&static&final&Region&REGION&=&new&Region();
&&&&&&&&/**
&&&&&&&&&*&This&is&done&for&clipping&the&bounds&of&the&path.
&&&&&&&&&*/
&&&&&&&&private&static&final&Region&MAX_CLIP&=
&&&&&&&&&&&&&&&&new&Region(Integer.MIN_VALUE,&Integer.MIN_VALUE,
&&&&&&&&&&&&&&&&&&&&&&&&Integer.MAX_VALUE,&Integer.MAX_VALUE);
&&&&&&&&/**
&&&&&&&&&*&The&path&itself.
&&&&&&&&&*/
&&&&&&&&final&Path&
&&&&&&&&/**
&&&&&&&&&*&The&paint&to&be&drawn&later.
&&&&&&&&&*/
&&&&&&&&final&Paint&
&&&&&&&&/**
&&&&&&&&&*&The&length&of&the&path.
&&&&&&&&&*/
&&&&&&&&final&float&
&&&&&&&&/**
&&&&&&&&&*&The&bounds&of&the&path.
&&&&&&&&&*/
&&&&&&&&final&Rect&
&&&&&&&&/**
&&&&&&&&&*&The&measure&of&the&path,&we&can&use&it&later&to&get&segment&of&it.
&&&&&&&&&*/
&&&&&&&&final&PathMeasure&
&&&&&&&&/**
&&&&&&&&&*&Constructor&to&add&the&path&and&the&paint.
&&&&&&&&&*
&&&&&&&&&*&@param&path&&The&path&that&comes&from&the&rendered&svg.
&&&&&&&&&*&@param&paint&The&result&paint.
&&&&&&&&&*/
&&&&&&&&SvgPath(Path&path,&Paint&paint)&{
&&&&&&&&&&&&this.path&=&
&&&&&&&&&&&&this.paint&=&
&&&&&&&&&&&&measure&=&new&PathMeasure(path,&false);
&&&&&&&&&&&&this.length&=&measure.getLength();
&&&&&&&&&&&&REGION.setPath(path,&MAX_CLIP);
&&&&&&&&&&&&bounds&=&REGION.getBounds();
}一个是SVG控件类：/**
&*&PathView&is&an&View&that&animate&paths.
public&class&PathView&extends&View&{
&&&&&*&Logging&tag.
&&&&public&static&final&String&LOG_TAG&=&&PathView&;
&&&&&*&The&paint&for&the&path.
&&&&private&Paint&paint&=&new&Paint(Paint.ANTI_ALIAS_FLAG);
&&&&&*&Utils&to&catch&the&paths&from&the&svg.
&&&&private&final&SvgUtils&svgUtils&=&new&SvgUtils(paint);
&&&&&*&All&the&paths&provided&to&the&view.&Both&from&Path&and&Svg.
&&&&private&List&SvgUtils.SvgPath&&paths&=&new&ArrayList&SvgUtils.SvgPath&(0);
&&&&&*&This&is&a&lock&before&the&view&is&redrawn
&&&&&*&or&resided&it&must&be&synchronized&with&this&object.
&&&&private&final&Object&mSvgLock&=&new&Object();
&&&&&*&Thread&for&working&with&the&object&above.
&&&&private&Thread&mL
&&&&&*&The&svg&image&from&the&raw&directory.
&&&&private&int&svgResourceId;
&&&&&*&Object&that&build&the&animation&for&the&path.
&&&&private&AnimatorBuilder&animatorB
&&&&&*&The&progress&of&the&drawing.
&&&&private&float&progress&=&0f;
&&&&&*&If&the&used&colors&are&from&the&svg&or&from&the&set&color.
&&&&private&boolean&naturalC
&&&&&*&If&the&view&is&filled&with&its&natural&colors&after&path&drawing.
&&&&private&boolean&fillA
&&&&&*&The&width&of&the&view.
&&&&private&int&
&&&&&*&The&height&of&the&view.
&&&&private&int&
&&&&&*&Default&constructor.
&&&&&*&@param&context&The&Context&of&the&application.
&&&&public&PathView(Context&context)&{
&&&&&&&&this(context,&null);
&&&&&*&Default&constructor.
&&&&&*&@param&context&The&Context&of&the&application.
&&&&&*&@param&attrs&&&attributes&provided&from&the&resources.
&&&&public&PathView(Context&context,&AttributeSet&attrs)&{
&&&&&&&&this(context,&attrs,&0);
&&&&&*&Default&constructor.
&&&&&*&@param&context&&The&Context&of&the&application.
&&&&&*&@param&attrs&&&&attributes&provided&from&the&resources.
&&&&&*&@param&defStyle&Default&style.
&&&&public&PathView(Context&context,&AttributeSet&attrs,&int&defStyle)&{
&&&&&&&&super(context,&attrs,&defStyle);
&&&&&&&&paint.setStyle(Paint.Style.STROKE);
&&&&&&&&getFromAttributes(context,&attrs);
&&&&&*&Get&all&the&fields&from&the&attributes&.
&&&&&*&@param&context&The&Context&of&the&application.
&&&&&*&@param&attrs&&&attributes&provided&from&the&resources.
&&&&private&void&getFromAttributes(Context&context,&AttributeSet&attrs)&{
&&&&&&&&final&TypedArray&a&=&context.obtainStyledAttributes(attrs,&R.styleable.PathView);
&&&&&&&&try&{
&&&&&&&&&&&&if&(a&!=&null)&{
&&&&&&&&&&&&&&&&paint.setColor(a.getColor(R.styleable.PathView_pathColor,&0xff00ff00));
&&&&&&&&&&&&&&&&paint.setStrokeWidth(a.getFloat(R.styleable.PathView_pathWidth,&8.0f));
&&&&&&&&&&&&&&&&svgResourceId&=&a.getResourceId(R.styleable.PathView_svg,&0);
&&&&&&&&&&&&}
&&&&&&&&}&finally&{
&&&&&&&&&&&&if&(a&!=&null)&{
&&&&&&&&&&&&&&&&a.recycle();
&&&&&&&&&&&&}
&&&&&*&Set&paths&to&be&drawn&and&animated.
&&&&&*&@param&paths&-&Paths&that&can&be&drawn.
&&&&public&void&setPaths(final&List&Path&&paths)&{
&&&&&&&&for&(Path&path&:&paths)&{
&&&&&&&&&&&&this.paths.add(new&SvgUtils.SvgPath(path,&paint));
&&&&&&&&synchronized&(mSvgLock)&{
&&&&&&&&&&&&updatePathsPhaseLocked();
&&&&&*&Set&path&to&be&drawn&and&animated.
&&&&&*&@param&path&-&Paths&that&can&be&drawn.
&&&&public&void&setPath(final&Path&path)&{
&&&&&&&&paths.add(new&SvgUtils.SvgPath(path,&paint));
&&&&&&&&synchronized&(mSvgLock)&{
&&&&&&&&&&&&updatePathsPhaseLocked();
&&&&&*&Animate&this&property.&It&is&the&percentage&of&the&path&that&is&drawn.
&&&&&*&It&must&be&[0,1].
&&&&&*&@param&percentage&float&the&percentage&of&the&path.
&&&&public&void&setPercentage(float&percentage)&{
&&&&&&&&if&(percentage&&&0.0f&||&percentage&&&1.0f)&{
&&&&&&&&&&&&throw&new&IllegalArgumentException(&setPercentage&not&between&0.0f&and&1.0f&);
&&&&&&&&progress&=&
&&&&&&&&synchronized&(mSvgLock)&{
&&&&&&&&&&&&updatePathsPhaseLocked();
&&&&&&&&invalidate();
&&&&&*&This&refreshes&the&paths&before&draw&and&resize.
&&&&private&void&updatePathsPhaseLocked()&{
&&&&&&&&final&int&count&=&paths.size();
&&&&&&&&for&(int&i&=&0;&i&&&&i++)&{
&&&&&&&&&&&&SvgUtils.SvgPath&svgPath&=&paths.get(i);
&&&&&&&&&&&&svgPath.path.reset();
&&&&&&&&&&&&svgPath.measure.getSegment(0.0f,&svgPath.length&*&progress,&svgPath.path,&true);
&&&&&&&&&&&&//&Required&only&for&Android&4.4&and&earlier
&&&&&&&&&&&&svgPath.path.rLineTo(0.0f,&0.0f);
&&&&@Override
&&&&protected&void&onDraw(Canvas&canvas)&{
&&&&&&&&super.onDraw(canvas);
&&&&&&&&synchronized&(mSvgLock)&{
&&&&&&&&&&&&canvas.save();
&&&&&&&&&&&&canvas.translate(getPaddingLeft(),&getPaddingTop());
&&&&&&&&&&&&final&int&count&=&paths.size();
&&&&&&&&&&&&for&(int&i&=&0;&i&&&&i++)&{
&&&&&&&&&&&&&&&&final&SvgUtils.SvgPath&svgPath&=&paths.get(i);
&&&&&&&&&&&&&&&&final&Path&path&=&svgPath.
&&&&&&&&&&&&&&&&final&Paint&paint1&=&naturalColors&?&svgPath.paint&:&
&&&&&&&&&&&&&&&&canvas.drawPath(path,&paint1);
&&&&&&&&&&&&}
&&&&&&&&&&&&fillAfter(canvas);
&&&&&&&&&&&&canvas.restore();
&&&&&*&If&there&is&svg&,&the&user&called&setFillAfter(true)&and&the&progress&is&finished.
&&&&&*&@param&canvas&Draw&to&this&canvas.
&&&&private&void&fillAfter(final&Canvas&canvas)&{
&&&&&&&&if&(svgResourceId&!=&0&&&&fillAfter&&&&progress&==&1f)&{
&&&&&&&&&&&&svgUtils.drawSvgAfter(canvas,&width,&height);
&&&&@Override
&&&&protected&void&onSizeChanged(final&int&w,&final&int&h,&int&oldw,&int&oldh)&{
&&&&&&&&super.onSizeChanged(w,&h,&oldw,&oldh);
&&&&&&&&if&(mLoader&!=&null)&{
&&&&&&&&&&&&try&{
&&&&&&&&&&&&&&&&mLoader.join();
&&&&&&&&&&&&}&catch&(InterruptedException&e)&{
&&&&&&&&&&&&&&&&Log.e(LOG_TAG,&&Unexpected&error&,&e);
&&&&&&&&&&&&}
&&&&&&&&if&(svgResourceId&!=&0)&{
&&&&&&&&&&&&mLoader&=&new&Thread(new&Runnable()&{
&&&&&&&&&&&&&&&&@Override
&&&&&&&&&&&&&&&&public&void&run()&{
&&&&&&&&&&&&&&&&&&&&svgUtils.load(getContext(),&svgResourceId);
&&&&&&&&&&&&&&&&&&&&synchronized&(mSvgLock)&{
&&&&&&&&&&&&&&&&&&&&&&&&width&=&w&-&getPaddingLeft()&-&getPaddingRight();
&&&&&&&&&&&&&&&&&&&&&&&&height&=&h&-&getPaddingTop()&-&getPaddingBottom();
&&&&&&&&&&&&&&&&&&&&&&&&paths&=&svgUtils.getPathsForViewport(width,&height);
&&&&&&&&&&&&&&&&&&&&&&&&updatePathsPhaseLocked();
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&},&&SVG&Loader&);
&&&&&&&&&&&&mLoader.start();
&&&&@Override
&&&&protected&void&onMeasure(int&widthMeasureSpec,&int&heightMeasureSpec)&{
&&&&&&&&super.onMeasure(widthMeasureSpec,&heightMeasureSpec);
&&&&&&&&if&(svgResourceId&!=&0)&{
&&&&&&&&&&&&int&widthSize&=&MeasureSpec.getSize(widthMeasureSpec);
&&&&&&&&&&&&int&heightSize&=&MeasureSpec.getSize(heightMeasureSpec);
&&&&&&&&&&&&setMeasuredDimension(widthSize,&heightSize);
&&&&&&&&&&&&
&&&&&&&&int&desiredWidth&=&0;
&&&&&&&&int&desiredHeight&=&0;
&&&&&&&&final&float&strokeWidth&=&paint.getStrokeWidth()&/&2;
&&&&&&&&for&(SvgUtils.SvgPath&path&:&paths)&{
&&&&&&&&&&&&desiredWidth&+=&path.bounds.left&+&path.bounds.width()&+&strokeW
&&&&&&&&&&&&desiredHeight&+=&path.bounds.top&+&path.bounds.height()&+&strokeW
&&&&&&&&int&widthSize&=&MeasureSpec.getSize(widthMeasureSpec);
&&&&&&&&int&heightSize&=&MeasureSpec.getSize(heightMeasureSpec);
&&&&&&&&int&widthMode&=&MeasureSpec.getMode(widthMeasureSpec);
&&&&&&&&int&heightMode&=&MeasureSpec.getMode(widthMeasureSpec);
&&&&&&&&int&measuredWidth,&measuredH
&&&&&&&&if&(widthMode&==&MeasureSpec.AT_MOST)&{
&&&&&&&&&&&&measuredWidth&=&desiredW
&&&&&&&&}&else&{
&&&&&&&&&&&&measuredWidth&=&widthS
&&&&&&&&if&(heightMode&==&MeasureSpec.AT_MOST)&{
&&&&&&&&&&&&measuredHeight&=&desiredH
&&&&&&&&}&else&{
&&&&&&&&&&&&measuredHeight&=&heightS
&&&&&&&&setMeasuredDimension(measuredWidth,&measuredHeight);
&&&&&*&If&the&real&svg&need&to&be&drawn&after&the&path&animation.
&&&&&*&@param&fillAfter&-&boolean&if&the&view&needs&to&be&filled&after&path&animation.
&&&&public&void&setFillAfter(final&boolean&fillAfter)&{
&&&&&&&&this.fillAfter&=&fillA
&&&&&*&If&you&want&to&use&the&colors&from&the&svg.
&&&&public&void&useNaturalColors()&{
&&&&&&&&naturalColors&=&
&&&&&*&Animator&for&the&paths&of&the&view.
&&&&&*&@return&The&AnimatorBuilder&to&build&the&animation.
&&&&public&AnimatorBuilder&getPathAnimator()&{
&&&&&&&&if&(animatorBuilder&==&null)&{
&&&&&&&&&&&&animatorBuilder&=&new&AnimatorBuilder(this);
&&&&&&&&return&animatorB
&&&&&*&Get&the&path&color.
&&&&&*&@return&The&color&of&the&paint.
&&&&public&int&getPathColor()&{
&&&&&&&&return&paint.getColor();
&&&&&*&Set&the&path&color.
&&&&&*&@param&color&-The&color&to&set&to&the&paint.
&&&&public&void&setPathColor(final&int&color)&{
&&&&&&&&paint.setColor(color);
&&&&&*&Get&the&path&width.
&&&&&*&@return&The&width&of&the&paint.
&&&&public&float&getPathWidth()&{
&&&&&&&&return&paint.getStrokeWidth();
&&&&&*&Set&the&path&width.
&&&&&*&@param&width&-&The&width&of&the&path.
&&&&public&void&setPathWidth(final&float&width)&{
&&&&&&&&paint.setStrokeWidth(width);
&&&&&*&Get&the&svg&resource&id.
&&&&&*&@return&The&svg&raw&resource&id.
&&&&public&int&getSvgResource()&{
&&&&&&&&return&svgResourceId;
&&&&&*&Set&the&svg&resource&id.
&&&&&*&@param&svgResource&-&The&resource&id&of&the&raw&svg.
&&&&public&void&setSvgResource(int&svgResource)&{
&&&&&&&&svgResourceId&=&svgR
&&&&&*&Object&for&building&the&animation&of&the&path&of&this&view.
&&&&public&static&class&AnimatorBuilder&{
&&&&&&&&/**
&&&&&&&&&*&Duration&of&the&animation.
&&&&&&&&&*/
&&&&&&&&private&int&duration&=&350;
&&&&&&&&/**
&&&&&&&&&*&Interpolator&for&the&time&of&the&animation.
&&&&&&&&&*/
&&&&&&&&private&Interpolator&
&&&&&&&&/**
&&&&&&&&&*&The&delay&before&the&animation.
&&&&&&&&&*/
&&&&&&&&private&int&delay&=&0;
&&&&&&&&/**
&&&&&&&&&*&ObjectAnimator&that&constructs&the&animation.
&&&&&&&&&*/
&&&&&&&&private&final&ObjectAnimator&
&&&&&&&&/**
&&&&&&&&&*&Listener&called&before&the&animation.
&&&&&&&&&*/
&&&&&&&&private&ListenerStart&listenerS
&&&&&&&&/**
&&&&&&&&&*&Listener&after&the&animation.
&&&&&&&&&*/
&&&&&&&&private&ListenerEnd&animationE
&&&&&&&&/**
&&&&&&&&&*&Animation&listener.
&&&&&&&&&*/
&&&&&&&&private&PathViewAnimatorListener&pathViewAnimatorL
&&&&&&&&/**
&&&&&&&&&*&Default&constructor.
&&&&&&&&&*
&&&&&&&&&*&@param&pathView&The&view&that&must&be&animated.
&&&&&&&&&*/
&&&&&&&&public&AnimatorBuilder(final&PathView&pathView)&{
&&&&&&&&&&&&anim&=&ObjectAnimator.ofFloat(pathView,&&percentage&,&0.0f,&1.0f);
&&&&&&&&/**
&&&&&&&&&*&Set&the&duration&of&the&animation.
&&&&&&&&&*
&&&&&&&&&*&@param&duration&-&The&duration&of&the&animation.
&&&&&&&&&*&@return&AnimatorBuilder.
&&&&&&&&&*/
&&&&&&&&public&AnimatorBuilder&duration(final&int&duration)&{
&&&&&&&&&&&&this.duration&=&
&&&&&&&&&&&&return&
&&&&&&&&/**
&&&&&&&&&*&Set&the&Interpolator.
&&&&&&&&&*
&&&&&&&&&*&@param&interpolator&-&Interpolator.
&&&&&&&&&*&@return&AnimatorBuilder.
&&&&&&&&&*/
&&&&&&&&public&AnimatorBuilder&interpolator(final&Interpolator&interpolator)&{
&&&&&&&&&&&&this.interpolator&=&
&&&&&&&&&&&&return&
&&&&&&&&/**
&&&&&&&&&*&The&delay&before&the&animation.
&&&&&&&&&*
&&&&&&&&&*&@param&delay&-&int&the&delay
&&&&&&&&&*&@return&AnimatorBuilder.
&&&&&&&&&*/
&&&&&&&&public&AnimatorBuilder&delay(final&int&delay)&{
&&&&&&&&&&&&this.delay&=&
&&&&&&&&&&&&return&
&&&&&&&&/**
&&&&&&&&&*&Set&a&listener&before&the&start&of&the&animation.
&&&&&&&&&*
&&&&&&&&&*&@param&listenerStart&an&interface&called&before&the&animation
&&&&&&&&&*&@return&AnimatorBuilder.
&&&&&&&&&*/
&&&&&&&&public&AnimatorBuilder&listenerStart(final&ListenerStart&listenerStart)&{
&&&&&&&&&&&&this.listenerStart&=&listenerS
&&&&&&&&&&&&if&(pathViewAnimatorListener&==&null)&{
&&&&&&&&&&&&&&&&pathViewAnimatorListener&=&new&PathViewAnimatorListener();
&&&&&&&&&&&&&&&&anim.addListener(pathViewAnimatorListener);
&&&&&&&&&&&&}
&&&&&&&&&&&&return&
&&&&&&&&/**
&&&&&&&&&*&Set&a&listener&after&of&the&animation.
&&&&&&&&&*
&&&&&&&&&*&@param&animationEnd&an&interface&called&after&the&animation
&&&&&&&&&*&@return&AnimatorBuilder.
&&&&&&&&&*/
&&&&&&&&public&AnimatorBuilder&listenerEnd(final&ListenerEnd&animationEnd)&{
&&&&&&&&&&&&this.animationEnd&=&animationE
&&&&&&&&&&&&if&(pathViewAnimatorListener&==&null)&{
&&&&&&&&&&&&&&&&pathViewAnimatorListener&=&new&PathViewAnimatorListener();
&&&&&&&&&&&&&&&&anim.addListener(pathViewAnimatorListener);
&&&&&&&&&&&&}
&&&&&&&&&&&&return&
&&&&&&&&/**
&&&&&&&&&*&Starts&the&animation.
&&&&&&&&&*/
&&&&&&&&public&void&start()&{
&&&&&&&&&&&&anim.setDuration(duration);
&&&&&&&&&&&&anim.setInterpolator(interpolator);
&&&&&&&&&&&&anim.setStartDelay(delay);
&&&&&&&&&&&&anim.start();
&&&&&&&&/**
&&&&&&&&&*&Animation&listener&to&be&able&to&provide&callbacks&for&the&caller.
&&&&&&&&&*/
&&&&&&&&private&class&PathViewAnimatorListener&implements&Animator.AnimatorListener&{
&&&&&&&&&&&&@Override
&&&&&&&&&&&&public&void&onAnimationStart(Animator&animation)&{
&&&&&&&&&&&&&&&&if&(listenerStart&!=&null)&listenerStart.onAnimationStart();
&&&&&&&&&&&&}
&&&&&&&&&&&&@Override
&&&&&&&&&&&&public&void&onAnimationEnd(Animator&animation)&{
&&&&&&&&&&&&&&&&if&(animationEnd&!=&null)&animationEnd.onAnimationEnd();
&&&&&&&&&&&&}
&&&&&&&&&&&&@Override
&&&&&&&&&&&&public&void&onAnimationCancel(Animator&animation)&{
&&&&&&&&&&&&}
&&&&&&&&&&&&@Override
&&&&&&&&&&&&public&void&onAnimationRepeat(Animator&animation)&{
&&&&&&&&&&&&}
&&&&&&&&/**
&&&&&&&&&*&Called&when&the&animation&start.
&&&&&&&&&*/
&&&&&&&&public&interface&ListenerStart&{
&&&&&&&&&&&&/**
&&&&&&&&&&&&&*&Called&when&the&path&animation&start.
&&&&&&&&&&&&&*/
&&&&&&&&&&&&void&onAnimationStart();
&&&&&&&&/**
&&&&&&&&&*&Called&when&the&animation&end.
&&&&&&&&&*/
&&&&&&&&public&interface&ListenerEnd&{
&&&&&&&&&&&&/**
&&&&&&&&&&&&&*&Called&when&the&path&animation&end.
&&&&&&&&&&&&&*/
&&&&&&&&&&&&void&onAnimationEnd();
上一篇： 英文原文： Tinting drawables 一篇关于如何为drawable和bitmap着色以匹配当前主题的短文。 在设计 Ready 主题部分的时候，我们想到了一个不仅可以改变app基本色彩，还可以改变图标和drawable色彩的方法。如果使用通常的做法，意味着为每一种颜色创建一个png
下一篇： 时间 时间，时间，时间啊；走慢一点吧～ 看见很多软件中都有时间线的东西，貌似天气啊，旅游啊什么的最多了；具体实现方式很多，在本篇文章中讲解一种自定义View封装的方式。 效果 先来看看效果。 分析 软件中，可以看见前面的时间线也就是线条加上圆圈组成}