《Motion Design for iOS》(二十一)

一旦你完成你动画的完美动作,你只需要插入阻尼、刚度和质量值到你的动画代码中,然后无论你动画什么都会和你之前正确的值的动作一样。

我们也需要让JNWSpringAnimation对象知道我们想要动画属性的开始和结束值是什么。这是用来绘制弹簧和关键帧值的。

JNWSpringAnimation *scale =
    [JNWSpringAnimation animationWithKeyPath:@"transform.scale"];
scale.damping = 9;
scale.stiffness = 100;
scale.mass = 2;
scale.fromValue = @(1.0);
scale.toValue = @(2.0);

现在我们的JNWSpringAnimation对象知道了它的开始值和结束值,以及我们想要模仿的弹簧的准确属性,我们现在可以把它添加到我们想要移动的CALayer上去了。在我们的例子中,我们要将它添加到redBall上去。

JNWSpringAnimation *scale =
    [JNWSpringAnimation animationWithKeyPath:@"transform.scale"];
scale.damping = 9;
scale.stiffness = 100;
scale.mass = 2;
scale.fromValue = @(1.0);
scale.toValue = @(2.0);

[redBall.layer addAnimation:scale forKey:scale.keyPath];

这个名为scale的动画现在根据给定的关键路径(又称为我们想要在layer上改变的值)被添加到redBall.layer中了。我们可以将“transform.scale”传入到forkey:的参数中,但我们也可以只传入准确的我们创建的动画关键路径,这样我们就不会混淆JNWSpringAnimation的关键路径和我们要协调动画时使用的关键路径。在这个例子中,我们创建动画使用的关键路径“transform.scale”可以直接写成scale.keyPath.

如果我们创建并运行我们的代码,这就是产生的动画。





现在如果你想要在Swift工程中使用JNWSpringAnimation,由于你是使用一个Objective-C框架,你需要使用一些称为“桥街头”的东西让Xcode知道你想要在你的Swift代码中使用非Swift的框架。所以首先,我拖动称为JNWSwift的我需要使用JNWSpringAnimation的.h和.m文件到Xcode中的我的Swift工程中(包含到Xcode工程文件中)。Xcode就会询问是否要创建一个桥街头,我选择要,这就是哪个特殊文件的内容。

// This is within the JNWSwift-Bridging-Header.h file
// that was automatically created for me

#import "JNWSpringAnimation.h"
#import "NSValue+JNWAdditions.h"

任何添加到这个特殊的桥街头文件中的Objective-C头文件都会被设为Swift可见,这样你就可以使用Swift来交互它们的Objective-C函数。酷的地方在于当你想要在你的Swift代码中使用它们时,你不需要有任何import说明,Xcode会处理它。

当设置好桥街头之后,你就可以进入你的Swift代码中并开始处理你想要操作的对象,在这个例子中,就是JNWSpringAnimation。这里是我用Swift写的创建与上面的例子一样的动画的代码,依然是使用JNWSpringAnimation

let scale = JNWSpringAnimation(keyPath: "transform.scale")
scale.damping = 9.0
scale.stiffness = 100
scale.mass = 2
scale.fromValue = NSNumber(float: 1.0)
scale.toValue = NSNumber(float: 2.0)

redBall.layer.addAnimation(scale, forKey: scale.keyPath)

它看起来和上面的Objective-C代码非常接近,但是当然没有包含调用方法的方括号,并且如果你写过JavaScript的话,它看起来与其非常相似。

这就是Swift代码和Objective-C代码会创建的一样的动画。





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

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

时间: 2024-10-19 13:19:18

《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》(二十五)

现在我们已经了解了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》(二十七)

是时候添加一些动画了.为了警告框的显示,如我之前所说,我们想要覆盖层从完全透明(不可见)变成半透明.我们还想要添加两个动画到警告框中:将不透明度从0.0动画到1.0,以及将比例从大于1.0动画到1.0.这就是iOS 7的警告框做的事情,所以我们要模仿它. 首先让我们处理两个不透明度的动画(覆盖层和警告框视图),因为不透明度动画一般不需要任何高级的弹簧动作,让我们使用一些简单的基于block的UIView动画. // 淡入灰色的封盖层和警告框视图 [UIView animateWithDurati

《Motion Design for iOS》(四十二)

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

《Motion Design for iOS》(二)

流动的现实动画的起源 在1981年,迪士尼长期动画师Ollie Johnston 和 Frank Thomas(迪士尼九大元老的成员--1920年代和1930年代迪士尼的原始动画团队)写了一本名为<Disney Animation: The Illusion of Life>的书,概括了他们在迪士尼早期卡通工作中倡导人物动画的基本原则. 这12个基本动画原则在<Disney Animation: The Illusion of Life>一书中被详细的描述,并且这本书现在被工作于此

《Motion Design for iOS》(十二)

自然的动作 标准的动画时间曲线是好用的,但还可以更好,而且它们不足以让你的用户觉得对你的界面感到惊奇和愉悦,因为它们仍然是机器人的感觉,而不是如人类或受外力驱动的物体般完全流动性和自然.如果我们想要让动画变得真正的自然,我们就需要去观察自然世界以及真实的物体的行为,这样我们就可以模仿其动作.这就是软件中迷人.自然的动画的秘密本质:让你的物体动作符合物理法则,这样你界面中的元素就仿佛有了质量和动量,就如在屏幕上滑动或就在你的用户手指下方一般. 所以自然的动作时怎样的呢?符合物理法则的移动例子是什么

《Motion Design for iOS》(四十一)

就如JNWSpringAnimation一样,你可以调整想要模仿的弹簧动作的属性.这里是上个例子中相关的部分. scale.springBounciness = 20.0f; // Between 0-20 scale.springSpeed = 1.0f; // Between 0-20 Pop允许你调整弹簧的弹性和速度.每个值都可以从0到20.就如iOS 7中基于block的弹簧动画一样,这些值都是算入弹簧动作方程式的真实值的一个抽象.而不同于iOS 7的是,我认为Pop在抽象这些值时做的很

《Motion Design for iOS》(二十六)

现在让我们着手我们的警告框界面,为了便于在这个demo中实现,会仅仅是一个简单的图片而不是一个有label和按钮的纯代码的界面.让我们开始创建这个界面. CGFloat alertDimension = 250; CGRect alertViewFrame = CGRectMake( self.window.bounds.size.width/2 - alertDimension/2, self.window.bounds.size.height/2 - alertDimension/2, al