我怎样才能将图标的动画转换成另一个图标,比如汉堡进入箭头(导航抽屉)或铅笔进入十字架(收件箱)?我该如何制作这个动画?
解决方法
可以使用
animated-vector
实现图标动画
首先将您的图标定义为矢量drawables.例如,让我们按照勾号来交叉动画,如here所示.我们将ic_tick动画为ic_cross.
ic_cross.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="120dp" android:height="120dp" android:viewportWidth="@integer/viewport_width" android:viewportHeight="@integer/viewport_height"> <group android:name="@string/groupTickCross" android:pivotX="@integer/viewport_center_x" android:pivotY="@integer/viewport_center_y"> <path android:name="@string/cross" android:pathData="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4" android:strokeWidth="@integer/stroke_width" android:strokeLineCap="square" android:strokeColor="@color/stroke_color"/> </group> </vector>
ic_tick.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="120dp" android:height="120dp" android:viewportWidth="@integer/viewport_width" android:viewportHeight="@integer/viewport_height"> <group android:name="@string/groupTickCross" android:pivotX="@integer/viewport_center_x" android:pivotY="@integer/viewport_center_y"> <path android:name="@string/tick" android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" android:strokeWidth="@integer/stroke_width" android:strokeLineCap="square" android:strokeColor="@color/stroke_color"/> </group> </vector>
接下来,我们为每个步骤创建动画师. valueFrom告诉动画的起点,valueTo是动画的最终产品.插值器是插值的类型,你可以在Android文档中找到更多. duration指定动画的持续时间.
tick_to_cross.xml
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:propertyName="pathData" android:valueFrom="M4.8,7" android:valueTo="M6.4,6.4" android:duration="@integer/duration" android:interpolator="@android:interpolator/fast_out_slow_in" android:valueType="pathType"/>
现在,使用动画矢量,我们为矢量设置动画.这里< target android:name指定动画必须在其上完成的目标,android:animation告诉动画完成. avd_tick_to_cross.xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/ic_tick"> <target android:name="@string/tick" android:animation="@animator/tick_to_cross" /> </animated-vector>
关于如何在可绘制矢量之间进行动画制作有一些限制,但如果你有一个清晰的画面,那么它们可以以某种方式被黑客攻击,动画应该是什么,以及动画应该如何进行.