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

《Motion Design for iOS》(十九)

作者头像
Cloudox
发布2021-11-23 13:09:09
5900
发布2021-11-23 13:09:09
举报
文章被收录于专栏:月亮与二进制

JNWSpringAnimation

JNWSpringAnimation是Jonathan Willing,一个Mac和iOS开发者,写的一个很棒的动画框架。要理解它为什么棒,让我们先回过头再一次谈谈Core Animation。

如我之前所说,Core Animation的时间曲线是由三维贝塞尔曲线定义的。你可以告诉一个动画去使用线性、淡入、淡入淡出或者淡出时间曲线,或者你可以手动设置曲线的控制点,就如你可以在CSS动画中使用三维贝塞尔动画时间函数。

然而,你不能用这种方式定义弹簧动作动画曲线,因为他们的形状太高级了。所以你可以怎么做呢?我们可以创建类似这个的其他什么动作吗?

这种类型的弹簧动画曲线无法通过简单的三维贝塞尔曲线来创建。

苹果还给开发者提供了一种称为CAKeyframeAnimation的特殊的动画类别,用来代替无忧的像我们之前讨论的动画(你定义开始和结束值并让Core Animation为你计算中间值)

关键帧动画是指你给系统提供一系列的值(用来改变物体的位置、旋转、比例等等。)然后它会根据你定义的时间间隔一步步地改变你列出来的值。你可以使用关键帧动画来创建多重部分的动画,其中一些物体在开始的几秒移动到一个位置,然后移动到另一个方向。你还可以改变每段的时间曲线。

JNWSpringAnimation工作的方式就是定义你的弹簧的关键属性,例如阻尼、刚度和质量,然后告诉它你要动画的属性是什么,JNWSpringAnimation就会为你创建一个包含你的动画的大量值的CAKeyframeAnimation,在到达最终值前弹簧动作曲线中的每1/60秒都有值。接着,你要做的只是将这个关键帧动画添加到你想要动画的CALayer中去,(可以是它自己的layer,或者是一个UIView的layer属性),Core Animation会一步步地执行每个关键帧,每秒60次,直到它到达最终位置动画就结束了。系统不需要知道你是如何生产关键帧列表中的所有值的,也不需要知道它会产生什么类型的动作,它只是盲目地在每一步按照你想要的方式改变动画属性。

详细地说的话,JNWSpringAnimation获取你给它的用来描述你想要在动作中模仿的弹簧的值,并用代码绘制真实的弹簧曲线。然后生成所有的动画关键帧值,它本质上在曲线上每次只走非常小的一步来定义曲线上每1/60秒的值。那就是为物体移动过程中每个位置的值。完成这个过程会非常快,因为要在动画开始前就全部准备好。

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

查看作者首页

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

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

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

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

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