Core Animation
文章平均质量分 93
秋恨雪
熟悉C语言、Python、前端的h5, Vue等开发,熟悉安卓开发。现在致力于iOS研发。对算法也有一定的研究。现在在一家大型企业就职。
展开
-
动画特效八:渐变动画
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。本节将为大家介绍的动画效果是渐变动画效果。其实这个例子,大家天天能够看到,就是手机屏幕锁定是,有一句“滑动来解锁”的文字,它上面有一种渐变的动画一直在其上面走过。先看看最终的效果图。思路分析:1. 普通UIView不可能有这样的渐变效果,所以我们应该自定义一个UIView来实现这样的效果。2. ...原创 2015-07-25 10:05:16 · 1408 阅读 · 0 评论 -
Core Animation 高级理论知识汇总
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。注:本节理论知识,通过学习文章 iOS-Core-Animation-Advanced-Techniques 总结所得。一、 基本概念Core Animation其实是一个令人误解的命名。你可能认为它只是用来做动画的,但实际上它是从一个叫做Layer Kit这么一个不怎么和动画有关的名字演变而来,...原创 2015-07-05 15:01:03 · 1903 阅读 · 0 评论 -
动画特效七:碰撞动画
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。这一节讲述的动画效果是碰撞动画,就是模拟或者仿真现实物体的碰撞效果。先看看效果图。动画效果分析:1. 有两个形式一样的View(自己和对手),所以我们可以考虑直接封装一个View。2. 注意到View的里面的图片及边框的圆形都有可能变成椭圆。所以使用View的block方式实现这个效果有点不可靠。...原创 2015-07-23 12:26:43 · 4327 阅读 · 0 评论 -
Advanced Graphics and Animations for iOS Apps
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。转载地址Core Animation Pipeline第一部分主要讲解了Core Animation的工作流程和渲染过程。CoreAnimation的渲染流程可以用下图来概括:在GPU的渲染过程中,我们能看到顶点着色器与像素着色器参与到图像的处理。在objc.io中有一篇文章进一步地阐明了顶点着色...转载 2015-08-08 09:48:29 · 733 阅读 · 0 评论 -
动画特效十三:自定义过度动画之基本使用
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。好久没有进行动画系列了,今天我们继续;这次讲解的内容是过度动画;先看看最终动画效果。需求分析:1. UI下方有一排内容,用来显示缩略图,可以横向滚动;2. 选中某一项后,会弹出具体的内容。操作细节:1. 动画在缩略图的情形下,只有图片没有文本描述信息。2. 动画在执行过程中,图片的圆角也会伴随着动...原创 2015-09-25 17:54:43 · 2872 阅读 · 0 评论 -
动画特效十二:发射器效果
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。我们经常在电视屏幕中可以看到爆炸,雨滴和烟雾等特效。这一节的动画特效,就是介绍如何在移动设备上实现类似的效果。瀑布流,火,烟和雨滴等效果都是由很多的项组成的,我们称之为 "颗粒"。颗粒可以仿真出真实的效果,因为每一个颗粒可以是随机的并且是不可预测的。例如:在风暴中的每一个雨滴有他们自己的尺寸,方向...原创 2015-09-07 15:25:16 · 1262 阅读 · 0 评论 -
动画特效十四:手风琴效果
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。在讲解JQuery特效的时候,我介绍过 手风琴效果; 这一节我讲解一下在iOS中的实现效果;相对于JQuery版本的动画,iOS中考虑的东西要多的多,先看看最终的效果图。大家也许看到这个实现效果,就会立刻想到 UITableView的 Grouped;但是UITableView的 Grouped效...原创 2015-10-23 12:08:30 · 2168 阅读 · 0 评论 -
CALayer的needsDisplayForKey方法使用说明
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。今天为大家介绍的是如何在执行动画的时候,完成Core Graphics 图形的绘制工作。 主要把重心放在needsDisplayForKey 方法上面。先看看实现绘制的动画效果图。一、理论基础首先了解下layer自己的属性如何实现动画。1. layer首次加载时会调用 +(BOOL)needsDi...原创 2015-11-09 16:40:29 · 3372 阅读 · 0 评论 -
动画特效十七:粘性动画
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。注:本文内容是学习自 KittenYang 的《A GUIDE TO IOS ANIMATION》一书,如果大家感兴趣的话,可以购买本书阅读。但就个人而言,觉得作者的确思维清晰,但语言表达上面忽略了很多细节方面的说明,代码书写方面有许多需要优化及更正的地方。粘性动画效果图如下:其实这里的动画效果...原创 2015-11-14 18:19:54 · 2457 阅读 · 1 评论 -
动画特效十八:粘性动画2
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。注:本文内容是学习自 KittenYang 的《A GUIDE TO IOS ANIMATION》一书,如果大家感兴趣的话,可以购买本书阅读。但就个人而言,觉得作者的确思维清晰,但语言表达上面忽略了很多细节方面的说明,代码书写方面有许多需要优化及更正的地方。上一节的动画效果中介绍了 粘性动画, ...原创 2015-11-20 17:59:19 · 1085 阅读 · 0 评论 -
动画特效十五:网易新闻之头部导航切换效果
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。这一节继续和大家探讨iOS中的动画效果,由于网易新闻中的动画效果比较多,所以我分两个章节进行介绍。这一节介绍的效果就是 头部导航切换效果。效果图如下:一、需求分析:1. 点击某个Item后,这个Item文字变大,颜色变成红色;其余的Item,文字正常大小显示,颜色变成黑色。2. 在滚动切换的时候,...原创 2015-10-31 10:03:03 · 2252 阅读 · 0 评论 -
动画特效十六:网易新闻之“排序删除”效果
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。上一节中讲解了 动画特效十五:网易新闻之头部导航切换效果。 这一节讲解一下网易新闻中的 "排序删除" 动画,效果图如下(注:由于是flash录制,这里的小方块抖动并不明显,实际动画中是很流畅的):一、需求分析:1. 排序:长按某个小方块,等到它开始抖动,此时,我们就可以对小方块进行拖拽,当他拖拽到...原创 2015-11-01 11:44:25 · 1528 阅读 · 0 评论 -
动画特效二十:仿支付宝转账动画
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。最近比较忙碌,有一段时间没有更新自己的博客了。这一节为大家介绍的动画特效是: 仿支付宝转账动画。 先看看最终效果图。处理这种多变的动画,我们的分析思路就是各个击破。在这里,我将这个动画分解为三组进行处理:1. 一小段弧线的运动,在效果图中转了3圈。2. 绘制一个完整的圆,在效果图中转了1圈。3....原创 2015-12-19 10:22:16 · 4463 阅读 · 0 评论 -
动画特效十:下拉放大
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。今天继续我们的动画之行。这一次讲解的动画效果,在很多app中都能见到,就是下拉放大图片的效果。先看看效果图。注:UITableView中内容的展示,不是本节的重点,所以忽略不计。一、动画分析:1. 默认情况下,图片正常显示(没有被拉大),并且导航条是隐藏的。2. 当往下拉动的时候,图片等比例放大,...原创 2015-08-01 17:04:38 · 4489 阅读 · 17 评论 -
动画特效六:三维过度
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。这一节讲述一下一个非常好玩的过度效果,文字翻转。先看看静态图:从图中可以看出,文字“ZY 2014” 被文字“AE 1107”慢慢的压下来,并且有cube(3D)效果。然后,我们再看看最终Demo的效果。动画效果分析:1. 背景图片的淡入淡出效果。2. 文字的Cube翻转效果。淡入淡出效果其实很简...原创 2015-07-20 09:13:21 · 1215 阅读 · 0 评论 -
position和anchorPoint
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。一、理论概述1.简单介绍CALayer有2个非常重要的属性:position和anchorPoint@property CGPoint position;用来设置CALayer在父层中的位置以父层的左上角为原点(0, 0) @property CGPoint anchorPoint;称为“定位点”...原创 2015-06-14 08:02:58 · 1619 阅读 · 0 评论 -
CATransform3D 特效详解
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。关于图层的几个坐标系。对于ios来说,坐标系的(0,0)点在左上角,就是越往下,Y值越大。越往右,X值越大。一个图层的frame,它是position,bounds,anchorPoint和transform属性的一部分。设置一个新的frame将会相应的改变图层的position和bounds,但...转载 2015-06-14 19:31:19 · 3266 阅读 · 0 评论 -
Core Animation 基本动画效果汇总
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。前几篇文章中,我详细的说明了Core Animation相关的理论知识。这一节,我将举例说明基本动画的使用。一、 CABasicAnimation首先我创建一个用于实现动画的图层,代码如下:- (void)viewDidLoad { [super viewDidLoad]; CAL...原创 2015-07-13 17:04:00 · 1274 阅读 · 0 评论 -
动画特效九:下拉刷新
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。这一节为大家介绍一个常用的操作:下拉刷新。我这里的Demo,是模拟情况,没有涉及到具体的数据源。真实的下拉刷新控件还是比较复杂的。先看看效果图。关于UITableView的代码就忽略不计了,那不是本节讲解的重点。动画分析:1. UITableView上方有一个View,就是用来展示下拉刷新的特效的...原创 2015-07-27 10:29:52 · 2505 阅读 · 0 评论 -
动画特效一:图片翻转
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。前几节内容中,我详细的讲解了动画的理论知识及基本使用,在以后的章节中,我将用实际的案例来展示动画特效。这一节的例子是图片翻转。先看看最终效果:素材准备:提供了两张图片,Baby.png和Xiaoming.png,并且它们的尺寸大小均为150 X 150。图片如下: 设计思路一:1. 放置一个...原创 2015-07-15 09:43:19 · 3611 阅读 · 0 评论 -
动画特效二:图片折叠
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。上一期动画特效,我讲解了《图片翻转》。这一节,我们继续动画之旅,讲解一下图片折叠效果。图片折叠:顾名思义就是绕着图片的x或者y轴进行折叠,并且看上去有透视效果。先看看最终的效果图:编程思路分析:1. 使用一张图片 (Failed) 因为进行图片旋转的时候,如果下半部分的图片往前翻转了,上半部分的图...原创 2015-07-16 11:25:24 · 1554 阅读 · 1 评论 -
动画特效三:搜索动画
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。本节我们看看搜索动画,也就是点击所搜框,上面的导航或者标题栏会被“顶”上去。先看看效果图。业务描述:1. 点击搜索框,上面的标题栏会被“顶”上去,同时会显示遮罩效果。2. 然后你点击遮罩层或者“Cancel”按钮,标题栏又被弹回来。大家也许会感觉到奇怪,这个动画效果,用UIView的block动画...原创 2015-07-17 17:48:05 · 1805 阅读 · 0 评论 -
Core Animation 编程指南
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。本文是《Core Animation Programming Guide》2013-01-28更新版本的译文。本文略去了原文中关于OS X平台上Core Animation相关内容。因为原文的类型属于编程指南,所以示例代码并不多,更多的是理论层面的探讨。所以译文中加入了大量的示例代码,以提高本文的...翻译 2015-06-13 14:47:44 · 1982 阅读 · 0 评论 -
IOS UIKit 框架类之视图动画和坐标系介绍
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。Core Animation利用了硬件加速和架构上的优化来实现快速渲染和实时动画。当视图的drawRect:方法首次被调用时,层会将描画的结果捕捉到一个位图中,并在随后的重画中尽可能使用这个缓存的位图,以避免调用开销很大的drawRect:方法。这个过程使Core Animation得以优化合成操...转载 2015-06-14 08:01:55 · 977 阅读 · 0 评论 -
动画特效十一:侧边栏效果
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。好久没有进行 "动画特效" 这一系列了。今天和大家继续分享动画特效:“侧边栏效果”。由于侧边栏效果的动画效果各式各样了,所以我大致分为三种进行说明;样式一:这个样式的动画效果还是比较容易处理的。主要是通过计算view的宽度或者位置来实现。我这样说,也许有点模糊了。让我们来分析程序的架构模式。默认情...原创 2015-08-25 14:36:09 · 3070 阅读 · 1 评论 -
动画特效四:精致登陆
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。传统的登陆界面只是一个静态的UI,让用户输入用户名及密码就可以了。但为了增加用户体验,我们可以为登陆界面适当的添加动画效果。示例的静态登陆界面如下:添加动画后的效果如下:一、动画效果分析:1. title和两个文本框是从屏幕左侧推进过来的,并且有层次感。2. 登陆按钮是从下面推上来的,并且具有弹簧...原创 2015-07-18 08:38:19 · 990 阅读 · 0 评论 -
动画特效五:灌水动画
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。前面几个章节,已经介绍了几个动画实例,如果感兴趣的话,大家可以查看我以前的博客。今天给大家介绍一下灌水动画。先看效果图。咋一看,好像这不是动画,好像使用了GIF图片似的。但是它的的确确是动画效果。通过这个实例,我想告诉大家一个事实:很多复杂的动画效果其实都是假象!需求分析:1. 圆圈外围有一个类似...原创 2015-07-19 13:43:28 · 3240 阅读 · 0 评论 -
动画特效十九:自定义过度动画2
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。在前面的章节中,我已经介绍了自定义过度动画的基本使用,大家可以参照这里:动画特效十三:自定义过度动画之基本使用。这一节我使用更详细的例子来阐述它的使用及引申出一些其他知识点。效果图如下:注意到,上面两个Demo中均是自定义导航控制器切换的效果。由于实现原理相似,我只对第一个效果进行说明。在具体分析...原创 2015-12-05 08:53:29 · 1223 阅读 · 0 评论