CoreAnimation研究(1)
来源:互联网 发布:曼德拉毁了南非知乎 编辑:程序博客网 时间:2024/05/16 04:56
CoreAnimation研究(1)
demo git地址
关于ios动画,之前只是简单地用过UIView,对于CoreAnimation,大名虽然早就有耳闻,但一直没机会研究。最近因为项目原因,深入接触了下CoreAnimation,真是一入豪门深似海啊!相比于UIView,CoreAnimation的功能实在强大太多(貌似UIView的动画 就是基于CoreAnimation封装的)
基本概念
- Core Animation是直接作用在CALayer上的跨Mac OS X和iOS平台的动画处理API,Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程。
- 如果是Xcode6之前的版本,要导入QuartzCore/QuartzCore.h框架(并不存在什么CoreAnimation 框架)
CAAnimation的一些属性:
- duration:动画的持续时间
- repeatCount:重复次数,无限循环可以设置HUGE_VALF或者MAXFLOAT
- repeatDuration:重复时间
removedOnCompletion:默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillMode为kCAFillModeForwards - beginTime:可以用来设置动画延迟执行时间,若想延迟2s,就设置为CACurrentMediaTime()+2,CACurrentMediaTime()为图层的当前时间
- timingFunction:速度控制函数,控制动画运行的节奏
- delegate:动画代理
- fillMode决定当前对象在非active时间段的行为。(要想fillMode有效,最好设置removedOnCompletion =
NO) - kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
- kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
- kCAFillModeBackwards 在动画开始前,只需要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始。
- kCAFillModeBoth 这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态
- CAMediaTimingFunction:速度控制函数
- kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉
- kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开
- kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地
kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。
基本动画:CABasicAnimation
属性说明:
- keyPath :要改变的属性名称
- fromValue:keyPath相应属性的初始值
- toValue:keyPath相应属性的结束值
一言不合上代码:
let a = CABasicAnimation(); a.fromValue = UIColor.red.cgColor; a.toValue = UIColor.blue.cgColor;// a.keyPath = "backgroundColor"; a.duration = 3;// a.isRemovedOnCompletion = false;// a.fillMode = kCAFillModeForwards; view.layer.add(a, forKey: "backgroundColor");
关键帧动画:CAKeyframeAnimation
属性说明:
- values:上述的NSArray对象。里面的元素称为“关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧
- path:可以设置一个CGPathRef、CGMutablePathRef,让图层按照路径轨迹移动。path只对CALayer的anchorPoint和position起作用。如果设置了path,那么values将被忽略
- keyTimes:可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧。如果没有设置keyTimes,各个关键帧的时间是平分的
self.view.addSubview(rV); let a = CAKeyframeAnimation(); a.values = [UIColor.red.cgColor, UIColor.blue.cgColor, UIColor.orange.cgColor]; a.duration = 10; a.isRemovedOnCompletion = false; a.fillMode = kCAFillModeForwards; a.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut); a.calculationMode = kCAAnimationLinear; rV.layer.add(a, forKey: "backgroundColor");
动画组:CAAnimationGroup
动画组可以保存一组动画对象,将CAAnimationGroup对象加入层后,组中所有动画对象可以同时并发运行
属性说明:
- animations:用来保存一组动画对象的NSArray
self.view.addSubview(rV); //变色动画 let aB = CAKeyframeAnimation(); aB.values = [UIColor.red.cgColor, UIColor.blue.cgColor, UIColor.orange.cgColor]; aB.isRemovedOnCompletion = false; aB.fillMode = kCAFillModeForwards; aB.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut); aB.keyPath = "backgroundColor"; //位移动画 let aM = CAKeyframeAnimation(); let aMP = CGMutablePath(); aMP.move(to: CGPoint(x: 20, y: 20)); aMP.addCurve(to: CGPoint(x: 20, y: 20), control1: CGPoint(x: 160, y: 30), control2: CGPoint(x: 220, y: 220)); aM.path = aMP; aM.isRemovedOnCompletion = false; aM.fillMode = kCAFillModeForwards; aM.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut); aM.rotationMode = "auto"; aM.keyPath = "position"; //两个动画添加到一个组里,运行后会看到一个一边变色一边位移的view let aG = CAAnimationGroup(); aG.duration = 10; aG.animations = [aB, aM]; rV.layer.add(aG, forKey: nil);
CATransition:转场动画
CATransition用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。
属性说明:
- type:动画过渡类型
- fade : 交叉淡化过渡
- push : 新视图把旧视图推出去
- moveIn: 新视图移到旧视图上面
- reveal: 将旧视图移开,显示下面的新视图
- cube : 立方体翻滚效果
- oglFlip : 上下左右翻转效果
- suckEffect : 收缩效果,如一块布被抽走
- rippleEffect: 水滴效果
- pageCurl : 向上翻页效果
- pageUnCurl : 向下翻页效果
- cameraIrisHollowOpen : 相机镜头打开效果
- cameraIrisHollowClos : 相机镜头关闭效果
- subtype:动画过渡方向
- fromLeft,
- fromRight,
- fromTop
- fromBottom
- startProgress:动画起点(在整体动画的百分比)
- endProgress:动画终点(在整体动画的百分比)
rV.backgroundColor = UIColor.red; self.view.addSubview(rV); let t = CATransition(); t.duration = 3; t.type = "cube"; t.subtype = "fromLeft"; rV.layer.add(t, forKey: "animation"); rV.removeFromSuperview();// self.performSegue(withIdentifier: "transitionS", sender: self); let nV = UIView(frame: CGRect(x: 10, y: 10, width: 40, height: 40)); nV.backgroundColor = UIColor.blue; self.view.addSubview(nV);
0 0
- CoreAnimation研究(1)
- CoreAnimation研究(2)
- CoreAnimation-CATransform3D-1
- coreanimation
- CoreAnimation
- CoreAnimation
- CoreAnimation
- CoreAnimation
- CoreAnimation
- CoreAnimation
- CoreAnimation
- iOS CoreAnimation(1)-图层树
- Apple官方CoreAnimation动画演示(1)
- [IOS]CoreAnimation基础[翻译1部分]
- IOS研究之CoreAnimation(2)-CALayer和CATransaction的详细教程
- 从CoreAnimation到Facebook‘s Pop(1)
- 关于coreAnimation 核心动画的学习笔记(1)
- iOS CoreAnimation
- 初试Scrapy(二)---抓取豆瓣电影排行TOP250实验
- C#设计模式——解释器模式
- 如何提高程序员的生产率 (1)
- 动态库和静态库的区别
- JAVA IO详解
- CoreAnimation研究(1)
- JVM 基础知识
- RxJava运用Scheduler完成多线程操作
- Linux程序设计基础-编程基础
- 求生之路2 游戏资料详细与细节
- linux命令 chmod 755的含义 及drwxr-xr-x 的含义
- 10个大数据领域的杰出公司
- Bugly热修复 Android SDK接入
- 数据结构存储,顺序和链式比较d