动画学习
一、基础知识
CAAnimation是所有动画类的父类,它是一个抽象类,不能够直接使用应该使用它的子类
类的说明
- 能用的动画类只有 4 个子类
CABasicAnimation
CAKeyframeAnimation
CATransition
-
CAAnimationGroup
①CABasicAnimation 通过设定起始点,终点,时间,动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation ②CAKeyframeAnimation Keyframe顾名思义就是关键点的frame,你可以通过设定CALayer的始点、中间关键点、终点的frame,时间,动画会沿你设定的轨迹进行移动 ③CAAnimationGroup Group也就是组合的意思,就是把对这个Layer的所有动画都组合起来。 ④CATransition 这个就是苹果帮开发者封装好的一些动画
二、CABasicAnimation
-
常见属性:
duration: 动画持续时间 repeatCount: 动画重复次数 repeatDuration: 设置动画的时间,在该段时间内动画一直执行,不记次数 timingFunction: 动画的变化速度 fillMode: 动画在开始和结束时的动作,默认只是kCAFillModeRemoved beginTime: 设置动画开始执行时间 autoreverses: 动画结束时是否执行逆动画 fromValue: 所改变属性的起始值 toValue: 所改变属性的起始值
一些常用的aniamtionWithKeyPath的值
值 | 说明 | 使用形式 |
---|---|---|
transform.translation | 平移变换 | @(100) |
transform.translation.x | 沿x轴平移 | @(100) |
transform.translation.y | 沿y轴平移 | @(100) |
transform.scale | 比例转化 | @(0.8) |
transform.scale.x | 宽的比例 | @(0.8) |
transform.scale.y | 高的比例 | @(0.8) |
transform.rotation.x | 围绕x轴旋转 | @(M_PI) |
transform.rotation.y | 围绕y轴旋转 | @(M_PI) |
transform.rotation.z | 围绕z轴旋转 | @(M_PI) |
position | 位置改变 | [NSValue valueWithCGPoint(100,100)] |
opacity | 透明度 | @(0.7) |
backgroundColor | 背景颜色的变化 | [UIColor redColor].CGColor |
bounds | 大小的变化,中心点不变 | [NSValue valueWithCGSize:CGSizeMake(50, 50)] |
contents | 内容变化,比如UIImageView的图片 | [UIImage imageNamed:@"123.png"].CGImage |
下面实现一个简单的位移动画
CABasicAnimation *positionAniamtion = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];//沿x轴位移
positionAniamtion.fromValue = @100;
positionAniamtion.toValue = @150;
positionAniamtion.duration = 2.0;
positionAniamtion.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//动画完成后不删除
positionAniamtion.removedOnCompletion = NO;
//保持最新的状态
positionAniamtion.fillMode = kCAFillModeForwards;
[self.myView.layer addAnimation:positionAniamtion forKey:@"positionAniamtion"];
三、CAKeyframeAnimation
CAKeyframeAnimation是核心动画里面的帧动画,它提供了按照指定的一串值进行动画,好像拍电影一样的一帧一帧的效果
1、属性说明
values: 许多值组成的的数组用来进行动画的,只有在path属性值为nil的时候才有作用
path: 路径,可以指定一个路径,让动画沿着这个指定的路径执行
keyTimes:设置关键帧对应的时间点,范围:0-1。如果没有设置该属性,则每一帧的时间平分。
cacluationMode: 计算模式,主要针对的是每一帧的内容为一个坐标点的情况
rotationMode: 旋转样式
附上代码:
CAKeyframeAnimation *ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, NULL, CGRectMake(130, 200, 100, 100));
ani.path = path;
CGPathRelease(path);
ani.duration = 2.0;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
ani.repeatCount = MAXFLOAT;
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
[self.myView.layer addAnimation:ani forKey:nil];
四、CATransition
主要用于转场动画从一个场景以动画的形式过渡到另一个场景
1、属性说明
-
type: 转场动画的类型,一个自定义的转场动画中指定的过滤器属性
type的enum值: kCATransitionFade 渐变 kCATransitonMoveIn 覆盖 kCATransitionPush 推出 kCATransitionReveal 揭开
还有一些私有动画属性,不推荐使用,私有动画类型的值有cube、suckEffect、oglFlip、rippleEffect、pageCurl、pageUnCurl等等
附上代码:
CATransition *ani = [CATransition animation];
ani.type = kCATransitionFade;//过渡动画的类型
ani.subtype = kCATransitionFromTop;//过渡动画的方向
ani.duration = 1.5;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
ani.repeatCount = MAXFLOAT;
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
self.myView.backgroundColor = [UIColor redColor];
[self.myView.layer addAnimation:ani forKey:nil];
-
subtype: 转场动画将要去往的方向
subtype的enum值: kCATransitionFromRight 从右边 kCATransitionFromLeft 从左边 kCATransitionFromTop 从顶部 kCATransitionFromBottom 从底部
startProgress: 开始的位置进度
endPrograss: 结束的位置进度
系统API | 效果 | 是否支持方向 |
---|---|---|
KCATransitionFade | 淡出效果 | 是 |
KCATransitionMoveIn | 淡出效果 | 是 |
KCATransitionPush | 新视图移动到旧视图上 | 是 |
KCATransitionFade | 新视图退出旧视图 | 是 |
KCATransitionReveal | 移开旧视图显示新视图 | 是 |
cube | 淡出效果 | 是 |
suckEffect | 撕日历的效果 | 是 |
oglFlip | 翻转180°效果 | 是 |
rippleEffect | 涟漪效果 | 是 |
pageCurl | 向外翻书效果 | 是 |
pageUnCurl | 向内翻书效果 | 是 |
Transform3D的一些方法
1.偏移量的设置
CATransform3DMakeTranslation(x,y,z)
2.缩放的设置
CATransform3DMakeScale(x,y,z)
3.旋转设置
CATransform3DMakeRotation(angle,x,y,z)
4.叠加设置
CATransform3DMakeRotate(transform3D,angle,x,y,z)
transfrom3D 经过变换之后的 上述几个返回的都是transfrom3D类型的