《Motion Design for iOS》(二十四)

我大部分展示的比例变更动画,但这不意味着你不能动画layer的更多属性!这里就是使用JNWSpringAnimation来使用弹簧动作旋转一个layer的示例。

JNWSpringAnimation *scale =
    [JNWSpringAnimation animationWithKeyPath:@"transform.rotation"];
scale.damping = 10;
scale.stiffness = 100;
scale.mass = 3;

scale.fromValue = @(0);
scale.toValue = @(M_PI_2);

[redBall.layer addAnimation:scale forKey:scale.keyPath];
redBall.transform = CGAffineTransformMakeRotation(M_PI_2);

由于这是一个旋转动画,开始和结束值是由弧度定义的角度。我们使用便利的函数CGAffineTransformMakeRotation()来设置模型层的最终值为2π。





接下来我们要设置弹簧的阻尼和刚度为如之前展示的3个层示例一般会导致指数衰减类型动作的类似值。我们会动画其位置,而不是layer的比例。

JNWSpringAnimation *scale = [JNWSpringAnimation
    animationWithKeyPath:@"transform.translation.x"];
scale.damping = 7;
scale.stiffness = 7;
scale.mass = 1;

scale.fromValue = @(0);
scale.toValue = @(400);

[redBall.layer addAnimation:scale forKey:scale.keyPath];
redBall.transform = CGAffineTransformMakeTranslation(400, 0);

我们要动画的位置关键路径为“transform.translation.x”,是从左到右的位置——x坐标。我们会将其向右移动400个像素,所以toValue是400,要设置最终值并保持球在我们动画的地方,我们需要设置球的transform到CGAffineTransformMakeTranslation(400, 0)。这个函数是一个改变视图的变化矩阵的平移组件的简单方式,它接收两个参数,x和y的变化。





当然,我们可以一次性动画很多属性。这里是一个同时动画比例和旋转的代码。看你能不能发现与单个属性动画的区别。

JNWSpringAnimation *scale = [JNWSpringAnimation
    animationWithKeyPath:@"transform.scale"];
scale.damping = 9;
scale.stiffness = 9;
scale.mass = 1;
scale.fromValue = @(1);
scale.toValue = @(4.0);

[redBall.layer addAnimation:scale forKey:scale.keyPath];
redBall.transform = CGAffineTransformScale(redBall.transform, 4.0, 4.0);

JNWSpringAnimation *rotate = [JNWSpringAnimation
    animationWithKeyPath:@"transform.rotation"];
rotate.damping = 9;
rotate.stiffness = 9;
rotate.mass = 1;
rotate.fromValue = @(0);
rotate.toValue = @(M_PI);

[redBall.layer addAnimation:rotate forKey:rotate.keyPath];
redBall.transform = CGAffineTransformRotate(redBall.transform, M_PI);

第一个动画是一个比例变化,从1.0到4.0变成四倍大小。与之前的例子的代码相比第一个不同是当我们在添加动画后设置模型层的实际变化值时(所以它才能保持最终值。)不是使用CGAffineTransformMakeScale()函数来进入新的比例,而是使用了名称相似容易混淆的CGAffineTransformScale()函数并接收了三个参数。CGAffineTransformMakeScale()(包含make在其中)假设你想改变到的变化矩阵是常规、默认、未触摸的恒等变换的变化矩阵,其刚刚创建了此时的视图。

另一方面接收三个参数的CGAffineTransformScale(),第一个参数是你想要改变的起始的变化矩阵。这可以是恒等变化或者一个已经有了一些操作的变形,比如已经被旋转了、伸缩了、平移了等等。我们使用这个函数并且将视图当前的变形作为第一个参数的原因是我们正在添加两个动画到其中并且它们都会操作layer的变形矩阵。如果我们使用CGAffineTransformMakeScale(),就会影响所有的第二个动画的变形调整,使用开始的恒等变换,而不是最近更新的第二次动画设置的layer变形。通过引入当前的变形值,我们可以确保对我们的操作使用最近的值,而这就会包含第二个动画的最终值。

第二个动画会旋转我们的对象π的角度。让我们看看包含比例和旋转变形的动画看起来什么样。





很酷对吧,我们不需要对每个动画设置同样的时间曲线;因为这是两个单独的动画对象,我们可以单独地控制每个弹簧的属性。这里是一个比例和旋转动画的例子,其比例弹簧使用了一个指数衰减类型的弹簧动作(没有弹性),而旋转动画动作非常有弹性。





这里是另一个同时添加两个动画的例子。这次它组合了一个位置(平移)动画和一个比例变形。





我不知道你如何,但我对于仅仅动画这些色块已经有点无聊了。我认为是时候进入一些使用JNWSpringAnimation来实现弹簧动作动画的真实世界、真实app的例子了。



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

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

时间: 2024-11-06 20:29:08

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

《Motion Design for iOS》(四十二)

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

《Motion Design for iOS》(四十六(最终章))

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

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

让我们看一些简单的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]; P

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

《Motion Design for iOS》(四十三)

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

iOS安全攻防(二十四):敏感逻辑的保护方案(1)

iOS安全攻防(二十四):敏感逻辑的保护方案(1) Objective-C代码容易被hook,暴露信息太赤裸裸,为了安全,改用C来写吧! 当然不是全部代码都要C来写,我指的是敏感业务逻辑代码. 本文就介绍一种低学习成本的,简易的,Objective-C逻辑代码重写为C代码的办法. 也许,程序中存在一个类似这样的类: @interface XXUtil : NSObject + (BOOL)isVerified; + (BOOL)isNeedSomething; + (void)resetPass

Android学习路线(二十四)ActionBar Fragment运用最佳实践

通过前面的几篇博客,大家看到了Google是如何解释action bar和fragment以及推荐的用法.俗话说没有demo的博客不是好博客,下面我会介绍一下action bar和fragment在实战中的应用,以及相关demo源码,希望和大家相互交流. 了解过fragment的同学们应该都知道,fragment是android 3.0版本才出现的的,因此如果要在支持android 3.0一下版本的工程中使用fragment的话是需要添加Support Library的.具体如何添加我就不再赘述

从零开始学android<android事件的处理方式.二十四.>

在android中一共有 多种事件,每种事件都有自己相对应的处理机制 如以下几种 1 单击事件 View.OnClickListener public abstract void onClick (View v) 单击组件时触发 2 单击事件 View.OnLongClickListener public abstract boolean onLongClick (View v) 长按组件时触发 3 键盘事件 View.OnKeyListener public abstract boolean