动画学习篇（一）

动画学习

一、基础知识

层次图

CAAnimation是所有动画类的父类，它是一个抽象类，不能够直接使用应该使用它的子类

动画类

类的说明

1. 能用的动画类只有 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类型的