iOS动画——ViewAnimations
又给自己挖了一个坑,我很喜欢动画不错,但是写出来又是另外一个问题了~~~
这一篇我们来说说UIKit中的动画API,期中包括:
- UIView.UIView.animateWithDuration
- UIView.transitionWithView
- UIView.animateKeyframesWithDuration
- UIView.addKeyframeWithRelativeStartTime
今天的故事就将围绕这些API展开,阐述他的前世今生。
- UIView.addKeyframeWithRelativeStartTime
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 = 0self.animationView3.alpha = 0UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void inself.animationView.center.y += 100}) { (Bool) -> Void inprintln("finish")}UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void inself.animationView2.alpha = 1}) { (Bool) -> Void inprintln("finish")}UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void inself.animationView3.center.y -= 100self.animationView3.alpha = 1}) { (Bool) -> Void inprintln("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.centerUIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: .Repeat, animations: {//add keyframesUIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {self.planeImage.center.x += 80.0self.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.0self.planeImage.center.y -= 50.0self.planeImage.alpha = 0.0}UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.01) {self.planeImage.transform = CGAffineTransformIdentityself.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)}UIView.addKeyframeWithRelativeStartTime(0.55, relativeDuration: 0.45) {self.planeImage.alpha = 1.0self.planeImage.center = originalCenter}}, completion:nil)
完整的代码在最后提供的源代码中有。
事实告诉我们动画是要靠设计的,你看我上面的动画抽的一笔,但事实上用同样的代码可以写出很漂亮的动画。
代码已上传Github:https://github.com/superxlx/iOS_Animation_Test1
iOS动画——ViewAnimations相关推荐
- iOS动画系列之八:使用CAShapeLayer绘画动态流量图
这篇文章通过使用CAShapeLayer和UIBezierPath来画出一个动态显示剩余流量的小动画. 最终实现的效果如下: Paste_Image.png 动态效果图: shapeLayerAni. ...
- iOS动画系列之九:实现点赞的动画及播放起伏指示器
iOS动画系列,共十篇.现在写到第九篇啦.感兴趣的可以通过下面的传输门进到其他几篇文章里面. 第一篇:iOS动画系列之一:通过实战学习CALayer和透视的原理.做一个带时分秒指针的时钟动画(上) 第 ...
- iOS动画详解(学习动画看这一篇就够了)
2019独角兽企业重金招聘Python工程师标准>>> 原文出处:wu大维 动效设计一直是iOS平台的优势,良好的动效设计可以很好地提升用户体验.而动画则是动效的基础支撑.本动画将从 ...
- iOS动画开发之五——炫酷的粒子效果
iOS动画开发之五--炫酷的粒子效果 在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一 ...
- iOS动画系列之五:基础动画之缩放篇旋转篇Swift+OC
这一篇主要介绍基础动画之缩放和旋转.这些基本操作分享完之后,我想想可以找个稍微复杂一点点的动画做做啦. 这篇继续基础篇,分享一下缩放和旋转.因为整体思路和平移基本上没有变化,加上源代码里面也有OC版本 ...
- iOS 动画基础总结篇
iOS 动画基础总结篇 动画的大体分类(个人总结可能有误) 分类.png UIView 动画 属性动画 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- ios 动画设计_动画和讲故事在设计中的力量
ios 动画设计 As human beings, we've always been fond of storytelling. Just think of campfire stories, Sa ...
- iOS动画系列之四:基础动画之平移篇
就像咱们之前说的,所有的动画都是在CALayer上面的.所以在做动画之前我们就要先建立一个CALayer,然后把动画作用在自己创建的这个CALayer上.如果不知道CALyer是啥,可以看看前面的分享 ...
- iOS动画专题·UIView二维形变动画与CAAnimation核心动画
点击上方"iOS开发",选择"置顶公众号" 关键时刻,第一时间送达! 1. iOS动画 总的来说,从涉及类的形式来看,iOS动画有:基于UIView的仿射形变动 ...
最新文章
- sublime运行错误
- flask的日志输出current_app.logger.debug
- Win Api 有名管道通信--扫雷辅助(四)
- 对象与内存控制1---实例变量和类变量
- 云小课 | 需求任务还未分解,该咋整!项目管理Scrum项目工作分解的心酸谁能知?
- mysql 程序崩溃无法启动_mysql数据库崩溃,无法启动
- PhpSpreadsheet如何读取excel文件
- 求二叉树中某结点的父结点(左右孩子表示法)
- AFA人工鱼群算法函数优化求解实例C++(2020.11.4)
- 小爱同学app安卓版_小爱同学app下载安卓版-小爱同学 安卓版v2.9.50-PC6安卓网
- MFC的消息处理模式
- 嵌入式系统开发与应用——Linux系统Socket网络编程
- 翻炒《天龙八部》[转]
- 人脸识别测温一体机,如何成为公共场所防疫的第一道防线?
- 计算机桌面设置,电脑入门(十一)桌面个性化设置
- Spring之声明式事务控制(九)
- 小胡时隔两年的第二篇Blog
- 【计算机导论调研报告】计算机从业人员的职业道德
- 方法重写的两同两小一大原则
- 2018年8月win10教育版education最新激活密钥