《Motion Design for iOS》(四十)

让我们看一些简单的Pop动画时如何工作的。

// 添加我们的红球到界面上
UIView *redBall = [[UIView alloc] initWithFrame:CGRectMake(300, 300, 75, 75)];
redBall.backgroundColor = [UIColor redColor];
redBall.layer.cornerRadius = 75/2; // Half the width
[self.window addSubview:redBall];

POPSpringAnimation *scale =
    [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleXY];
scale.toValue = [NSValue valueWithCGPoint:CGPointMake(2, 2)];
scale.springBounciness = 20.0f; // Between 0-20
scale.springSpeed = 1.0f; // Between 0-20
[redBall pop_addAnimation:scale forKey:@"scale"];

这就是这个代码产生的动画。





很有弹性!我们已经谈论了很多关于如何用JNWSpringAnimation和Core Animation创建弹簧动画的内容,现在来看看Pop的方法。

POPSpringAnimation *scale =
    [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleXY];
scale.toValue = [NSValue valueWithCGPoint:CGPointMake(2, 2)];
scale.springBounciness = 20.0f; // Between 0-20
scale.springSpeed = 1.0f; // Between 0-20
[redBall pop_addAnimation:scale forKey:@"scaleAnimation"];

首先,我们创建了一个新的POPSpringAnimation对象。它被设计用 +animationWithPropertyNamed: 方法来初始化,获取参数来告诉Pop你想要动画什么属性。这非常像我们在JNWSpringAnimation中添加的关键路径值,但不是一个简单的字符串,Pop设计了很多值,这样你就不需要记住字符串。这里是一小部分Pop随时可以动画的属性。

  • kPOPViewAlpha——视图的透明度
  • kPOPViewFrame——视图的整体框架
  • kPOPViewScaleXY——视图的拉伸(X和Y轴)
  • kPOPViewBackgroundColor——视图的背景色
  • kPOPLayerCornerRadius——layer的角的度数
  • kPOPLayerRotation——layer的旋转度
  • kPOPLayerShadowRadius——layer下阴影的尺寸

所有的属性列表可以在Pop的GitHub找到。那是一个很长很长的清单,并且由于开发者一直在贡献,清单还在不断增长。

你可能注意到这些属性的命名有一些有趣的地方。我们有一个名为kPOPViewAlpha的属性,而另一个又名为kPOPLayerRotation。Pop酷的地方在于基于你传入的属性,你可以操作UIView的属性,也可以操作CALayer的属性。这完全取决于你,你只需要让Pop知道那一长串它支持的属性清单中你想要动画的是哪一个,无论它是一个view属性、layer属性或者任何类型的属性。Pop允许你更新任何你想要的类型的变量,甚至是与界面动画无关的。

我们设置了 toValue为 [NSValue valueWithCGPoint:CGPointMake(2, 2)] ,看起来可能会有点奇怪。为什么我们要将{2,2}这个点(我们的X和Y拉伸值)放到一个NSValue对象中去?好吧,这就是Pop工作的方式,它期待传到toValue参数中的是一个准确类型的值。而这个值得类型取决于我们添加的类型。它总是期待一个对象,在这个例子中,它想要一个CGPoint转化成的NSValue对象。不幸的是Pop的这个部分在文档中有点难懂,但随着开发者的贡献它也在变得更好。

至于要考虑的fromValue,我们在这个例子中没有设置它,因为Pop做了一些很酷的事情:如果你不设置它,它就会自动计算当前的开始值,并从这里开始。太赞了!



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

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

时间: 2024-08-10 15:02:22

《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》(四十六(最终章))

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

《Motion Design for iOS》(四十二)

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

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

开始iOS开发 如果你已经踏入原生iOS app开发之中,你可以跳过这一节去看Core Animation入门.但如果你刚开始iOS app的开发,抓住其基本就很重要,这样你就可以完全理解事物工作的原理. Xcode Xcode是Mac和iOS开发者用来创建原生应用的IDE(集成开发环境).它不仅仅是一个像你可能用过的Sublime Text之类的代码编辑器,它是设计.编程.测试.调试和分发Mac和iOS应用的整个一套功能.有一些编写Mac和iOS app的替代方式,但是大部分的开发者都使用Xc

《Motion Design for iOS》(四十五)

我们现在还剩两个动画,但它们比较大,需要一些思考.我们需要将顶部的线顺时针旋转45度(所以右边向下倾斜),然后我们需要底部的线逆时针旋转45度(所以右边向上倾斜).逆时针旋转意味着我们需要旋转一个负值,所以是-45度.当然了,动画不会接受度数值,它们需要角度值,45度在角度上是π/4.来做一些旋转动画. // 旋转顶部的线来构成X POPSpringAnimation *topRotate = [self.top.layer pop_animationForKey:@"topRotate&quo

《Motion Design for iOS》(四十四)

我们现在真正想做的是让线动画交叉变成X.所以让我们进入我们的 didTapHamburgerButton: 方法,我们每次点击这个按钮都会调用它,来看一看我们要做什么. - (void)didTapHamburgerButton:(id)sender { if (self.hamburgerOpen) { self.hamburgerOpen = NO; // 添加把X变回三条线的动画 } else { self.hamburgerOpen = YES; // 添加把三条线变成X的动画 } }

《Motion Design for iOS》(三十四)

构建Jakub Antalik的音乐播放器 Jakub是斯洛伐克的一名出色的设计师,已经设计了一些经常发布到Dtibbble去的非常有创造力的界面.其中一个作品非常打动我,那是一个很有趣的例子,证明了界面上每次操作一个元素的断断续续的动画是如何抓住用户的眼球的.在本指南的早期我展示了一个他设计的音乐播放器,含有一些很酷的内置动画,这里我们再看一下. 所以这里他明显使用到的技术是什么?他操纵了动画的开始时间.通过让每个元素比另一个元素慢一点动画到屏幕上的位置,并按照行的顺序操作屏幕上的每一个元素,

《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在抽象这些值时做的很