IOs动画的那些事儿

时间 2019-11-24

标签 ios 动画那些事儿栏目 iOS 繁體版

原文原文链接

CoreAnimation介绍

1:Core Animation是直接做用在CALayer上的(并不是UIView上)很是强大的跨Mac OS X和iOS平台的动画处理API，Core Animation的动画执行过程都是在后台操做的，不会阻塞主线程。CAAnimation分为这4种，他们分别是：数组

CABasicAnimation－－－基本动画
CAKeyframeAnimation－－－关键帧动画
CAAnimationGroup－－－动画组
CATransition－－－转场动画

CABasicAnimation(基本动画)并发

属性说明:函数

keyPath ：要改变的属性名称（传字符串）动画

fromValue：keyPath相应属性的初始值ui

toValue：keyPath相应属性的结束值atom

动画过程说明：url

随着动画的进行，在长度为duration的持续时间内，keyPath相应属性的值从fromValue渐渐地变为toValuespa

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(0, self.view.bounds.size.height-250, self.view.bounds.size.width, 250)];
    myView.backgroundColor = [UIColor redColor];
    [self.view addSubview:myView];

    CATransition *animation = [CATransition animation];
    animation.duration = 1;
    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(0, self.view.bounds.size.height, self.view.bounds.size.width, 250)];
    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 == -1){  
        self.index = 8;  
    }  
      
    NSString *filename = [NSString stringWithFormat:@"%d.jpg", self.index + 1];  
    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 == 9) {  
        self.index = 0;  
    }  
  
    NSString *filename = [NSString stringWithFormat:@"%d.jpg", self.index + 1];  
    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