讲一下动画。将分为以下5篇博客。

一)UIView动画

二)Layer动画

三)3D动画

四)转场动画

五)第三方动画框架

相关代码:https://github.com/dolacmeng/AnimationDemo

参考资料:iOS Animations by Tutorials

一)UIView动画

一、UIKit之UIView动画

UIKit给我们封装了动画函数,即UIView动画,使用起来非常方便:

[UIView animateWithDuration:2.0 animations:^{CGPoint point = CGPointMake(viewA.center.x+self.view.bounds.size.width, viewA.center.y);viewA.center = point;//viewA移动到屏幕point的位置
}];

这个方法只需要2个参数,animateWithDuration:动画持续时间 , animations:动画block。 第一个参数显而易见,现在介绍下animations参数:

1、改变位置和大小

我们可以在animations block中设置view的位置和大小属性来实现放大、缩小、移动等动画效果,即可以设置下面这些属性:

(1).bounds:改变view中的内容

(2).frame:移动view或改变view大小

(3).center:移动view

[UIView animateWithDuration:2.0 animations:^{viewB.frame = CGRectMake(self.view.bounds.size.width, viewB.frame.origin.y+100, 2, 2);//向x轴正方向移动100个单位}];

2、改变外观

可以以渐变动画的方式改变view的背景色、透明度:

(1).backgroundColor:通过改变这个属性实现背景色渐变效果

(2).alpha:通过这个属性来实现渐显和淡出的效果

[UIView animateWithDuration:5.0 animations:^{view.backgroundColor = [UIColor purpleColor];//颜色渐变为紫色view.alpha = 0.0;//逐渐变为透明
}];

二、为了达到更多效果,UIKit提供了另一个方法:

[UIView animateWithDuration:2.0 delay:1.0 options:0 animations:^{CGPoint point = CGPointMake(view.center.x+self.view.bounds.size.width, view.center.y);view.center = point;
} completion:nil];

这个方法和上面第一个方法类似,只是多了几个用来设置动画的参数:

duration:动画持续时间

delay:动画开始前延时时间

options:动画效果集合,后面会讲到,现在先传0,即表示不需要动画效果

animation:要执行的动画block

completion:动画结束后会执行的block,一般用来处理动画结束后的清理工作或者执行下一个动画

三、Transform动画。

在animations block中,除了设置前面所说的几个UIView属性,还能通过设置UIView的transform属性,达到移动、缩放、旋转等2D变化效果。

[UIView animateWithDuration:2 animations:^{view.transform = CGAffineTransformMakeRotation(M_PI_4);//顺时针旋转90度
} completion:^(BOOL finished) {[self execute:^{view.transform = CGAffineTransformIdentity;//还原} after:1.0];
}];

使用UIView的transform属性,可以达到移动、缩放、旋转等2D变化效果:

CGAffineTransformMakeTranslation (CGFloat tx,CGFloat ty):平移(在x轴上平移的数值,在y轴上平移的数值)

CGAffineTransformMakeScale (CGFloat sx,CGFloat sy):缩放(在x轴上的缩放比例,在y轴上的缩放比例)

CGAffineTransformMakeRotation(CGFloat angle);旋转(旋转的角度)

CGAffineTransformTranslate(CGAffineTransform t,CGFloat tx,CGFloat ty):平移(已存在的变换,在x轴上平移的数值,在y轴上平移的数值)

CGAffineTransformScale(CGAffineTransform t,CGFloat sx,CGFloat sy):缩放(已存在的变换,在x轴上的缩放比例,在y轴上的缩放比例)

CGAffineTransformRotate(CGAffineTransform t,CGFloat angle);旋转(已存在的变换,旋转的角度)

注意到每种变换都有两个类似的函数,如

(1) CGAffineTransformMakeTranslation(CGFloat tx,CGFloat ty)

(2) CGAffineTransformTranslate(CGAffineTransform t,CGFloat tx, CGFloat ty)

方法1中,每次变换是从view的初始状态开始

方法2中,每次变换都是以上一次的状态(CGAffineTransform t)进行的变化,因此可以多次连续变化

四、关于前面提到的options参数

options让你可以设置更多效果。下面是UIViewAnimationOptions中定义的options的集合,可以通过不同的结合而实现不同的动画效果。

1、重复Repeating

首先看下面两个options

(1)UIViewAnimationOptionRepeat:动画无限重复执行

(2)UIViewAnimationOptionAutoreverse:这个选项要和UIViewAnimationOptionRepeat一起使用,让动画先顺着执行,然后再逆着返回

[UIView animateWithDuration:1.5 delay:0.5 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse|UIViewAnimationOptionCurveLinear animations:^{
CGPoint point = CGPointMake(self.view.bounds.size.width-50, view.center.y);
view.center = point;
} completion:nil];

2、速度渐变

生活中的物体,例如汽车和火车,是通过加速来达到匀速行使速度的;通过减速最终才能停下来(除非直接撞墙了...)。为了使动画看起来更真实,我们将以上效果添加到view中。

苹果提供了4种效果供我们选择:

(1)UIViewAnimationOptionCurveEaseInOut:默认值,在动画开始时有加速效果,在结束时有减速效果

(2)UIViewAnimationOptionCurveEaseIn :在动画开始时有加速效果

(3)UIViewAnimationOptionCurveEaseOut:在动画结束时有减速效果

(4)UIViewAnimationOptionCurveLinear :线性运行,没有加速和减速效果

[UIView animateWithDuration:1.5 delay:0.5 options:UIViewAnimationOptionCurveEaseIn animations:^{CGPoint point = CGPointMake(self.view.bounds.size.width, view0.center.y);view0.center = point;
} completion:nil];[UIView animateWithDuration:1.5 delay:0.5 options:UIViewAnimationOptionCurveEaseOut animations:^{CGPoint point = CGPointMake(self.view.bounds.size.width, view1.center.y);view1.center = point;
} completion:nil];[UIView animateWithDuration:1.5 delay:0.5 options:UIViewAnimationOptionCurveLinear animations:^{CGPoint point = CGPointMake(self.view.bounds.size.width, view2.center.y);view2.center = point;
} completion:nil];

3、全部可选效果如下:

UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。
UIViewAnimationOptionAllowUserInteraction //动画过程中允许用户交互,比如响应触摸
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //动画无限重复
UIViewAnimationOptionAutoreverse //执行动画回路,要与UIViewAnimationOptionRepeat一起使用
UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间
UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线
UIViewAnimationOptionAllowAnimatedContent //动画过程中重绘视图(仅适用于转场动画)
UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果
UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项
//时间函数曲线相关
UIViewAnimationOptionCurveEaseInOut //时间曲线函数,由慢到快
UIViewAnimationOptionCurveEaseIn //时间曲线函数,由慢到特别快
UIViewAnimationOptionCurveEaseOut //时间曲线函数,由快到慢
UIViewAnimationOptionCurveLinear //时间曲线函数,匀速
//转场动画效果(后面会讲到)
UIViewAnimationOptionTransitionNone //无转场动画
UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转
UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转
UIViewAnimationOptionTransitionCurlUp //上卷转场
UIViewAnimationOptionTransitionCurlDown //下卷转场
UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失
UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转
UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转

五、弹簧动画效果

通过上面的代码,可以轻易实现将view从点A移动到点B,现在我们创建稍复杂一点的动画:移动view时添加弹簧效果,就像view被系上了一根弹簧。

[UIView animateWithDuration:2.0 delay:1.0 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:0 animations:^{CGPoint point = CGPointMake(250, view.center.y);view.center = point;view.alpha = 1.0;} completion:nil];

用的方法和前面的方法类似,只是多了两个参数:

(1)usingSpringWithDamping :设置阻尼,取值范围是0.0-1.0,简单来说取值越接近于0,弹簧越有弹性,越接近与1,越僵硬。

(2)initialSpringVelocity:设置初始速度

六、Transitions变换

前面我们已经知道通过改变view的属性的方法来实现动画,下面将学习通过transitions来给view设置动画。

Transitions是已经预先定义好的动画,而不是像前面那样,通过设置view的结束状态,让系统在开始和结束状态间插入动画效果。

例子1:添加view

使用transitions使得容器view添加子view时带有动画效果。

[UIView transitionWithView:animationContainerViewduration:2.0options:UIViewAnimationOptionTransitionFlipFromLeft|UIViewAnimationOptionCurveEaseOutanimations:^{ [animationContainerView addSubview:viewA]; }completion:^(BOOL finished) {[self transitionRemove];}];

上面函数使用了一个前面提到的新的option:UIViewAnimationOptionTransitionFlipFromLeft,这就是我们说的已经定义好的动画效果,下面是所有定于好的动画效果列表:

    UIViewAnimationOptionTransitionFlipFromLeftUIViewAnimationOptionTransitionFlipFromRightUIViewAnimationOptionTransitionCurlUpUIViewAnimationOptionTransitionCurlDownUIViewAnimationOptionTransitionCrossDissolveUIViewAnimationOptionTransitionFlipFromTopUIViewAnimationOptionTransitionFlipFromBottom

关于transitions,可以看我之前共享的一个动画气泡控件,就不在这里累赘了:http://blog.csdn.net/dolacmeng/article/details/52094808

七、Keyframe动画

有时候,我们想要给view设置连续的动画,通过前面的学习,我们知道可以用completion block来实现连续的动画。虽然这样可以连接多个简单动画,但是代码看起来会混乱和复杂。例如飞机起飞的动画:

我们可以使用关键帧动画实现飞机首先在跑道上加速、开始向上提升、以更快的速度加速提升、最后飞出屏幕,消失在云中。

 [UIView animateKeyframesWithDuration:1.5 delay:2.0 options:0 animations:^{//这里的开始时间和动画时间参数取值为0-1.0,是总时间(1.5s)的百分比[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.25 animations:^{CGPoint center = planeImage.center;center.x += 80.0;center.y -= 10.0;planeImage.center = center;}];[UIView addKeyframeWithRelativeStartTime:0.1 relativeDuration:0.4 animations:^{planeImage.transform = CGAffineTransformMakeRotation(-M_PI_4/2);}];[UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.25 animations:^{CGPoint center = planeImage.center;center.x += 100.0;center.y -= 50.0;planeImage.center = center;planeImage.alpha = 0.0;}];[UIView addKeyframeWithRelativeStartTime:0.51 relativeDuration:0.01 animations:^{planeImage.transform = CGAffineTransformIdentity;planeImage.center = CGPointMake(0.0, originalCenter.y);}];[UIView addKeyframeWithRelativeStartTime:0.55 relativeDuration:0.45 animations:^{planeImage.alpha = 1.0;planeImage.center = originalCenter;}];} completion:nil];

下一节UILayer动画

【动画1】UIView动画相关推荐

  1. iOS 动画总结----UIView动画

    1.概述 UIKit直接将动画集成到UIView类中,实现简单动画的创建过程.UIView类定义了几个内在支持动画的属性声明,当这些属性发生改变时,视图为其变化过程提供内建的动画支持. 执行动画所需要 ...

  2. iOS动画:UIView动画和CALayer动画(CABasicAnimation、CAKeyframeAnimation的使用)

    iOS中的动画有两种实现方式,一种是UIView来实现动画,另一种动画是通过CALayer来实现,下面介绍两种动画的简单实现: 一.UIView动画的实现 UIView使用Context来实现动画 关 ...

  3. ios uiview动画_iOS UIView动画

    ios uiview动画 In this tutorial, we'll be animating our UI Views in various ways in the iOS Applicatio ...

  4. iOS核心动画以及UIView动画的介绍

    我们看到很多App带有绚丽狂拽的特效,别出心裁的控件设计,很大程度上提高了用户体验,在增加了实用性的同时,也赋予了app无限的生命力.这些华丽的效果很多都是基于iOS的核心动画原理实现的,本文介绍一些 ...

  5. iOS之UIview动画

    一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画支持 执行动画所需要的工作由UIView类自动完成, ...

  6. 核心动画与UIView的区别

    核心动画与UIView的区别 1.核心动画只作用于layer,使用核心动画之前,必须有layer 2.核心动画只是假象,并没有移动实际位置 什么时候使用核心动画,什么时候使用UIView动画 1.当不 ...

  7. 核心动画与UIView

    UIView与核心动画区别?(掌握) 1.核心动画只作用在layer.2.核心动画看到的都是假像,它并没有去修改UIView的真实位置.什么时候使用核心动画?1.当不需要与用户进行交互,使用核心动画2 ...

  8. UI一揽子计划 23 (动画的使用场景、UIView动画、CGAffineTransform2D仿射变换、CALayer、CAAnimation、)

    在iOS 中的动画是指一些视图上的过渡效果,合理利用动画能提高用户体验. 一. UIView动画 1). UIView动画块的使用 ([UIView beginAnimations: nil cont ...

  9. (0034) iOS 开发之UIView动画(过渡效果)

    UIView视图的动画功能,可以使在更新或切换视图时有放缓节奏.产生流畅的动画效果,进而改善用户体验.UIView可以产生动画效果的变化包括: 位置变化:在屏幕上移动视图. 大小变化:改变视图框架(f ...

最新文章

  1. SVD(奇异值分解)+NMF(非负矩阵分解)
  2. idea本地跑如何看gc日志_不可思议,竟然还有人不会查看GC垃圾回收日志?
  3. 基于adaboost的人脸检测方法
  4. 确定组织是否真正敏捷的五种方法
  5. 【C/C++语法外功】C/C++头文件一览[轉]
  6. 计算机硬件专业知识西瓜视频,2019年中电脑硬件榜单,空调西瓜+电脑助你当个快乐肥宅...
  7. Mac使用minicom串口工具
  8. Ubuntu下安装LAMP及phpmyadmin
  9. linux 字符设备和块设备的区别
  10. msys2 pacman 安装 删除等常见命令汇总
  11. 图神经网络的实现,神经网络框架图
  12. 实验四:AC与AP间VLAN配置实验
  13. Vue2-Vue3.0学习笔记(2021年黑马程序员最新视频)
  14. 嵌入式系统上电,程序的运行过程
  15. 四川交通职业技术学院计算机二级,明天考计算机了。
  16. 004.前端面试排雷之唱、跳、rap三步曲(一)唱篇
  17. 改变文字颜色html,html怎么改变字体大小和颜色
  18. 微信、网站、APP相关分享
  19. zcu102网口不通
  20. 针对于“上传文件”和“触发方式” 的解决方案(Antd个例)

热门文章

  1. poj2154-color-polyan次二面体+欧拉函数优化
  2. JavaScript arguments对象
  3. Traveller项目介绍
  4. javascript重置(base层)(。。。。不完整)
  5. android 按住拖动gallery防止马上加载数据导致gallery卡的方法
  6. php 的webservice类库NuSoap介绍
  7. nginx虚拟目录设置 alias 和 root
  8. 从DataView中生成Excel报表的方案(C#)
  9. 巧用CSS的Light滤镜
  10. C语言的HashTable简单实现