动画学习篇（一）
2017-09-13 本文已影响0人
我叫王可可
动画学习
一、基础知识
层次图
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类型的
