02-iOS核心动画-第一课——ViewAnimations

又给自己挖了一个坑,我很喜欢动画不错,但是写出来又是另外一个问题了~~~

这一篇我们来说说UIKit中的动画API,其中包括:

  • UIView.UIView.animateWithDuration
  • UIView.transitionWithView
  • UIView.animateKeyframesWithDuration
    • UIView.addKeyframeWithRelativeStartTime

今天的故事就将围绕这些API展开,阐述他的前世今生。

UIKit动画API使用起来十分简单与方便,他避免了Core Animation的复杂性,虽然事实上UIKit动画API的底层使用的也是Core Animation。

来看第一个,UIView.UIView.animateWithDuration

先来看一下函数原型:

class func animateWithDuration(duration: NSTimeInterval, delay: NSTimeInterval, usingSpringWithDamping dampingRatio: CGFloat, initialSpringVelocity velocity: CGFloat, options: UIViewAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)

一共七个参数:

  • duration
    • 表示动画执行时间。
  • delay
    • 动画延迟时间。
  • usingSpringWithDamping
    • 表示弹性属性。
  • initialSpringVelocity
    • 初速度。
  • options
    • 可选项,一些可选的动画效果,包括重复等。
  • animations
    • 表示执行的动画内容,包括透明度的渐变,移动,缩放。
  • completion
    • 表示执行完动画后执行的内容。

关于这些参数,选一个列子,尝试不同的参数,这样可以更好的理解每个参数的意义。

好丑的动画

self.animationView2.alpha = 0

self.animationView3.alpha = 0

UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void in

self.animationView.center.y += 100

}) { (Bool) -> Void in

println("finish")

}

UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void in

self.animationView2.alpha = 1

}) { (Bool) -> Void in

println("finish")

}

UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void in

self.animationView3.center.y -= 100

self.animationView3.alpha = 1

}) { (Bool) -> Void in

println("finish")

}

代码就不逐行解释,三个UIView.animateWithDuration分别操作三个方块。第一个方块是一个移动动画,第二个方块是一个透明度渐变动画,第三个方块是移动加透明度渐变的组合动画,可能看的不是很清楚。不得不说这个动画真的很丑~~~

UIView.UIView.animateWithDuration这个API说穿了就是逐渐改变UIView的某项属性,这些属性包括:位置,大小,透明度,颜色等等。

再来看一下UIView.transitionWithView,这是一个过度动画,主要用于UIView进入或者离开视图。

先看一下这一个动画效果吧:

其中banner右移消失的动画用的就是上面提到的UIView.UIView.animateWithDuration,而进入的动画用的就是现在要讲的UIView.transitionWithView。很像一页书页翻下来的感觉哈。

我们来看一下函数原型

class func transitionWithView(view: UIView, duration: NSTimeInterval, options: UIViewAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)

一共五个参数:

  • view
    • 这当然就是指定要进行动画的对象了。
  • duration
    • 和上面一样这个参数指定动画时间长短。
  • options
    • 这是一个可选参数,虽然是可选的但是不填这个API就没意义了,因为UIView如何进入视图就是由这个参数决定。到底是像书页一样翻进去,还是像百叶窗一样转动就是由这个参数决定,具体有哪些可以选择,点进去看看就知道了。
  • animations
    • 这个选项你可以将它理解为在动画结束后UIView的形态。
  • completion
    • 动画结束后运行的代码。

代码大概长这样

UIView.transitionWithView(status, duration: 0.33, options:

.CurveEaseOut | .TransitionCurlDown, animations: {

self.yourView.hidden = false

}, completion:nil

})

这一部分代码已上传Github,Github地址在文章的最后面。

我相信看看源代码,大家都能明白的。

这里再给大家看一个动画,也是用前面提到过的函数写的:

尼玛~这显示效果太差了吧,不知道你们那里看到的是什么样的

仿3D效果,代码也在上传的那个Demo中,大家自己看啦~

到最后一个函数啦啦,UIView.animateKeyframesWithDuration,先来看一下动画效果吧。

小飞机~飞啊飞~

我 们很容易就可以发现,这个动画分了很多阶段完成,我们当然可以用我们提到的第一个函数 UIView.UIView.animateWithDuration来完成,但是,你不觉得嵌套加嵌套显得很不好看吗,我们当然还有更好的方法来实现, 就是我们现在要说的,先来看一下函数原型:

class func animateKeyframesWithDuration(duration: NSTimeInterval, delay: NSTimeInterval, options: UIViewKeyframeAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)

一共五个参数:

  • duration:整个动画过程的时间。
  • delay:延迟多久开始。
  • options:可选项,比如说重复,倒着来一遍等效果,自己都试试看吧。
  • animations:需要执行的动画,里面可以是多个UIView.addKeyframeWithRelativeStartTime。
    • 至于这个UIView.addKeyframeWithRelativeStartTime方法,类似于我们提到的第一个UIView.UIView.animateWithDuration,也是一个属性渐变的方法,不过这个方法只能写在他的爸爸UIView.addKeyframeWithRelativeStartTime的animation参数函数块中。
  • completion:动画执行结束之后执行的代码。

来看一下我们实现这个小飞机~飞啊飞~~的代码:

let originalCenter = planeImage.center

UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: .Repeat, animations: {

//add keyframes

UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {

self.planeImage.center.x += 80.0

self.planeImage.center.y -= 10.0

})

UIView.addKeyframeWithRelativeStartTime(0.1, relativeDuration: 0.4) {

self.planeImage.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4/2))

}

UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25) {

self.planeImage.center.x += 100.0

self.planeImage.center.y -= 50.0

self.planeImage.alpha = 0.0

}

UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.01) {

self.planeImage.transform = CGAffineTransformIdentity

self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)

}

UIView.addKeyframeWithRelativeStartTime(0.55, relativeDuration: 0.45) {

self.planeImage.alpha = 1.0

self.planeImage.center = originalCenter

}

}, completion:nil)

完整的代码在最后提供的源代码中有。

事实告诉我们动画是要靠设计的,你看我上面的动画抽的一笔,但事实上用同样的代码可以写出很漂亮的动画。

代码已上传Github:https://github.com/superxlx/iOS_Animation_Test1

时间: 2024-10-12 15:27:10

02-iOS核心动画-第一课——ViewAnimations的相关文章

iOS核心动画

iOS开发系列--让你的应用“动”起来 --iOS核心动画 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看到动画操作在iOS中是如何简单和高效,很多原来想做但是苦于没有思路的动画在iOS中将变得越发简单: CALayer CALayer简介 CAL

IOS 动画专题 --iOS核心动画

iOS开发系列--让你的应用“动”起来 --iOS核心动画 概览 通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看到动画操作在iOS中是如何简单和高效,很多原来想做但是苦于没有思路的动画在iOS中将变得越发简单: CALayer CALayer简介 CALayer常用属性 CALayer绘图 Core Animation 基础动画 关键帧动画 动画组 转场动画 逐帧动画 UIView动画封装目 录 基础动画 关

iOS核心动画中的常用类型

CATransaction 当我们在自定义的图层上修改某些支持动画的属性时,系统会为该属性的修改自动产生动画.这种其实属于隐式动画.隐式动画要得益于CATransaction. 一个CATransaction从调用CATransaction.begin()开始,以CATransaction.commit()结束.在这其间对图层属性的修改,会受该Transaction的控制,可以通过setAnimationDuration修改Transaction的duration. 系统的隐式动画是因为在Run

iOS核心动画学习整理

最近利用业余时间终于把iOS核心动画高级技巧(https://zsisme.gitbooks.io/ios-/content/chapter1/the-layer-tree.html)看完,对应其中一些知识做了相应的整理,整理为demo(https://github.com/PurpleSweetPotatoes/Layer_learn).此demo中都是基于教程书籍中的编程示例,并加上了注解以方便各位iOS爱好者学习使用. 在这里利用此教程中的基础知识做了2个小demo,活动指示器效果和火焰效

iOS核心动画高级技巧之核心动画(三)

iOS核心动画高级技巧之CALayer(一) iOS核心动画高级技巧之图层变换和专用图层(二)iOS核心动画高级技巧之核心动画(三)iOS核心动画高级技巧之性能(四)iOS核心动画高级技巧之动画总结(五) 隐式动画 隐式动画主要作用于CALayer的可动画属性上面,UIView对应的layer是不可以的,只要你改变属性的值,它不是突兀的直接改变过去,而是一个有一个动画的过程,这个时间等属性你可以通过事务(CATransaction)来控制,如果你不自己提供一个事务,它的默认时间是0.25秒,当然

iOS核心动画工作笔记

1.图层和UIVIew的区别:图层不能和用户进行交互,图层性能高 2.imageVIew的图片显示是在图层上面的子层.用maskBounds剪切时剪的是图层,用户看不到是因为子层挡住了 3.CAlayer的代理方法没有协议,任何对象都能成为他的代理,即NSObject的方法 4.UIVIew内部的根图层的代理就是View本身,所以在UIVIew中的drawRect方法绘图.一个view不能设置代理.因为已经是它图层的代理 5.Core Animation直接作用于CALayer,缺点是动画后图片

IOS 核心动画之CAKeyframeAnimation

- IOS 核心动画之CAKeyframeAnimation - 简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值 - 属性解析: - values:就是上述的NSArray对象.里面的元素称为”关键帧”(keyframe).动画对象会在指定的时间(duration)

IOS 核心动画之CAKeyframeAnimation - iBaby

- IOS 核心动画之CAKeyframeAnimation - 简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值 - 属性解析: - values:就是上述的NSArray对象.里面的元素称为"关键帧"(keyframe).动画对象会在指定的时间(dura

iOS核心动画高级技巧 - 8

iOS核心动画高级技巧 - 1 iOS核心动画高级技巧 - 2 iOS核心动画高级技巧 - 3 iOS核心动画高级技巧 - 4 iOS核心动画高级技巧 - 5 iOS核心动画高级技巧 - 6 iOS核心动画高级技巧 - 7 15. 图层性能 图层性能 要更快性能,也要做对正确的事情. ——Stephen R. Covey 在第14章『图像IO』讨论如何高效地载入和显示图像,通过视图来避免可能引起动画帧率下降的性能问题.在最后一章,我们将着重图层树本身,以发掘最好的性能. 15.1 隐式绘制 隐式