android动画：动画线答案

【问题标题】：android animation : animate lineandroid动画：动画线
【发布时间】：2016-10-03 00:23:07
【问题描述】：

我是 android 动画的新手，我想实现一个线条动画，它是 android 中编辑文本的底线。当焦点在电子邮件字段上时，当焦点转到密码字段时，我想要 android 文本的底线编辑为动画并进入密码字段。如下所示。我尝试使用路径动画，但我不知道如何使用圆形路径为路径动画中的线条设置动画。请帮助。提前谢谢。

【问题讨论】：

标签： android android-animation

【解决方案1】：

也许这将是使用带有android-pathview动画https://github.com/geftimov/android-pathview的Android Vector drawables的好方法

您将在一个布局中拥有登录名和密码，并且此可绘制动画将作为此布局的背景

【讨论】：

【解决方案2】：

这些动画是在 android 中使用基于矢量的可绘制对象实现的。特别是 SVG（可缩放矢量图形）。

这些只是一个带有路径数据的 xml 文件，然后您可以使用对象动画器来操作值以实现所需的动画。最后将它与另一个可绘制的 xml 连接起来。

这里是示例实现：

//示例xml矢量路径数据文件

    <?xml version="1.0" encoding="utf-8"?> 
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
android:viewportWidth="170" 

android:viewportHeight="170" 

android:width="500dp" 

android:height="500dp"> <path 

android:name="head" 

android:fillColor="@color/

android_green" 

android:pathData="M85,40 c10,0 20,0 30,0 c0,-5 -10,-20 -30,-20 c-20,0 -30,15 -30,20 c10,0 20,0 30,0"/>
 </vector>

//示例对象动画文件

    <?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
<objectAnimator android:duration="@integer/morphing_time" 

android:propertyName="pathData" 

android:valueType="pathType" 

android:valueFrom="M85,40 c10,0 20,0 30,0 c0,-5 -10,-20 -30,-20 c-20,0 -30,15 -30,20 c10,0 20,0 30,0" 

android:valueTo="M108,35 c5.587379,-6.7633 9.348007,-16.178439 8.322067,-25.546439 c-8.053787,0.32369 -17.792625,5.36682 -23.569427,12.126399 c-5.177124,5.985922 -9.711121,15.566772 -8.48777,24.749359 c8.976891,0.69453 18.147476,-4.561718 23.73513,-11.329308"/> 

<objectAnimator 

android:duration="@integer/morphing_time" 

android:propertyName="fillColor" 

android:valueFrom="@color/

android_green" 

android:valueTo="@color/apple_black" />
 </set>

//现在在drawables文件夹中像这样对其进行动画处理

 <?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" 

android:drawable="@drawable/

android_logo_vector_morphable"> 

<target android:animation="@animator/head_leaf_transition" 

android:name="head"/> 
</animated-vector>

来源： Lewis Mac Geary

如果此信息对您有帮助，请告诉我。

【讨论】：