安卓动画绘制字母

Question

安卓动画绘制字母

5

我卡在动画部分，这对我来说有些困难，我需要像这个绿色标志一样进行绘制。我尝试使用Github指南来满足我的需求，但是只能使用Path通过坐标移动视图，而且我离所需结果还有很大距离。我不确定从哪里开始获得所需的动画效果。我避免使用嵌入式GIF和任何沉重的库来获得我的结果。请帮忙实现这种动画效果，我知道通过代码获得这种动画效果相当困难。

非常感谢任何帮助。

如果上面的视频链接不工作，请查看此链接：视频链接

- Ritu

1

https://streamable.com/ippq1c 已经损坏。 - Aniket Sahrawat

@AniketSahrawat 在为我工作。 - androidXP

@androidXP 它不符合印度的.com合规标准。我也尝试使用代理服务器，但没有成功。如果它对你有效，请在问题中附上那张图片。 - Aniket Sahrawat

将驱动器链接公开，我们需要访问... - AgentP

@PraveenSP 它已经公开了。请再次检查。 - Ritu

2个回答

2

你无法使用 Path 是因为 Path 会将对象从一个位置移动到另一个位置以产生动画效果。而你的视频是在动画中创建对象（绿色部分）的一部分。所以你有两个选择。 选项1 创建一个 SVG 并将其作为动态向量图形添加到你的代码中。你可以使用在线工具将视频转换为 SVG。然后将该 SVG 添加到你的 drawables 中，并创建一个 pathmorph XML 将颜色从黑色变为绿色。示例请参见 [Android 开发者网站][1]。

通常需要两个步骤：

步骤1：使用视频转换为 SVG 转换器获取你的动画的 SVG 文件。

步骤2：将你的 SVG Path 的颜色从黑色更改为绿色。你可以阅读一些样本代码。或者你可以使用 AnimatedSVGview 库来动态添加绿色到你的 SVG。 选项2 一种更简单的方法是将这个视频转换为 Gif，然后使用 Glide 显示它。

ImageView imageView = (ImageView) findViewById(R.id.imageView);
Glide.with(this).asGif().load(R.raw.image_gif).into(imageView);

- Abhishek

你能否请举一个选项1的例子？对于选项2，我已经提到我不想使用GIF，因为它对设备来说太重了。 - Ritu

首先，Glide并不是很重。您可以进行内存分析。其次，Glide允许您从设备和服务器中选择多种图像格式。因此，一旦您开始进一步开发应用程序并需要从URL加载图像，您将需要使用Glide。无论如何，我会在我的答案中添加更多细节。 - Abhishek

使用 Glide.with(this).load(R.raw.image_gif).into(imageView) 可以正常播放 gif，但是会一直重复播放。添加 .asGif() 后，GIF 就不再出现了。我需要让它在播放一次后停止，所以我想要为它附加监听器（.asGif() 很重要），代码如下：Glide.with(this).asGif().load(getDrawable(R.drawable.a)).listener(new GifEndListener()).into(imageView);我已经实现了 GifEndListener，代码如下：https://dev59.com/Ha_la4cB1Zd3GeqPoiqn#52868708 - Rohit

@Rohit - 为什么不提出一个新问题并在这里添加链接呢？我会看看能否回答。请不要忘记将您的代码添加到问题中。 - Abhishek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Apollo · Accepted Answer

有一个非常棒的工具可以创建像这样的动画向量。 https://shapeshifter.design/ 我已经在那里为您创建了示例，并尝试在接下来的几个步骤中解释如何操作。

在左下角的“文件”、“导入”和“导出”旁边点击添加窗口，以添加新路径。添加路径后选择它并导航到pathData字段。首先，让我们开始制作动画部分，在pathData中添加以下内容。

M 4 6 L 22 2 L 2 22 L 19.5 3.5 L 4 6

您可以在此处查看有关 M, L, Z 命令的更多信息 https://dev59.com/L1oV5IYBdhLWcg3wIbtT#42138513

还可以将填充颜色设置为所需颜色。

对于最近创建的路径的左下角或路径名称旁边的右上角，选择秒表并添加 pathData 动画。

对于第一个动画设置

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

然后添加另一个动画（在底部左下角的添加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

接下来针对白色部分添加两条新路径。在顶部设置pathData为以下内容：

M 9 7.5 L 11.5 11 L 12.5 10 L 10.5 7.5 Z

在底部将pathData设置为以下内容：

M 13 12.5 L 15.5 15.5 L 17 15.5 L 14 11.5 Z

改变背景颜色，需要在左下角选择“向量”（vector），然后在“canvasColor”字段中设置你的背景颜色。

完成后，可以将其导出为“Animated Vector Drawable”并将其添加到项目中。当您将生成的xml文件添加到项目中时，请打开它并更改宽度和高度。

以下是开始动画的示例：

Drawable drawable = imageView.getDrawable();
if( drawable instanceof AnimatedVectorDrawable ) {
    AnimatedVectorDrawable animation = (AnimatedVectorDrawable) drawable;
    animation.start();
}