《Motion Design for iOS》(十八)

从iOS 7中的弹簧动画开始

从iOS 7开始,苹果在他现有的一套动画方法中添加了类弹簧的动画能力。实际上,他们还添加了很多东西;他们的UIKit Dynamics 框架是一个整合到了UIKit中的完整的物理引擎,允许你添加地心引力、弹簧附着、动力等到你的界面元素中。

让我们看看一个iOS 7中介绍的更改了的基于block的动画方法,它现在增加了一些额外的参数来实现类弹簧动画。这个是我们动画代码的更改。

UIView *redBall = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
redBall.backgroundColor = [UIColor redColor];
redBall.layer.cornerRadius = 50;
[self.window addSubview:redBall];

[UIView animateWithDuration:3 delay:0 usingSpringWithDamping:.3
    initialSpringVelocity:0 options:0 animations:^{
    redBall.transform = CGAffineTransformMakeTranslation(300, 0);
} completion:NULL];

哇,这是一个长方法!如你所见,有一些我们之前的例子里没有的额外的参数在方法中调用了。参数包括弹簧阻尼和初始弹簧速度。弹簧阻尼是一个0到1之间的值,1模仿一个没有震荡的过阻尼弹簧系统,0表示很有弹力的欠阻尼系统。速度参数用来定义物体开始的快慢,当你使用手势用于用户在屏幕上滑动手指持续一个物体的移动的时候会非常有用。

在我们的例子中我们设置阻尼为0.3(有点弹性),因为我们是用物体静止开始的所以速度为0。因为弹动会使时间变长所以我们也增加了持续时间。





就我个人来说,我不认为iOS 7中使用了新block方法的弹簧动画如我所愿地平滑移动,当你想要完善动作时他们也没有提供足够的弹簧属性来操作。还有,如果你在创建一个地图app并想要使用这些UIKit Dynamics中的弹簧动作将是不幸的。如果你的app还需要支持iOS 7之前的版本怎么办?你也是不幸的,因为UIKit Dynamics直到iOS 7才出现并且不能用于之前的版本中。

所以还有什么别的方式可以创建自然的动作、类弹簧的动画呢?其他的可选项是什么?幸运的是,我认为有两个非常好的UIKit Dynamics的替代方式可以解决我上面列出的关于调整属性和不修改太多就能在iOS 6以及Mac OS X上工作的所有问题。我是下面给两个框架的铁杆粉丝,并且在我已发布和未来开发的app上广泛地使用它们。

这两个框架是JNWSpringAnimationPop by Facebook



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

版权所有:http://blog.csdn.net/cloudox_

时间: 2024-10-18 11:24:57

《Motion Design for iOS》(十八)的相关文章

Motion Design for iOS

Book Description Motion Design for iOS is a first-of-its-kind guide that explains how to both design & build wonderful, immersive animations for iOS. Learn about the history of animation and motion, the basic principles of engaging animation design i

《Motion Design for iOS》(三十八)

我在我自己的iPhone app Interesting中也使用了波浪形的动画.来看看我的app的动画并构建它. 动画Interesting的Stories Into Position 当我的新闻app Interesting首次打开时,我会发起一个网络请求来拉取最近的文章.当请求返回时,我需要用UITableView来放置文章数据,每行一篇文章.一些app选择在数据返回时淡入列表,一些会将行一行行地滑动到位置上,而其他的则立即显示行,没有任何动画.我选择使用一个内置的类似我们刚刚构建的音乐播放

《Motion Design for iOS》(二十五)

现在我们已经了解了Core Animation的基础并且使用了优秀的框架JNWSpringAnimation来模仿弹簧系统,是时候来开始写一些真实的示例代码了. 仿制一个iOS AlertView 重现一个熟悉的界面元素是一个很好的熟悉动画开发的方式.首先,让我们创建我们自己的标准iOS警告视图.这是内置的警告视图的样子. 在本指南之前的章节中,我解释了分解一个动画的各个组成部分有多么重要,这样你就可以准确地构建它.仅仅说"警告框动画进入屏幕"是不够的,你需要准确地知道发生了什么.让我

《Motion Design for iOS》(三十二)

现在让我们添加我们的图标按钮. // 添加图标 UIButton *icon = [UIButton buttonWithType:UIButtonTypeCustom]; [icon setImage:[UIImage imageNamed:@"map-icon"] forState:UIControlStateNormal]; [icon addTarget:self action:@selector(didTapMapIcon:) forControlEvents:UIContr

《Motion Design for iOS》(四十六(最终章))

所以你应该使用哪个动画框架呢? 我们讨论了iOS7的弹簧动画.JNWSpringAnimation和Facebook的Pop,很自然的你会想知道该使用哪个动画框架.有一个我不是仅仅选一个动画框架并单独专注于它的原因,我想要提供一个大的关于你可以构建动画和iOS原生界面的不同方式的概览. 在我的app中,我倾向于根据不同的目的对三种框架都进行使用.如果我只是非常简单地淡出一个视图,我们直接使用基于block的UIView动画,因为它们的代码很少.如果我在做一个指数延迟类型的动画(缓慢.平稳地移动到

《Motion Design for iOS》(十六)

Core Animation是一个动画和图形合成框架,用于提高速度和效率.虽然在名字中有动画的单词,不要让它误导你以为它只能做这个:它实际上负责屏幕上显示的所有视图的整体渲染体系结构,可以非常快速地进行透明度计算.图像过滤和视觉效果.它是为iOS创造的,但从OS X10.5开始,也可以在Mac上应用. 要通过GPU管理渲染在屏幕上的图像内容,Core Animation使用CALayer对象作为主力.CALayer负责界面渲染,实际上,UIView对象只是CALayer的简单封装,而Core A

《Motion Design for iOS》(四十二)

构建立即响应的按钮 你玩过Loren Brichter的游戏Letterpress吗?我很喜欢的Loren构建的一个关于界面的东西可能不是每个人都明显喜欢的:我喜欢每个按钮在用户按下时立即切换到一个不同的状态的样子.绝对不会延迟.这不是一个简单实现的行为,因为即使你可以将一个图片设为UIButton的UIControlStateHighlighted状态图,它也只会在点击发生后一小会启动,而且它不允许更进一步的代码来运行它.如果我想要在用户点击一个UIButton后立即运行一个动画,我就不得不自

《Motion Design for iOS》(八)

在Jeff的地图动画中,他同时使用了所有位置.透明度和比例动画的组合. 初始的面板稍微缩小并且透明度降低,所以它很好地淡出到应用的背景中去了. 地图面板从一个比1.0倍稍微大一点的比例(可能是1.1倍之类的)以及0.0的透明度开始.然后动画减小到1.0倍以及1.0的透明度.它还有一个轻微的位置动画来上移一些像素. 记得这个手表的界面和它光滑的动作么?真的没有什么秘诀,这个动画设计唯一的属性就是元素的位置.没有比例或者透明度的调节,元素仅仅是在屏幕上通过改变他们的位置来移入移出.每个动画的开始时间

《Motion Design for iOS》(三十九)

介绍Facebook的Pop 在2014年4月,Facebook的工程师Kimon Tsinteris发布了Pop,Facebook构建用来支撑他们app Paper的一个弹簧动画框架.这个框架的起源其实早于Facebook,Kimon构建了其中的大部分用来支撑他被Facebook于2011年收购的电子书公司Push Pop Press.你可能记得Push Pop Press,它获得了苹果的设计奖,作为iPad的电子书,为被称为"Our Choice"的AI Gore所构建. 点击观看