动画在UI交互中是一种增强用户体验的利器,目前看到几乎每一个移动App都会使用到各种动画效果。
创新互联建站2013年至今,是专业互联网技术服务公司,拥有项目成都网站设计、成都网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元阳新做网站,已为上家服务,为阳新各地企业和个人服务,联系电话:028-86922220
在IOS开发中实现动画效果通常有三种方式。
可以用来做什么呢:
设置UIView的属性:例如
frame
bounds
center
transform
alpha
backgroundColor
contentStretch
看一下实例:
我们可以看到self.greenView通过UIView Animation动画将某些属性进行了改变。
现在我们适当的加入一些动画执行的方式【options】
在开发中可以添加特定的options满足不同的动画需要。
弹簧效果:
CABasicAnimation 为layer属性提供了基础的帧动画能力,创建一个CABasicAnimation的实例,使用继承自CAPropertyAnimation的animationWithKeyPath:方法,来指定要添加动画的layer属性的keypath
让一个view向左平移,在x方向上从屏幕x中间线型移动到左边消失,耗时1.5秒的动画
KeyPath的改变动画的效果就不一样,开发中改变KeyPath的属性可以实现大多数我们需要的动画执行的效果
用CABasicAnimation执行动画,在动画结束后会回归动画开始前的状态。想要解决的话,必须设置“removedOnCompletion”和“fillMode”这两个属性。
由于在开发过程中光是CABasicAnimation的fromValue、toValue起点和终点设置是无法满足我们希望在动画中途进行更多的变化的需求,所以我们需要认识一下CAKeyframeAnimation
从上面的继承图我们看出CAKeyframeAnimation 比CABasicAnimation多了更多的可设置属性
关键帧动画其实通过一组动画类型的值(或者一个指定的路径)和这些值对应的时间节点以及各时间节点的过渡方式来控制显示的动画。关键帧动画可以通过path属性和values属性来设置动画的关键帧。
可以保存一组动画CAKeyframeAnimation、CABasicAnimation对象,将CAAnimationGroup对象加入图层后,组中所有动画对象可以同时并发运行。
注意:默认情况下,一组动画对象是同时运行的,也可以通过设置单个动画对象的beginTime属性来更改动画的开始时间,单个动画的执行效果可以与动画组执行效果属性分开设定,根据需要调整改变。
CAAnimation:核心动画的基础类,不能直接使用,负责动画运行时间、速度的控制,本身实现了CAMediaTiming协议。
CAPropertyAnimation:属性动画的基类(通过属性进行动画设置,注意是可动画属性),不能直接使用。
CAAnimationGroup:动画组,动画组是一种组合模式设计,可以通过动画组来进行所有动画行为的统一控制,组中所有动画效果可以并发执行。
CATransition:转场动画,主要通过滤镜进行动画效果设置。
CABasicAnimation:基础动画,通过属性修改进行动画参数控制,只有初始状态和结束状态。
CAKeyframeAnimation:关键帧动画,同样是通过属性进行动画参数控制,但是同基础动画不同的是它可以有多个状态控制。
基础动画、关键帧动画都属于属性动画,就是通过修改属性值产生动画效果,开发人员只需要设置初始值和结束值,中间的过程动画(又叫“补间动画”)由系统自动计算产生。和基础动画不同的是关键帧动画可以设置多个属性值,每两个属性中间的补间动画由系统自动完成,因此从这个角度而言基础动画又可以看成是有两个关键帧的关键帧动画。
**注意点** 如果fillMode=kCAFillModeForwards和removedOnComletion=NO,那么在动画执行完毕后,图层会保持显示动画执行后的状态。但在实质上,图层的属性值还是动画执行前的初始值,并没有真正被改变。
在实际项目中很多需求使用UIView动画或者基本动画就可以实现,比如下面比较常用的缩放和弹性动画效果
如果想实现更炫酷一点的动画,如雷达,波纹,咻一咻效果,时钟,带动画的指示器等就需要用到UIBezierPath和CAShapeLayer,CAReplicatorLayer等知识。
下面简单的说一下CAShapeLayer和CAReplicatorLayer
//波纹,咻一咻,雷达效果
//利用UIBezierPath和CAShapeLayer实现不规则的图形,并带有动画效果,可以在折线图中使用
-(void)myTest{
UIView *line=[[UIView alloc] initWithFrame:CGRectMake(0, 100, 400, 1)];
line.backgroundColor=[UIColor grayColor];
[self.view addSubview:line];
}
-(void)clickk:(UITapGestureRecognizer *)tap{
CGPoint point=[tap locationInView:_testView1];
if ([_path containsPoint:point]) {
NSLog(@"点击不规则图形");
}
}
1.CABasicAnimation
通过设定起始点,终点,时间,动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation
2.CAKeyframeAnimation
Keyframe顾名思义就是关键点的frame,你可以通过设定CALayer的始点、中间关键点、终点的frame,时间,动画会沿你设定的轨迹进行移动
3.CAAnimationGroup
Group也就是组合的意思,就是把对这个Layer的所有动画都组合起来。PS:一个layer设定了很多动画,他们都会同时执行,
4.CATransition
这个就是苹果帮开发者封装好的一些动画,
values 指明整个动画过程中的关键帧点
path 与values属性一样,同样是用于指定整个动画所经过的路径的。需要注意的是,values与path是互斥的,当values与path同时指定时,path会覆盖values,即values属性将被忽略。
keyTimes 是一个数组,用以指定每个子路径(AB,BC,CD)的时间。如果你没有显式地对keyTimes进行设置,则系统会默认每条子路径的时间为:ti=duration/(5-1),即每条子路径的duration相等,都为duration的1\4。当然,我们也可以传个数组让物体快慢结合。例如,你可以传入{0.0, 0.1,0.6,0.7,1.0},其中首尾必须分别是0和1,因此tAB=0.1-0, tCB=0.6-0.1, tDC=0.7-0.6, tED=1-0.7.....
timeFunctions 这个属性用以指定时间函数,类似于运动的加速度,有以下几种类型。记住,这是一个数组,你有几个子路径就应该传入几个元素
/** Timing function names. **/
calculationMode 该属性决定了物体在每个子路径下是跳着走还是匀速走,跟timeFunctions属性有点类似
使用CABAsicAnimation来实现动画的放缩和旋转是比较常用的,这篇主要介绍CABasicAnimation实现简单的动画效果
最终的效果图为:
Demo地址
对应的实现文件是SecondViewController
首先,我们先定义一个UIView以及三个button按钮,分别对应平移、放大和旋转
在.h文件中定义相应的属性
之后,在.m文件中实现相应的懒加载
将UIView以及button添加到界面上
之后,我们先来实现平移动画,实现下面的方法
这里面遇到挺多坑的,下面逐条说明一下
接下俩,我们类似添加相应的放大和旋转的动画效果
这样,我们就完成了CABasicAnimation实现平移、放大和旋转的动画效果
这种动画效果使用挺多的
另外,我们阅读苹果开发文档时,我们可以看到协议CAAnimationDelegate,通过这个协议我们可以观察动画的开始和结束。
在平移动画中,让CABasicAnimation遵守这个协议
实现相应的协议方法
比较重要的是,我们通过协议方法可以判断动画是否正常完成还是被打断,这个我以前就碰到过动画过程被UITableView 的reloadData打断,导致动画表现异常,具体可以看下这篇文章
CAnimationGroup动画执行时间比duration小
)
最终效果图为:
Demo地址
我写的同一系列的其他文章
iOS开发中动画效果的探究(一)
iOS动画效果的探究二:UIView Animation实现动画
iOS动画效果三:CABAsicAnimation实现平移、旋转和放大
ios动画效果四:使用Pop框架实现弹簧效果
iOS动画效果五:CABasicAnimation实现绕定点旋转的效果 ]
iOS动画效果六:实现自定义的push转场动画
iOS动画效果七:实现自定义present转场动画效果
iOS动画效果八:实现类似系统的测滑返回效果