让我们看一些简单的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"];
这就是这个代码产生的动画。
![](http://pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvaW1nLmJsb2cuY3Nkbi5uZXQvMjAxNjA4MTEwOTAzMTY1ODM=.jpg)
很有弹性!我们已经谈论了很多关于如何用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_