《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在抽象这些值时做的很棒,我还从没用Pop创建过一个看起来不自然或者违反物理法则的弹簧动作。

如果你想要调整动作方程使用的真实值,你也可以深入到一个更深的层次来操作它们。

scale.dynamicsFriction = 20;
scale.dynamicsMass = 1;
scale.dynamicsTension = 300;

这些值类似于JNWSpringAnimation中使用的值,但不完全一样,所以如果你想要准确地将一个JNWSpringAnimation变成Pop,就需要进行一些调整。幸运的是,springBounciness和springSpeed值在控制弹簧的动作上已经做得很好了,所以我经常就直接使用它们。

让我们看看弹性值的调整会如何影响动画。





这三个球的速度都是10,。红球的弹性是5,篮球是12,绿球是20。

最终,我们将动画添加到我们想要动画的对象上去。

[redBall pop_addAnimation:scale forKey:@"scaleAnimation"];

我们在视图上调用 -pop_addAnimation:forKey: 方法,并动画对象放入 pop_addAnimation:,然后将“scale”放入 forKey:。不同于JNWSpringAnimation和其他Core Animation的是,我们传入的键不需要匹配我们动画的属性。这个键只是视图上这个动画的一个唯一的名字,可以是你想要的任何值。如果你想要在运行的时候获取一个动画,你可以通过这个键来询问视图或者layer的Pop动画,这就是它的用处。

现在让我们来一次性添加一些不同的动画,每个都动画不同的属性。在我们展示代码之前,这里是它看起来的样子。





这个动画做了四件事情:视图的尺寸拉大,移动到了右边,旋转,并且还改变了背景色。这是我们添加的四个分开的动画,并且有四个分开的动画对象,每个表示一个不同的动画。

POPSpringAnimation *scale =
    [POPSpringAnimation animationWithPropertyNamed:kPOPViewScaleXY];
scale.toValue = [NSValue valueWithCGPoint:CGPointMake(1.5, 1.5)];
scale.springBounciness = 15;
scale.springSpeed = 5.0f;
[orangeSquare pop_addAnimation:scale forKey:@"scale"];

POPSpringAnimation *move =
    [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX];
move.toValue = @(500);
move.springBounciness = 15;
move.springSpeed = 5.0f;
[orangeSquare.layer pop_addAnimation:move forKey:@"position"];

POPSpringAnimation *spin =
    [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation];
spin.toValue = @(M_PI*4);
spin.springBounciness = 15;
spin.springSpeed = 5.0f;
[orangeSquare.layer pop_addAnimation:spin forKey:@"spin"];

POPSpringAnimation *color =
    [POPSpringAnimation animationWithPropertyNamed:kPOPViewBackgroundColor];
color.toValue = [UIColor greenColor];
color.springBounciness = 15;
color.springSpeed = 5.0f;
[orangeSquare pop_addAnimation:color forKey:@"colorChange"];

我们使用了操作下面这些属性的动画:kPOPViewScaleXY、kPOPLayerPositionX、kPOPLayerRotation、kPOPViewBackgroundColor。两个动画时关于视图的,两个动画时关于layer的。

如果你观察一下我们设置为最终值的toValue变量,就可以看到一些不同的设置方法。如我之前所说,Pop一个有趣的(也有点烦人的?)方面在于Pop期望toValue改变的值取决于你要动画的属性。对于拉伸来说,我们已经说过了它想要一个NSValue对象。对于X位置动画,我们可以直接使用Objective-C的快捷方式@(500)来简单地给对象带来500.对于旋转,我们同样使用了特殊的@()语法。对于颜色我们设定了一个UIColor对象。所以你可以看到,因为Pop支撑了太多的动画属性,就有一些需要被理解的细微差别。我曾经混淆了NSValue包装的CGPoint`,并且盯着我的代码看了30秒才意识到它想要一些不同的值。

是时候用Pop来构建一些酷的东西了。



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

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

时间: 2024-10-10 17:28:06

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

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

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

构建一个动画的汉堡按钮 汉堡按钮和滑出式菜单可能是整个产业中最两极分化的界面元素.苹果的狂热支持者反对汉堡按钮和相应的滑出式菜单,说设计师(以及工程师.产品经理和CEO们)喜欢在那堆积尽可能多的东西,因为你有了很多垂直地空间. 我不能说我不认同,因为用户测试表明用户其实不太使用滑出式菜单,但可能我是一个伪君子,因为我还是在我的iPhone app Interesting中使用了一个汉堡按钮,这样看来我也是一个问题!不论如何,如果你打算使用一个汉堡按钮,你也要让它有趣.讨喜来让人们点击. 所以一个