小智 3
有一个很棒的工具可以创建这样的动画矢量。 https://shapeshifter.design/我在那里创建了您的示例,我将尝试在接下来的几个步骤中解释如何操作。
在文件、导入和导出旁边的左下角,单击添加窗口以添加新路径。添加路径后,选择它并导航到 pathData 字段。首先我们将从动画部分开始,将其添加到pathData
M 4 6 L 22 2 L 2 22 L 19.5 3.5 L 4 6
Run Code Online (Sandbox Code Playgroud)
您可以在此处查看有关 M、L、Z 命令的更多信息/sf/answers/2949695941/
还将填充颜色设置为您需要的任何颜色。
在最近创建的路径的左下角或路径名称旁边的右上角,选择秒表并添加路径数据动画。
对于第一个动画集
startTime = 0
endTime = 100 //CHANGE THIS BASE ON YOUR NEEDS
interpolator = Linear
fromValue = M 4 6 L 4 6 L 4 6 Z
toValue = M 4 6 L 22 2 L 19 3.5 Z
Run Code Online (Sandbox Code Playgroud)
然后添加另一个动画(左下角添加的pathData动画上有+号)并设置下一个值
startTime = 100 //CHANGE THIS BASE ON YOUR NEEDS
endTime = 200 //CHANGE THIS BASE ON YOUR NEEDS
interpolator = Linear
fromValue = M 4 6 L 22 2 L 19 3.5 Z M 22 2 L 22 2 L 19 3.5 Z
toValue = M 4 6 L 22 2 L 19 3.5 Z M 22 2 L 2 22 L 19 3.5 Z
Run Code Online (Sandbox Code Playgroud)
然后为白色部分添加两条新路径。在顶部将 pathData 设置为:
M 9 7.5 L 11.5 11 L 12.5 10 L 10.5 7.5 Z
Run Code Online (Sandbox Code Playgroud)
在底部将 pathData 设置为:
M 13 12.5 L 15.5 15.5 L 17 15.5 L 14 11.5 Z
Run Code Online (Sandbox Code Playgroud)
要更改背景颜色,请在左下角选择矢量,然后在画布颜色字段中设置背景颜色。
完成后,您可以将其导出为动画矢量可绘制对象并将其添加到您的项目中。当您将生成的 .xml 文件添加到项目时,打开它并更改宽度和高度。
这是如何启动动画的示例:
Drawable drawable = imageView.getDrawable();
if( drawable instanceof AnimatedVectorDrawable ) {
AnimatedVectorDrawable animation = (AnimatedVectorDrawable) drawable;
animation.start();
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
414 次 |
| 最近记录: |