zl程序教程

您现在的位置是:首页 >  其他

当前栏目

《Motion Design for iOS》(五)

2023-03-15 23:20:22 时间

就像之前手环的例子一样,这是另一个在视觉上解释应用数据层级的整体架构的动画。这个动画从一个简单的中心对齐文本菜单开始,当点击My Files的时候,文件夹图标会扩展开来显示那些文件。用户会得到一种菜单就在文件列表背后的感觉,并且觉得他们可以在任何时候点击右下角的菜单按钮回到列表。当点击菜单按钮时,收缩整个文件列表进入之前的文件夹图标然后再次显示菜单。

这是另一个Jakub Autalik设计的非常有趣的动画,之前的里程计东湖也是他创建的。每个界面都使用了多种内置的效果来错开每个视觉元素的显示。歌曲列表动画进入的方式比起简单地使用iOS导航栏push的动画进入来说是一种非常好看的方式。这个动画的关键不同点在于屏幕不是一次性移动的,界面上每一个独立的元素都在移动。为了达到这种效果,每个元素的开始时间都需要与之前的元素又一些错开,好像它们都被拖进来一样。这种类型的拖动效果会在之后作为编码示例来展示。

这个下拉刷新的骷髅头动画是一个很好的介绍一些古怪而有趣的,容易被忽视并且构建非常简单(而且廉价!)不需要任何复杂动画的界面元素的例子。在下拉手势中发生了一系列事情,首先,组成骷髅头图片的元素会旋转,让它像是在向下旋转一样。然后,有两个默认状态下界面上不可见的动画人物在下拉的时候出现。最后,这些动画人物不是简单的在用户下拉的时候出现,它们的一部分也会在手势过程中旋转和移动。这是一个包含多个不同元素的非常复杂的动画,但是你可以想象用户可能会一次次地下拉界面,因为它实在是太有趣了。这是让他们记住这个app的地方,而在用户的主屏幕上凸现出来是非常重要的。

如果你在寻找其他人创建的非常棒的app动画例子,我高度推荐你浏览CAPPTIVATE.coDribbble里的动画标签。

寻找动画并讨论它们为什么棒是很好的事,但是这不会让我们接近并充分分解它们做了什么从而自己创建惊艳的动画。让我们继续本指南的下一节来学习动画的结构和性能。

查看完整合集:https://github.com/Cloudox/Motion-Design-for-iOS

查看作者首页