Android中的动画矢量资产路径（线条，弧线...）(Animate Vector Asset Path in Android (Line , Arc ,…))

Android中的动画矢量资产路径（线条，弧线...）(Animate Vector Asset Path in Android (Line , Arc ,…))

假设我有一条线，我想要这条线的动画，首先线是隐藏的，时间过后，小线条出现并完成，我的问题是可能在Android中做到这一点，或者我必须使用Adobe After Effects？ 更新：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve" viewBox="0 0 500 400"> <style type="text/css"> .st0{fill:none; stroke:#009CA7; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10;} </style> <path class="st0" d="M10,140 C10,90,70,20,140,20 s110,40,110,40"/> <path class="st0" d="M210,260 l-1,-120 c0,-30,-30,-60,-70,-60 s-70,25,-70,60 v240"/> </svg>

Assuming that I have a Line and I want Animate this Line , First of all Line is Hidden , After Time Passing Little by Little Line is Appear and Completed , My Question is It's Possible to do this in Android or I must use Adobe After Effect? Update :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve" viewBox="0 0 500 400"> <style type="text/css"> .st0{fill:none; stroke:#009CA7; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10;} </style> <path class="st0" d="M10,140 C10,90,70,20,140,20 s110,40,110,40"/> <path class="st0" d="M210,260 l-1,-120 c0,-30,-30,-60,-70,-60 s-70,25,-70,60 v240"/> </svg>

最满意答案

AnimateVectorDrawable使用trimPath *属性

VectorDrawable <path>元素有三个属性，可让您指定应绘制路径的哪一部分。

请参阅： https ： //developer.android.com/reference/android/graphics/drawable/VectorDrawable.html

android:trimPathStart

要从头开始修剪的路径的分数，范围从0到1.默认值为0。

android:trimPathEnd

从末尾修剪的路径的分数，范围从0到1.默认值为1。

android:trimPathOffset

移位修剪区域（允许显示的区域包括开始和结束），范围从0到1.默认值为0。

所有你需要做的就是创建一个AnimatedVectorDrawable来激活一个或多个这些属性。 最有可能的是，你只需要动画trimPathEnd 。

如果你不想自己创建AnimatedVectorDrawable文件，有几个库可以帮助解决这个问题。 例如： https ： //github.com/tarek360/RichPath

路径追踪

或者如果你想从SVG工作，你可以使用Romain Guy描述的技术。

http://www.curious-creature.com/2013/12/21/android-recipe-4-path-tracing/

还有一些图书馆为你做了繁重的工作：例如。 https://github.com/geftimov/android-pathview

AnimateVectorDrawable using trimPath* attributes

VectorDrawable <path> elements have three attributes that let you specify which portion of the path should be drawn.

See: https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html

android:trimPathStart

The fraction of the path to trim from the start, in the range from 0 to 1. Default is 0.

android:trimPathEnd

The fraction of the path to trim from the end, in the range from 0 to 1. Default is 1.

android:trimPathOffset

Shift trim region (allows showed region to include the start and end), in the range from 0 to 1. Default is 0.

All you need to do is create an AnimatedVectorDrawable that animates one or more of these attributes. Most likely, you will only need to animate trimPathEnd.

If you don't want to create the AnimatedVectorDrawable file yourself, there are a few libraries to help with that. For example: https://github.com/tarek360/RichPath

Path tracing

Or if you want to work from an SVG, you could use the technique described by Romain Guy.

http://www.curious-creature.com/2013/12/21/android-recipe-4-path-tracing/

There are also libraries that do the heavy lifting for you: Eg. https://github.com/geftimov/android-pathview