《Motion Design for iOS》(二十二)

球的动画是从其原始尺寸增加到两倍大然后立即跳回其原始尺寸。这确实是我们上面所写代码的准确行为,但球在动画完成后跳回到起原始尺寸的原因却是需要重点理解的。

Core Animation在任何给出的时间内会维持三个你的层的集合或者树。每个层树都会在你的界面显示过程中扮演一个重要的角色。

  1. 模型层树。模型层树反映了一个layer静止不动画时的所有属性。比如说,当我们设置redBall.layer.cornerRadius到50来让它变成球时,我们就是在模型层上设置属性。模型层上的值是你的app交互的最多的。任何时候你改变一个layer的值时,都在更新它的模型层。模型层上的值不会在动画过程中改变,并会持续反应你添加动画前的值。
  2. 表现层树。表现层树反映了动画时layer上的属性,并包含了运行动画时的变化值。你不应该在这个层树上设置任何值,通常都是在想要准确了解一个layer在哪或是其在动画过程中的行为时通过查看当前的动画值来与表现层树交互。
  3. 渲染树。渲染树时苹果的私有值集合,用来执行渲染到屏幕上的实际绘制。你不需要与其交互或知道这些值。

当我们添加一个动画到layer的时候,动画会在layer 的表现树上操作这些值,当动画完成的时候,动画会自动从layer移除,并且表现树的值会变回模型树的值,因为这些值反映了真实、静止的layer属性。

如果我们想要layer 的属性更新为动画的最终值,我们需要明确地说明。对,我知道折痕奇怪,但因为Core Animation允许开发者构建非常多类型的动画,它们需要支持有些时候你确实想要你的动画被移除然后layer回到其原始位置的使用案例。

这里是在末尾添加了决定性的一行后的代码示例。

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];
redBall.transform = CGAffineTransformMakeScale(2.0, 2.0);

通过手动地设置redBall的transform属性为两倍比例,并匹配动画的最终值,动画会在移除的时候将实际的layer上的transform值无缝更新为匹配动画的最终值。现在球就会维持在2倍大小了。GIF依然会回到起始位置,不过在代码中球不会。





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

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

时间: 2024-08-25 07:19:00

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

《Motion Design for iOS》(二十五)

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

《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

《Motion Design for iOS》(二十四)

我大部分展示的比例变更动画,但这不意味着你不能动画layer的更多属性!这里就是使用JNWSpringAnimation来使用弹簧动作旋转一个layer的示例. JNWSpringAnimation *scale = [JNWSpringAnimation animationWithKeyPath:@"transform.rotation"]; scale.damping = 10; scale.stiffness = 100; scale.mass = 3; scale.fromVa

《Motion Design for iOS》(二十)

让我们看一些使用JNWSpringAnimation来使用不同类型的弹簧动作并有不同属性的动画的例子.在我们的第一个例子中,我们还是要动画之前同样的红色的球,使用我们定义的弹簧管理的弹簧效果将它的尺寸从1提升到2.0倍. JNWSpringAnimation *scale = [JNWSpringAnimation animationWithKeyPath:@"transform.scale"]; 首先,我们定义我们的JNWSpringAnimation对象,一个动画的新实例,命名为s

《Motion Design for iOS》(二十七)

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

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

一旦你完成你动画的完美动作,你只需要插入阻尼.刚度和质量值到你的动画代码中,然后无论你动画什么都会和你之前正确的值的动作一样. 我们也需要让JNWSpringAnimation对象知道我们想要动画属性的开始和结束值是什么.这是用来绘制弹簧和关键帧值的. JNWSpringAnimation *scale = [JNWSpringAnimation animationWithKeyPath:@"transform.scale"]; scale.damping = 9; scale.sti

「kuangbin带你飞」专题二十二 区间DP

layout: post title: 「kuangbin带你飞」专题二十二 区间DP author: "luowentaoaa" catalog: true tags: - kuangbin - 区间DP - 动态规划 传送门 B.LightOJ - 1422 Halloween Costumes 题意 按顺序参加舞会,参加一个舞会要穿一种衣服,可以在参加完一个舞会后套上另一个衣服再去参加舞会,也可以在参加一个舞会的时候把外面的衣服脱了,脱到合适的衣服,但是脱掉的衣服不能再穿,参加完

【管理心得之二十二】小人物 仰视 大授权

场景再现====================Boss:小王,来我办公室一下.小王: 嗯Boss:近期总公司有会,需要到外地出差几日.我不在的这段期间里,公司大小事务你帮忙处理一下.          如果有什么难决定的事,第一时间电话.邮件联系我商定即可.小王:  明白.放心吧领导,绝不会让你失望的Boss:嗯,那就好,没事了. {小王走出办公室} 心中暗喜,"难道这就是传说中的授权,Boss不在的时候,我岂不是最高权力的行使者." ==================== 从场景