安卓:动画自定义视图编辑2:新的官方培训指南编辑:答案总结注意例子问题

编辑2:新的官方培训指南

开发者网站发布了UI相关内容的培训指南,这是索引:

  • 动画概述
  • 属性动画概述
  • 对可绘制的图形进行动画处理
  • 使用动画显示或隐藏视图
  • 移动带动画的视图
  • 使用甩动动画移动视图
  • 使用缩放动画放大视图
  • 使用弹簧物理特性为运动添加动画效果
  • 自动对布局更新进行动画处理
  • 使用过渡对布局更改进行动画处理
  • 创建自定义过渡动画
  • 使用动画启动活动

如果您对其中任何一个感兴趣,请点击以下链接:https://developer.android.com/training/animation/


编辑:答案总结

我发现了5种在Android中制作动画的方法:

  1. 使用属性动画对 的属性进行动画处理,以平滑地更改 、 等。Viewrotationalphascale

  2. 帧动画动画可绘制):快速更改图片,使其看起来具有动画效果

  3. 使用矢量VectorDrawable)设计图像,并通过使用AnitimedVectorDrawable随着时间的推移对其进行编辑来对它们进行动画处理

  4. 覆盖 a,并通过在画布中绘画来执行自定义绘图onDraw()View

  5. 使用Lottie,从After Effects中重现动画。LottieFiles上提供的许多动画。

但是,Android也提供了一些内置工具,例如场景(允许您在共享该元素的多个布局之间进行动画转换),共享元素(可让您将一个元素从一个元素传递到另一个元素)等。ViewsViewActivity

这些功能中的许多(如果不是全部)都是在API 21中添加的,请单击此处了解更多信息。

以下是一些关于动画的有趣文章/博客:

最后,几个有趣的工具:

  • Mac工具在GitHub上录制Android屏幕。

  • 视频到GIF转换器在线


注意

我知道Android提供了诸如,等转换。scalealpharotatetranslation

例子

我想看一看和比较2个例子。

1 - 自定义视图动画

例如,装满一杯水画一条路

2 - 复杂视图动画

例如,Android的StackExchange应用程序,登录屏幕动画(也找不到视频,也没有检查iOS中的行为是否相同)。

问题

对于第一个例子,我想不出任何其他方法,除了播放GIF,或者在一小段时间后手动更改图像。

我不认为是这样,这就是为什么我想问,(1)你知道它是如何完成的吗?

关于第二个例子,我脑海中只有一个想法,那就是设置一个并通过在之后以某种方式传递它来相应地移动它。(2)这可能吗?PathViewanimate()

除了上面提到的,(3)你知道其他播放动画的技术吗?(如 - 在答案中提到Scene transitions-)

请分享!谢谢。


答案 1

“装满一杯水”动画是通过帧动画实现的直接规范,即一个接一个地改变图片。在这里,您可以看到一篇很好的博客文章,描述了如何实现这种动画,这基本上与您提到的“装满一杯水”相同:

enter image description here

另一个动画乍一看有点困难。

enter image description here

但是在打开“显示布局边界”后,您可以看到那里没有魔力。基本上,这只是一个翻译动画,它将视图从一个位置转换为另一个位置。对于此动画,困难的部分是实现查找平移坐标的算法。之后,动画制作只是通过场景过渡动画的几行代码。

// assuming at this step all the views are at the initial position at x0, y0
TransitionManager.beginDelayedTransition(rootLayout);
// here set view coordinates to x1, y1 - the final position

过渡框架将为您完成其余的工作。它将找到增量并为您执行动画。在这里,你会发现卢卡斯·罗查(Lucas Rocha)的一篇不错的文章。


答案 2

您知道播放动画的其他技术吗?

在Android中,您基本上有3种实现动画的方法:

  • 只需使用即可对视图(缩放、Alpha、旋转等)进行动画处理view.startAnimation(...)
  • 对可绘制对象进行动画处理(根据可绘制对象,这可能是从动画矢量可绘制对象到帧动画的任何内容)
  • 执行自定义绘图和动画

显然,仅通过框架方法对视图进行动画处理比创建一些可绘制的动画更容易,并且创建一些可绘制的 (xml) 比创建自定义绘制更容易。

你提到了几天前刚刚问世的洛蒂。我们将看到它做得有多好,但它看起来非常有希望。在引擎盖下,lottie将解析json并使用和(上面的第3个项目符号点)
进行一些自定义绘图,如果您可以获得After Effects,这可能是复杂动画(和跨平台)的“最简单”解决方案!CanvasPath

人们也开始分享动画,你可以在这里找到它们:
http://www.lottiefiles.com/


你知道它是怎么做到的吗?

(1)视频看起来像是他们做了一些自定义绘图。

  • 绘制并填充水的路径,在顶部动画化时用一些波浪对顶部进行动画处理,并撒上一些白点。
  • 在其周围绘制玻璃的形状

这将涉及创建自定义视图和/或可绘制和覆盖以及一些弧形,立方体或四边形将完成该技巧...我既不是设计师,也不是矢量专家:)onDraw(Canvas)Path.lineTo

我不认为使用动画矢量可绘制对象可以轻松实现这一点,但是您可以通过应用路径变形动画来完成它。(如果我没有记错的话,动画矢量可绘制对象仅在21 +上受支持)

(2)视频只是对路径进行动画处理并摆动旗帜。这可以通过使用AnitimeVectorDrawables(例如本博客所示)并修剪路径开始/结束,或者通过执行自定义绘制(因此也支持pre lolipop设备)通过动画化Path来实现,例如使用PathMeasure.getSegment()继续对路径进行动画处理。

正如azizbekians已经指出的那样,(3)动画是第一个提到的类型,只是动画(移动和缩放)视图。


关于第二个例子,我脑海中只有一个想法,那就是设置一个路径,并通过在animate()之后以某种方式传递它来相应地移动视图。(2)这可能吗?

沿路径移动视图显然是可能的,但随后视图会移动,并且您仍然需要找到一种方法来绘制路径,如上所述。


推荐