Android中的动画矢量资产路径(Line,Arc,...)

时间:2022-11-21 16:09:33

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 :

假设我有一条线,我想要Animate这条线,首先线是隐藏的,经过时间传递少许小线出现并完成,我的问题是可以在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> 

1 个解决方案

#1


2  

AnimateVectorDrawable using trimPath* attributes

使用trimPath *属性的AnimateVectorDrawable

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

VectorDrawable 元素有三个属性,可用于指定应绘制路径的哪个部分。

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

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

android:trimPathStart

机器人:trimPathStart

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

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

android:trimPathEnd

机器人:trimPathEnd

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

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

android:trimPathOffset

机器人:trimPathOffset

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

移位修剪区域(允许显示区域包括开始和结束),范围从0到1.默认值为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.

您需要做的就是创建一个动画一个或多个属性的AnimatedVectorDrawable。最有可能的是,您只需要为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

如果您不想自己创建AnimatedVectorDrawable文件,可以使用一些库来帮助它。例如: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.

或者,如果您想使用SVG,您可以使用Romain Guy描述的技术。

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

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

还有一些图书馆可以为您提供繁重的工作:例如。 https://github.com/geftimov/android-pathview

#1


2  

AnimateVectorDrawable using trimPath* attributes

使用trimPath *属性的AnimateVectorDrawable

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

VectorDrawable 元素有三个属性,可用于指定应绘制路径的哪个部分。

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

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

android:trimPathStart

机器人:trimPathStart

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

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

android:trimPathEnd

机器人:trimPathEnd

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

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

android:trimPathOffset

机器人:trimPathOffset

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

移位修剪区域(允许显示区域包括开始和结束),范围从0到1.默认值为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.

您需要做的就是创建一个动画一个或多个属性的AnimatedVectorDrawable。最有可能的是,您只需要为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

如果您不想自己创建AnimatedVectorDrawable文件,可以使用一些库来帮助它。例如: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.

或者,如果您想使用SVG,您可以使用Romain Guy描述的技术。

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

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

还有一些图书馆可以为您提供繁重的工作:例如。 https://github.com/geftimov/android-pathview