zl程序教程

您现在的位置是:首页 >  其他

当前栏目

《Motion Design for iOS》(四十)

2023-03-15 23:21:52 时间

让我们看一些简单的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做了一些很酷的事情:如果你不设置它,它就会自动计算当前的开始值,并从这里开始。太赞了!