IOs动画的那些事儿
CoreAnimation介绍
1:Core Animation是直接作用在CALayer上的(并非UIView上)非常强大的跨Mac OS X和iOS平台的动画处理API,Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程。CAAnimation分为这4种,他们分别是:
- CABasicAnimation---基本动画
- CAKeyframeAnimation---关键帧动画
- CAAnimationGroup---动画组
- CATransition---转场动画
CABasicAnimation(基本动画)
属性说明:
keyPath :要改变的属性名称(传字符串)
fromValue:keyPath相应属性的初始值
toValue:keyPath相应属性的结束值
动画过程说明:
随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值从fromValue渐渐地变为toValue
keyPath内容是CALayer的动画Animatable属性
animationWithKeyPath的值:
transform.rotation.x 围绕x轴翻转 参数:角度 angle2Radian(4)
transform.rotation.y 围绕y轴翻转 参数:同上
transform.rotation.z 围绕z轴翻转 参数:同上
transform.rotation 默认围绕z轴
transform.scale.x x方向缩放 参数:缩放比例 1.5
transform.scale.y y方向缩放 参数:同上
transform.scale.z z方向缩放 参数:同上
transform.scale 所有方向缩放 参数:同上
transform.translation.x x方向移动 参数:x轴上的坐标 100
transform.translation.y x方向移动 参数:y轴上的坐标
transform.translation.z x方向移动 参数:z轴上的坐标
transform.translation 移动 参数:移动到的点 (100,100)
opacity 透明度 参数:透明度 0.5
backgroundColor 背景颜色 参数:颜色 (id)[[UIColor redColor] CGColor]
cornerRadius 圆角 参数:圆角半径 5
borderWidth 边框宽度 参数:边框宽度 5
bounds 大小 参数:CGRect
contents 内容 参数:CGImage
contentsRect 可视内容 参数:CGRect 值是0~1之间的小数
hidden 是否隐藏
实例:
CALayer *myLayer = [CALayer layer];
myLayer.backgroundColor = [UIColor purpleColor].CGColor;
myLayer.frame = CGRectMake(50, 100, 120, 120);
myLayer.cornerRadius = 10;
[self.view.layer addSublayer:myLayer];
//移动
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.fromValue = [NSValue valueWithCGPoint:myLayer.position];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(myLayer.position.x+100, 100)];
//以X轴旋转
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
rotationAnimation.fromValue = [NSNumber numberWithFloat:0.0];
rotationAnimation.toValue = [NSNumber numberWithFloat:6.0*M_PI];
//放大缩小
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.x"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
scaleAnimation.toValue = [NSNumber numberWithFloat:2];
//组合动画
CAAnimationGroup *group = [CAAnimationGroup animation];
group.autoreverses = YES; //完成动画后同样反向也执行动画
group.duration = 2.0; //动画时间
group.animations = [NSArray arrayWithObjects:animation,rotationAnimation,scaleAnimation, nil];
group.repeatCount = 3;
/**
* PS:动画结束以后,他会返回到自己原来的frame,如果想保持动画结束时的状态
* 添加下面属性,并且此时要保证autoreverses属性为NO,另外组合动画的属性设
* 置同样也适用于单个动画的设置
* group.removedOnCompletion = NO;
* group.fillMode = kCAFillModeForwards;
*/
//添加动画
[myLayer addAnimation:group forKey:@"MyLayerAnimation"];
CAKeyframeAnimation关键帧动画
CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值
属性说明:
values:上述的NSArray对象。里面的元素称为“关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧
path:可以设置一个CGPathRef、CGMutablePathRef,让图层按照路径轨迹移动。path只对CALayer的anchorPoint和position起作用。如果设置了path,那么values将被忽略
keyTimes:可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧。如果没有设置keyTimes,各个关键帧的时间是平分的,CABasicAnimation可看做是只有2个关键帧的CAKeyframeAnimation。Timing Function的作用:
Timing Function的会被用于变化起点和终点之间的插值计算.形象点说是Timing Function决定了动画运行的节奏(Pacing),比如是均匀变化(相同时间变化量相同),先快后慢,先慢后快还是先慢再快再慢.
时间函数是使用的一段函数来描述的,横座标是时间t取值范围是0.0-1.0,纵座标是变化量x(t)也是取值范围也是0.0-1.0 假设有一个动画,duration是8秒,变化值的起点是a终点是b(假设是透明度),那么在4秒处的值是多少呢? 可以通过计算为 a + x(4/8) * (b-a), 为什么这么计算呢?讲实现的时间映射到单位值的时候4秒相对于总时间8秒就是0.5然后可以得到0.5的时候单位变化量是 x(0.5), x(0.5)/1 = 实际变化量/(b-a), 其中b-a为总变化量,所以实际变化量就是x(0.5) * (b-a) ,最后4秒时的值就是 a + x(0.5) * (b-a),所以计算的本质是映射.
五种预定义的时间函数名字的常量变量分别为
- kCAMediaTimingFunctionLinear
- kCAMediaTimingFunctionEaseIn
- kCAMediaTimingFunctionEaseOut
- kCAMediaTimingFunctionEaseInEaseOut
- kCAMediaTimingFunctionDefault
下图展示了前面四种Timing Function的曲线图,横座标表示时间,纵座标表示变化量,这点需要搞清楚(并不是平面座标系中xy).
实例:分别使用属性values及path两种的效果;围绕的点视图块进行转动效果;
//values方式
-(void)animationValues
{
UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(120, 350, 50, 50)];
myView.backgroundColor = [UIColor cyanColor];
[self.view addSubview:myView];
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animation];
keyAnimation.keyPath = @"position";
NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(200, 100)];
NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(200, 200)];
NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(100, 200)];
NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
keyAnimation.values = @[value1,value2,value3,value4,value5];
keyAnimation.repeatCount = MAXFLOAT; //循环次数
keyAnimation.removedOnCompletion = NO;
keyAnimation.fillMode = kCAFillModeForwards;
keyAnimation.duration = 4.0;
keyAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
keyAnimation.delegate = self;
[myView.layer addAnimation:keyAnimation forKey:nil];
}
//path方式
-(void)animationPath
{
UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(120, 350, 50, 50)];
myView.backgroundColor = [UIColor purpleColor];
[self.view addSubview:myView];
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
CGMutablePathRef path=CGPathCreateMutable();
CGPathAddEllipseInRect(path, NULL, CGRectMake(50, 100, 220, 180));
animation.path=path;
CGPathRelease(path);
animation.repeatCount=MAXFLOAT;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.duration = 4.0f;
animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.delegate=self;
[myView.layer addAnimation:animation forKey:nil];
}
CAAnimationGroup(动画组)
动画组,是CAAnimation的子类,可以保存一组动画对象,将CAAnimationGroup对象加入层后,组中所有动画对象可以同时并发运行
属性说明:
animations:用来保存一组动画对象的NSArray
默认情况下,一组动画对象是同时运行的,也可以通过设置动画对象的beginTime属性来更改动画的开始时间
实例:创建一组动画效果,多个动画一起
-(void)animationGroup
{
UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(120, 350, 50, 50)];
myView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:myView];
//贝塞尔曲线路径
UIBezierPath *movePath = [UIBezierPath bezierPath];
[movePath moveToPoint:CGPointMake(50.0, 50.0)];
[movePath addQuadCurveToPoint:CGPointMake(130, 350) controlPoint:CGPointMake(300, 100)];
//关键帧动画(位置)
CAKeyframeAnimation * posAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
posAnim.path = movePath.CGPath;
posAnim.removedOnCompletion = YES;
//缩放动画
CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
scaleAnim.removedOnCompletion = YES;
//透明动画
CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];
opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
opacityAnim.toValue = [NSNumber numberWithFloat:0.1];
opacityAnim.removedOnCompletion = YES;
//动画组
CAAnimationGroup *animGroup = [CAAnimationGroup animation];
animGroup.animations = [NSArray arrayWithObjects:posAnim, scaleAnim, opacityAnim, nil];
animGroup.duration = 5;
animGroup.autoreverses = NO;
animGroup.removedOnCompletion = NO;
animGroup.fillMode = kCAFillModeRemoved;
[myView.layer addAnimation:animGroup forKey:nil];
}
//=+=================================================
CATransition(转场动画) 动画属性: type:动画过渡类型 subtype:动画过渡方向 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点(在整体动画的百分比) subtype:动画过渡方向(默认为nil,如果指定了filter,那么该属性无效,kCATransitionFromRight,kCATransitionFromLeft,kCATransitionFromTop,kCATransitionFromBottom;分别表示:过渡从右边、左边、顶部、底部 开始) 转场动画的类型(NSString *type),还有很多私有API类型 fade : 交叉淡化过渡 push : 新视图把旧视图推出去 moveIn: 新视图移到旧视图上面 reveal: 将旧视图移开,显示下面的新视图 cube : 立方体翻滚效果 oglFlip : 上下左右翻转效果 suckEffect : 收缩效果,如一块布被抽走 rippleEffect: 水滴效果 pageCurl : 向上翻页效果 pageUnCurl : 向下翻页效果 cameraIrisHollowOpen : 相机镜头打开效果 cameraIrisHollowClos : 相机镜头关闭效果 实例:两个动画效果,一个向上运动,一个向下运动的效果 //从下往上运动
-(void)animationTransition
{
//y点就是当要运动后到的Y值 UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(, self.view.bounds.size.height-, self.view.bounds.size.width, )];
myView.backgroundColor = [UIColor redColor];
[self.view addSubview:myView]; CATransition *animation = [CATransition animation];
animation.duration = ;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.fillMode = kCAFillModeForwards;
animation.type = kCATransitionMoveIn;
animation.subtype = kCATransitionFromLeft;
//添加动画
[myView.layer addAnimation:animation forKey:nil];
} //从上往下运动
-(void)animationPushTransition
{
//y点就是当要运动后到的Y值 UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(, self.view.bounds.size.height, self.view.bounds.size.width, )];
myView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:myView]; CATransition *animation = [CATransition animation];
animation.duration = 4.0;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.fillMode = kCAFillModeForwards;
animation.type = kCATransitionPush;
animation.subtype = kCATransitionFromBottom; //添加动画
[myView.layer addAnimation:animation forKey:nil]; }
#import "ViewController.h" @interface ViewController ()
- (IBAction)previous;
- (IBAction)next;
@property (weak, nonatomic) IBOutlet UIImageView *iconView; /**
* 当前图片的索引
*/
@property (nonatomic, assign) int index;
@end @implementation ViewController - (IBAction)previous{
self.index--;
if (self.index == -){
self.index = ;
} NSString *filename = [NSString stringWithFormat:@"%d.jpg", self.index + ];
self.iconView.image = [UIImage imageNamed:filename]; CATransition *anim = [CATransition animation];
anim.type = @"cube";
// anim.subtype = kCATransitionFromLeft;
// anim.type = @"pageUnCurl";
anim.duration = 0.5;
[self.view.layer addAnimation:anim forKey:nil];
} - (IBAction)next {
self.index++;
if (self.index == ) {
self.index = ;
} NSString *filename = [NSString stringWithFormat:@"%d.jpg", self.index + ];
self.iconView.image = [UIImage imageNamed:filename]; // 转场动画 两个界面之间的过渡动画
CATransition *anim = [CATransition animation];
anim.type = @"pageCurl";
/* Common transition subtypes.
CA_EXTERN NSString * const kCATransitionFromRight
__OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
CA_EXTERN NSString * const kCATransitionFromLeft
__OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
CA_EXTERN NSString * const kCATransitionFromTop
__OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
CA_EXTERN NSString * const kCATransitionFromBottom
__OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);*/
// anim.subtype = kCATransitionFromRight; //方向
anim.duration = 0.5; // anim.startProgress = 0.0;
//
// anim.endProgress = 0.5; [self.view.layer addAnimation:anim forKey:nil];
}
/*********************************************************/ /* 过渡效果 fade //交叉淡化过渡(不支持过渡方向) kCATransitionFade push //新视图把旧视图推出去 kCATransitionPush
moveIn //新视图移到旧视图上面 kCATransitionMoveIn reveal //将旧视图移开,显示下面的新视图 kCATransitionReveal cube //立方体翻滚效果 oglFlip //上下左右翻转效果 suckEffect //收缩效果,如一块布被抽走(不支持过渡方向) rippleEffect //滴水效果(不支持过渡方向) pageCurl //向上翻页效果 pageUnCurl //向下翻页效果 cameraIrisHollowOpen //相机镜头打开效果(不支持过渡方向) cameraIrisHollowClose //相机镜头关上效果(不支持过渡方向)*/ /* 过渡方向 kCATransitionFromRight kCATransitionFromLeft kCATransitionFromBottom kCATransitionFromTop*/
/**
CATransition的使用
CATransition *anim = [CATransition animation];
anim.type = @“cube”; // 动画过渡类型
anim.subtype = kCATransitionFromTop; // 动画过渡方向
anim.duration = 1; // 动画持续1s
// 代理,动画执行完毕后会调用delegate的animationDidStop:finished:
anim.delegate = self; /*******中间穿插改变layer属性的代码 [layer addAnimation:anim forKey:nil];
**********/
/*********************************************************/
@end
IOs动画的那些事儿的更多相关文章
- (转)iOS动画Core Animation
文章转载:http://blog.sina.com.cn/s/blog_7b9d64af0101b8nh.html 在iOS中动画实现技术主要是:Core Animation. Core Animat ...
- 解析 iOS 动画原理与实现
这篇文章不会教大家如何实现一个具体的动画效果,我会从动画的本质出发,来说说 iOS 动画的原理与实现方式. 什么是动画 动画,顾名思义,就是能“动”的画.人的眼睛对图像有短暂的记忆效应,所以当眼睛看到 ...
- IOS动画隐式,显式,翻页
// ViewController.m // IOS动画0817 // // Created by 张艳锋 on 15/8/17. // Copyright (c) 2015年 张艳锋. Al ...
- iOS动画原理
1. iOS动画原理 本质:动画对象(这里是UIView)的状态,基于时间变化的反应 分类:可以分为显式动画(关键帧动画和逐帧动画)和隐式动画 关键帧和逐帧总结:关键帧动画的实现方式,只需要修改某个属 ...
- iOS 动画基础
原文:http://www.cnblogs.com/lujianwenance/p/5733846.html 今天说一下有关动画的基础,希望能帮助到一些刚接触iOS动画或者刚开始学习iOS的同学, ...
- ios 动画效果CATransition笔记
初学ios开发,很多概念还不清楚,所以只有边学边做例子.又怕学了后面忘了前面,因此用自己的博客来纪录自己的学习历程,也是对自己学习不要懈怠做个监督. 刚学ios做动画效果.因为ios封装得很好,实现i ...
- IOS动画总结
IOS动画总结 一.基本方式:使用UIView类的UIViewAnimation扩展 + (void)beginAnimations:(NSString *)animationID context ...
- ios 动画学习的套路 (二)
有它们俩你就够了! 说明:下面有些概念我说的不怎么详细,网上实在是太多了,说了我觉得也意义不大了!但链接都给大家了,可以自己去看,重点梳理学习写动画的一个过程和一些好的博客! (一) 说说这两个三方库 ...
- iOS动画学习-视觉效果
CALayer不仅仅是iOS动画学习-CALayer中介绍的那些内容,他还有一些其他属性,比如shadowColor,borderWidth,borderColor等等,这些属性我们只需要简单点设置就 ...
随机推荐
- JDK安装及环境变量配置详解
一.下载(Jdk 1.8 ) 1.下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151 ...
- Python——函数入门(二)
一.函数的参数 我们在定义函数时,可以定义形式参数(简称形参),这些形参的值在函数调用的时候才会确定,形参的值由调用者负责传入. 1.关键字参数 在Python中,函数的参数名并不是没有意义的,在调用 ...
- 使用lua实现Spine动画的预加载
创建spine动画有两种方法,分别是createwithfile和createwithdata. createWithFile是通过加载动作数据马上进行创建,如果spine动画中的json文件大小超过 ...
- 到底该如何理解DevOps这个词
炒了8年的概念,到底该如何理解DevOps这个词? 转载本文需注明出处:EAII企业架构创新研究院,违者必究.如需加入微信群参与微课堂.架构设计与讨论直播请直接回复公众号:“EAII企业架构创新研究院 ...
- mysql 添加数据如果数据存在就更新ON DUPLICATE KEY UPDATE和REPLACE INTO
#下面建立game表,设置name值为唯一索引. CREATE TABLE `game` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar( ...
- JS处理数据四舍五入,tofixed与round的区别
此区别是在做微信端有关绑定设备数据曲线平滑处理的过程中,进行验证时候无意发现. 1 .tofixed方法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.例如将数据Num保留 ...
- Python json和simplejson的使用
在Python中,json数据和字符串的转换可以使用json模块或simplejson模块. json从Python2.6开始内置到了Python标准库中,我们不需要安装即可直接使用. simplej ...
- Django之cookie、session
会话跟踪技术 可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应. 一次会话过程中,我们应该注意的是什么呢? 那就是,一些操作要保证用户操作的是用户自己个人的数据.举个 ...
- MVC&JQuery如何根据List动态生成表格
背景:在编码中,常会遇到根据Ajax的结果动态生成Table的情况,本篇进行简要的说明.这已经是我第4.5篇和Ajax有关的随笔了,互相之间有很多交叠的地方,可自行参考. 后台代码如下: public ...
- 虚拟机上的Linux学习
title: 虚拟机上的Linux学习 date: 2018-08-08 15:48:28 updated: tags: [Linux,学习笔记] description: keywords: com ...