iOS动画开发之四——核心动画编程(CoreAnimation)

iOS动画开发之四——核心动画编程(CoreAnimation)

一、引言

        前几篇博客详细介绍了有关UIView层的动画使用与相关的效果,然而这些动画是UIKit为我们封装好的核心动画层的方法,通过这些方法,我们可以用的更加简便,当然功能也十分强大,基本能达到我们项目的大多需求。但是如果你想更加自由的通过动画操作视图的属性,你就需要跳过UIKit的封装,使用CoreAnimation核心动画层的方法来实现动画。

二、开始前的准备

1、认识一个的朋友

        在开始介绍核心动画的内容前,我们需要先搞明白一个东西:Layer。你可能很少听说他,可是他却无处不在,在iOS的UI开发中,任何一个View包括继承于UIView的子类上面都会有一个Layer,可以理解为Layer为单独的一层,专门负责视图的显示,而view除此之外更多负责触摸时间等逻辑处理。因此,iOS也将所有动画的操作都交给你Layer来负责。

2、Layer层可以做到的事

        Layer如此神秘,那他究竟可以做到哪些事?他确实可以做很多view做不了的事情.

(1)设置view的圆角属性
 view = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    [self.view addSubview:view];
    view.backgroundColor=[UIColor redColor];
    view.layer.masksToBounds=YES;//设置layer层的切割属性
    view.layer.cornerRadius=10;//设置layer层的圆角半径

效果如下:

(2)设置view的边框
view = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    [self.view addSubview:view];
    view.backgroundColor=[UIColor redColor];
    CALayer *layer=view.layer;
    layer.borderWidth=10;//设置边框的宽度
    layer.borderColor=[[UIColor magentaColor]CGColor];//设置边框的颜色

注意:因为CoreAnimation层是UI层的底层,所以这里的颜色为CGColor对象。

效果如下:

(3)设置视图阴影
 view = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    [self.view addSubview:view];
    view.backgroundColor=[UIColor redColor];
    CALayer *layer=view.layer;
    layer.shadowOffset=CGSizeMake(30, 30);//设置阴影方向
    layer.shadowColor=[[UIColor blackColor] CGColor];//设置阴影颜色
    layer.shadowOpacity=0.5;//设置阴影透明度
    layer.shadowRadius=10;//设置阴影圆角

效果如下:

这样的立体效果是否已经很酷了?NO,在加上动画才对。

三、CoreAnimation的使用

1、基础属性相关的动画CABasicAnimation

CABasicAnimation是核心动画中对属性操作需要用到了一个动画类,示例如下:

    CALayer *layer=view.layer;
    CABasicAnimation * ani= [CABasicAnimation animationWithKeyPath:@"opacity"];//创建对象,参数关键字为layer的属性
    ani.duration=3;//设置执行时间
    ani.repeatCount=1;//设置执行次数
    ani.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];//设置线性效果
    [layer addAnimation:ani forKey:@"test"];//添加动画
    layer.opacity=0;//透明度改变时执行动画动作

通过上面的示例,我们可以发现,layer的属性都可以来进行动画动作,这样,我们对动画的操作就自由的很多。

2、关键帧动画CAKeyframeAnimation

关键帧动画除了动画改变layer的属性外,可以设置几个关键帧点,通过这些点,可以实现路径更加负责的动画,例如:

CALayer *layer=view.layer;
    CAKeyframeAnimation * ani = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];//创建一个关键帧动画对象
    ani.duration=3;
    ani.values=@[@1,@0,@1];//传入三个关键帧,动画会将试图先慢慢隐藏,再慢慢展现
    [layer addAnimation:ani forKey:@"test"];

类比如上代码,我们还可以通过关键帧让试图按照我们预定的路线移动,同时我们还可以设置两个数组,分别为keyTimes和timingFunctions。这两个数组中的值可以设置动画每一段的运动线性特征和每一段的运动时间比例。

专注技术,热爱生活,交流技术,也做朋友。 ——珲少 QQ群:203317592

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏進无尽的文章

绘图-CAShapeLayer、CABasicAnimation以及核心动画

QeartzCore是iOS中的图层框架,Quartz Core 的渲染能力可以像三维一样对二维图像进行任意操纵,在这个框架中我们可以对试图的图层进行定制,以实...

1452
来自专栏iOS进阶开发

iOS开发UI篇--iOS动画(Core Animation)总结

IOS 动画主要是指Core Animation框架。官方使用文档地址为:Core Animation Guide。 Core Animation是IOS和OS...

1190
来自专栏非著名程序员

基础篇章:React Native 之 View 和 Text 的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 从今天开始我们进入基础组件也就是一些简单控件...

3055
来自专栏编程之旅

iOS开发——影响图形性能的因素以及检测方法

我想各位攻城狮们肯定听过一句话:“过早的优化是万恶之源”。若是你有着丰富的项目经验,一定会对这句话有着自己的体会,而若是编程新手,那么,请牢记这句话。在一个项目...

1172
来自专栏前端新视界

通过 JS 判断页面是否有滚动条的简单方法

前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁。最终通过参考不同方法,写了一个比较简单的方...

2929
来自专栏一“技”之长

iOS开发CoreGraphics核心图形框架之八——层聚合

    正常情况下,在使用CoreGraphics框架中的方法进行图形绘制时,每一闭合的图形都是一个独立的层,如果在绘制时添加了阴影效果,则通过阴影可以很明显的...

2052
来自专栏非典型技术宅

iOS动画系列之六:利用CABasic Animation完成带动画特效的登录界面1. 画风突变的笑脸2. 心跳3. iOS实践:实现一个带动效的登录界面

1396
来自专栏mukekeheart的iOS之旅

iOS学习——核心动画

  Core Animation(核心动画)是一组功能强大、效果华丽的动画API,无论在iOS系统或者在你开发的App中,都有大量应用。核心动画所在的位置如下图...

1374
来自专栏进步博客

深入理解视觉格式化模型( VISUAL FORMATTING MODEL)

“理论不懂就实践,实践不会就学理论”,非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免...

1313
来自专栏Guangdong Qi

iOS开发常用之UI模糊效果、自动版式

1143

扫码关注云+社区

领取腾讯云代金券