使用 Shape Shifter 创建 Android AVD

社区移动开发Android

picture.image

Android AnimatedVectorDrawable(AVD)介绍

今天主要介绍的是如何使用 Shape Shifter 创建 AVD, 并将向你展示如何在 Android 项目中使用它们.

什么是 AVD?

Android Lollipop 5.0 API 21开始, AnimatedVectorDrawable类及其向后兼容的对应类的引入, 为Android生态系统带来了一种通过使用XML定义动画的全新而强大的方式. 根据官方文档, 这些组件可以在一个.xml文件中定义, 也可以在三个不同的文件中定义.

不久之后, 在Android Nougat 7.1 API 25 中, Android 允许这些动画在主线程之外运行, 而在渲染线程中运行, 从而使这一功能更加强大. 这使得 UI 线程可以专注于应用的主要 UI 组件, 而无需在动画上花费时间.

在本文中, 我将进一步探讨AnimatedVectorDrawable类, 并解释如何在 Android 应用中创建和使用这个强大类的实例, 以便轻松集成动画图标.

Shape Shifter

Shape Shifter 是由Alex Lockwood创建的一个项目, 有助于为 Android, iOS 和网页创建动画图标. Shape Shifter 应用使用了同一作者在 本文 中建立的图标动画技术.

picture.image

在该工具的帮助下, Android 开发人员可以创建流畅的动画图标, 这些图标可以直接从该工具中导出, 并以 XMLAnimatedVectorDrawable 的形式导入到你的 Android 项目中.

创建 AVD

在继续前行之前, 让我们通过一个示例来了解如何使用 Shape Shifter 创建一个简单的动画图标 XML, 然后我们将在下一节的 Android 项目中使用该 XML.

首先, 我们将选择一个 SVG 图标资产, 然后将其导入应用. 在本例中, 我们将使用一个指向左边的双箭头, 然后将其制作成动画.

picture.image

文件导入应用后, 我们就可以开始添加动画了, 方法是点击左下角面板内不同path右侧的秒表按钮, 然后选择要应用的动画类型. 然后, 我们可以通过拖放路径的持续时间栏来编辑动画持续时间.

picture.image

添加几个动画后, 点击中间大播放按钮的PLAY, 就会显示当前动画图标的流程.

picture.image

一旦我们对制作的动画效果感到满意, 将最终产品从 Shape Shifter 导出到 AVD 文件就非常简单了. 点击左下角的Export按钮, 然后点击Animated Vector Drawable.

picture.image

此过程将下载一个 .xml 文件, 该文件可直接导入到你的 Android 项目中, 并可用作 AnimatedVectorDrawableAnimatedVectorDrawableCompat 对象. 接一来将对此作进一步介绍.

如何使用 AVD

从上一节的 XML 文件开始, 你可以将该文件添加到 res/drawable 文件夹, 从而将其带入你的项目. 这可以通过拖放或集成开发环境的菜单完成.

XML 文件上传到 Android 项目后, 在集成开发环境中打开该文件, 就会出现新添加的动画图标的交互式预览. 要触发动画, 只需点击预览面板底部的PLAY按钮即可.

picture.image

一旦我们准备好实际使用动画图标, 只需将其设置为ImageViewsrc值, 就像使用普通图像资产一样. 需要注意的是, 由于这是一个矢量可绘制图标, 我们可以将其 widthheight 设置为任何我们想要的大小, 而且该图标可以自行调整大小, 不会受到太多限制.

最后, 必须触发AnimatedVectorDrawable形式的动画图标才能开始动画. 为此, 只需在适当的时候在可绘制实例上调用 .start().

就是这么简单! 请务必调用上面函数中的代码, 看看你的动画图标是如何运行的.

picture.image

总结一下

总而言之, 使用 AnimatedVectorDrawable 可以为你的应用带来一些亮点. 如果你有兴趣查看我使用的资产, 并在你的机器上查看代码示例, 请查看我为本文制作的 示例项目.

此外, Shape Shifter 应用还为开发人员提供了创建动画图标的简单方法, 而无需启动昂贵的设计工具. 如果你想了解有关矢量图标动画的更多信息, 请查看Alex 的深入探讨. 或者, 也可以查看 Shape Shifter BETA 版本, 它拥有我们在这篇文章中没有介绍的新功能和全新的可能性.

今天的内容就介绍到这里啦!

一家之言, 欢迎拍砖!

Happy Coding! Stay GOLDEN!

0
0
0
0
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论