前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《Motion Design for iOS》(十一)

《Motion Design for iOS》(十一)

作者头像
Cloudox
修改2021-11-23 13:06:08
5500
修改2021-11-23 13:06:08
举报
文章被收录于专栏:月亮与二进制

现在来添加第三个球的动画。这第三个球,会在开始的时候动作的很快,然后归于正常,不断变慢最终停止在最终值。这是一个淡出动作的例子。

下面是淡出动作的时间曲线。

一个视觉化这种曲线的方式是想象餐厅里的服务员给你拿来了你的食物。他们不会快速地突然将盘子放在你的面前,他们会慢慢地最终把盘子停放在桌子上。

最后一种更加常见的时间曲线是淡入动作,这意味着非常缓慢地开始动画,然后快速地结束。

下面大致就是这种动画曲线的样子。

观察淡入动画曲线,你可以看到在0.5秒的时候(动画时间的一半)比例值仅仅才到最终值的1/4。这创建了一种动画开始得非常缓慢迟钝,然后在最后的时间里迅速地跑到最终值的感觉。

线性,淡入淡出,淡出,淡入动画曲线是四种大部分界面系统默认提供的内置的时间选项,比如说,在CSS3动画中就默认提供这些时间曲线。在iOS的动画框架——Core Animation中也是默认提供的。

类似Core Animation和CSS3中提供的缓慢曲线在数学上由Bezier曲线定义,就如你在Sketch、Illustrator或者其他矢量绘图工具中绘制的一样。要定义在缓慢动画中使用的Bezier曲线类型,你需要选择曲线端点的位置。Core Animation和CSS3执行缓慢动画使用的特定曲线类型是一种三维的Bezier曲线,意味着有四个控制点来定义。

移动控制点是如何影响曲线形状的。

下一节我们会开始学习漂亮动画背后的真实魔法,它创建了自然感觉的动作。

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

查看作者首页

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/11/20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档