iOS Developer

QuartzCore 之 CAAnimation.h

2016-11-16  本文已影响254人  悟2023

摘要: 动画效果可以给用户提供流畅的用户体验,在iOS系统中,Core Animation提供了一定的API来实现一些动画效果。今天我们来学习下QuartzCore中 CAAnimation.h 类以及他的子类。

Apple官方提供CAAnimation继承关系

先来介绍下苹果提供的API,如下(通过这次也教大家如何查看Apple官方提供的 API)

#import <QuartzCore/CALayer.h>
#import <Foundation/NSObject.h>

@class NSArray, NSString, CAMediaTimingFunction, CAValueFunction;
@protocol CAAnimationDelegate;

NS_ASSUME_NONNULL_BEGIN
/************************* 动画基类 ***************************/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CAAnimation : NSObject
    <NSCoding, NSCopying, CAMediaTiming, CAAction>
{
@private
  void *_attr;
  uint32_t _flags;
}

/* 创建一个新的动画对象*/
+ (instancetype)animation;

/* Animations implement the same property model as defined by CALayer. */
+ (nullable id)defaultValueForKey:(NSString *)key;
- (BOOL)shouldArchiveValueForKey:(NSString *)key;

/*
/** 时间函数名**/
CA_EXTERN NSString * const kCAMediaTimingFunctionLinear
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);//(线性):匀速,给你一个相对静态的感觉
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseIn
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);(渐进):动画缓慢进入,然后加速离开
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseOut
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);(渐出):动画全速进入,然后减速的到达目的地
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseInEaseOut
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);//(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。
CA_EXTERN NSString * const kCAMediaTimingFunctionDefault
    CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);//默认,表示线性起搏
*/
@property(nullable, strong) CAMediaTimingFunction *timingFunction;
//动画代理。设置之后在相应时间会回调相应的代理方法
@property(nullable, strong) id <CAAnimationDelegate> delegate;
//默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillMode为kCAFillModeForwards .
@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;

@end
/* CAAnimation delegate 方法。 */
@protocol CAAnimationDelegate <NSObject>
@optional

//动画开始时的回调
- (void)animationDidStart:(CAAnimation *)anim;
//动画停止的回调,可以通过flag判断动画是否是完成还是暂停
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

@end
/********************* 属性动画类  ***************************/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CAPropertyAnimation : CAAnimation

/* 创建一个新的动画对象与其“keyPath”属性设置为“道路”。 */
+ (instancetype)animationWithKeyPath:(nullable NSString *)path;

/* 动画路径 */
@property(nullable, copy) NSString *keyPath;
/* 默认 NO */
@property(getter=isAdditive) BOOL additive;

@property(getter=isCumulative) BOOL cumulative;

@property(nullable, strong) CAValueFunction *valueFunction;

@end
/**************** 提供对单一帧动画的实现 ****************/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CABasicAnimation : CAPropertyAnimation
/*
 fromValue:keyPath相应属性的初始值
 toValue  :keyPath相应属性的结束值(絶対値)
 byValue  :相对起始值的改变量
*/
@property(nullable, strong) id fromValue;
@property(nullable, strong) id toValue;
@property(nullable, strong) id byValue;

@end
/**************** 普通的帧动画,可以定义动画路线 ****************/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CAKeyframeAnimation : CAPropertyAnimation

//里面的元素称为“关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧。
@property(nullable, copy) NSArray *values;
//可以设置一个CGPathRef / CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略。
@property(nullable) CGPathRef path;
//可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧对时间平均分配 .
@property(nullable, copy) NSArray<NSNumber *> *keyTimes;

/*
kCAMediaTimingFunctionLinear                  //线性
kCAMediaTimingFunctionEaseIn                  //淡入
kCAMediaTimingFunctionEaseOut                 //淡出
kCAMediaTimingFunctionEaseInEaseOut           //淡入淡出
kCAMediaTimingFunctionDefault                 //默认
*/
//这个属性用以指定时间函数,类似于运动的加速度,这是一个数组,你有几个子路径就应该传入几个元素。
@property(nullable, copy) NSArray<CAMediaTimingFunction *> *timingFunctions;

/*
const kCAAnimationLinear       //线性,默认
const kCAAnimationDiscrete     //离散,无中间过程,但keyTimes设置的时间依旧生效,物体跳跃地出现在各个关键帧上
const kCAAnimationPaced        //平均,keyTimes跟timeFunctions失效
const kCAAnimationCubic        //平均,同上
const kCAAnimationCubicPaced   //平均,同上
*/
//该属性决定了物体在每个子路径下是跳着走还是匀速走。
@property(copy) NSString *calculationMode;

@property(nullable, copy) NSArray<NSNumber *> *tensionValues;
@property(nullable, copy) NSArray<NSNumber *> *continuityValues;
@property(nullable, copy) NSArray<NSNumber *> *biasValues;

/* `rotationMode' strings. */
CA_EXTERN NSString * const kCAAnimationRotateAuto
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAAnimationRotateAutoReverse
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
@property(nullable, copy) NSString *rotationMode;

@end
/**************** 提供弹簧效果 (iOS9才引入的动画类)****************/
CA_CLASS_AVAILABLE (10.11, 9.0, 9.0, 2.0)
@interface CASpringAnimation : CABasicAnimation

//质量,影响图层运动时的弹簧惯性,质量越大,弹簧拉伸和压缩的幅度越大。默认为:1
@property CGFloat mass;

//弹簧刚度系数(劲度系数/弹性系数),刚度系数越大,形变产生的力就越大,运动越快。必须大于0.默认值为100。
@property CGFloat stiffness;

//阻尼系数,阻止弹簧伸缩的系数,阻尼系数越大,停止越快。必须大于或等于0.默认值为10。
@property CGFloat damping;

/*弹簧上的物体的初始速度。 
默认为0,表示一个不动的对象。 
负值表示物体远离弹簧附接点,
正值表示物体朝向弹簧附接点移动。*/
@property CGFloat initialVelocity;

/*返回结算时间
弹簧动画到停止时的估算时间,根据当前的动画参数估算*/
@property(readonly) CFTimeInterval settlingDuration;

@end

/************************* 提供渐变效果 ***************************/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CATransition : CAAnimation

/* 过渡效果类型:(私有 API)
cube                      //立方体翻滚效果
oglFlip                   //上下左右翻转效果
suckEffect                //收缩效果,如一块布被抽走(不支持过渡方向)
rippleEffect              //滴水效果(不支持过渡方向)
pageCurl                  //向上翻页效果
pageUnCurl                //向下翻页效果
cameraIrisHollowOpen      //相机镜 
*/
/*
 /* Common transition types. */
CA_EXTERN NSString * const kCATransitionFade
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);  //交叉淡化过渡(不支持过渡方向
CA_EXTERN NSString * const kCATransitionMoveIn
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);  //新视图移到旧视图上面
CA_EXTERN NSString * const kCATransitionPush
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);  //新视图把旧视图Push出去
CA_EXTERN NSString * const kCATransitionReveal
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);  //将旧视图移开,显示下面的新视图  
*/
//动画过渡类型
@property(copy) NSString *type;

/ * 过渡方向
/* Common transition subtypes. */
CA_EXTERN NSString * const kCATransitionFromRight
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);      //右边
CA_EXTERN NSString * const kCATransitionFromLeft
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);      //左边
CA_EXTERN NSString * const kCATransitionFromTop
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);      //上边
CA_EXTERN NSString * const kCATransitionFromBottom
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);      //下边
* /
//动画过渡方向
@property(nullable, copy) NSString *subtype;

//动画起点(在整体动画的百分比),值在[ 0,1 ]之间,默认0
@property float startProgress;
//动画终点(在整体动画的百分比),值在[ 0,1 ]之间,默认1
@property float endProgress;

//为动画添加一个可选的滤镜。
//如果指定,那么指定的filter必须同时支持x和y,否则该filter将不起作用。
//如果设置了filter,那么,为layer设置的type和subtype属性将被忽略。
//如果设置了filter,那么必须实现`inputImage', `inputTargetImage' and `inputTime' input keys, and the `outputImage' output key. Optionally it may support the `inputExtent' key,
@property(nullable, strong) id filter;

@end
/****************** 允许多个动画同时播放 ************************/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
//CAAnimation的子类,可以保存一组动画对象,将CAAnimationGroup对象加入层后,组中所有动画对象可以同时并发运行
@interface CAAnimationGroup : CAAnimation

//用来存储一组动画对象
@property(nullable, copy) NSArray<CAAnimation *> *animations;

@end

NS_ASSUME_NONNULL_END
1. C     = Class       表示 类
2. M     = Method      表示 方法  
3. P     = Property    表示 属性
4. f     = 

使用例子

CAKeyframeAnimation
1、values
NSValue *value0 = [NSNumber numberWithFloat:1.0]; //第一帧
NSValue *value1 = [NSNumber numberWithFloat:1.1]; //第二帧
NSValue *value2 = [NSNumber numberWithFloat:1.0]; //第三帧

CAKeyframeAnimation *trAnimation = 
[CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
trAnimation.values = @[value0, value1, value2];
trAnimation.duration = 0.6;
trAnimation.timingFunction = 
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[View.layer addAnimation:trAnimation forKey:nil];

2、path
CAKeyframeAnimation *animation = 
[CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.path = @"需要自己绘制路径(CGMutablePathRef / CGPathRef)";
animation.removedOnCompletion = NO;
animation.autoreverses = NO;
animation.duration = 1.0;
animation.repeatCount = 0;
animation.fillMode = kCAFillModeForwards;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[view.layer addAnimation:animation forKey:@"animateLayer"];
CAAnimationGroup
CAAnimationGroup *animation = [CAAnimationGroup animation];
animation.animations = @[trAnimation,theAnimation];
animation.duration = 1.0;
animation.repeatCount = 0;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[view.layer addAnimation:animation forKey:@"animateLayer"];
CABasicAnimation
CABasicAnimation *theAnimation = 
[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
theAnimation.duration = 1;
theAnimation.repeatCount = 0;
theAnimation.removedOnCompletion = FALSE;
theAnimation.fillMode = kCAFillModeForwards;
theAnimation.autoreverses = YES;
theAnimation.fromValue = [NSNumber numberWithFloat:0];
theAnimation.toValue = [NSNumber numberWithFloat:-64];
[view.layer addAnimation:theAnimation forKey:@"animateLayer"];
UIView *bgView = [[UIView alloc] init];
bgView.bounds = CGRectMake(0, 0, 100,100);
bgView.center = self.view.center;
[self.view addSubview:bgView];
    
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = CGRectMake(0, 0, 100, 100);
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:bgView.bounds];
shapeLayer.path = path.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 2.0f;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
[bgView.layer addSublayer:shapeLayer];
//@property CGFloat strokeStart;
//@property CGFloat strokeEnd;
CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnima.duration = 3.0f;
pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnima.toValue = [NSNumber numberWithFloat:1.0f];
pathAnima.fillMode = kCAFillModeForwards;
pathAnima.removedOnCompletion = NO;
[shapeLayer addAnimation:pathAnima forKey:@"strokeEndAnimation"];

如果animationWithKeyPath:方法创建对象,参数如下:

Structure Field Description
rotation.x The rotation, in radians, in the x axis.
rotation.y The rotation, in radians, in the y axis.
rotation.x The rotation, in radians, in the z axis.
rotation The rotation, in radians, in the z axis. This is identical to setting the rotation.z field.
scale.x Scale factor for the x axis.
scale.y Scale factor for the y axis.
scale.x Scale factor for the z axis.
scale Average of all three scale factors.
translation.x Translate in the x axis.
translation.y Translate in the y axis.
translation.x Translate in the z axis.
translation Translate in the x and y axis. Value is an NSSize or CGSize.
CASpringAnimation

。。。

CAPropertyAnimation

。。。

CATransition

CATransition *trAnimation = [CATransition animation];    
trAnimation.duration = 1.0;   
trAnimation.type = kCATransitionPush;    
trAnimation.subtype = kCATransitionFromTop;   
trAnimation.startProgress = 0.0;   
trAnimation.endProgress = 1.0;   
trAnimation.timingFunction = 
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];   
[View.layer addAnimation:trAnimation forKey:@"transition"];   

trAnimation.type 苹果公开的类型仅仅有四种类型分别是:

淡化、推挤、揭开、覆盖
NSString * const kCATransitionFade;
NSString * const kCATransitionMoveIn;
NSString * const kCATransitionPush;
NSString * const kCATransitionReveal;

trAnimation.subtype 苹果提供的类型有如下四种:

从右侧、从左侧、从顶部、从底部
NSString * const kCATransitionFromRight;
NSString * const kCATransitionFromLeft;
NSString * const kCATransitionFromTop;
NSString * const kCATransitionFromBottom;

对于trAnimation.type类型苹果还提供了一定的私有API分别如下:

立方体、吸收、翻转、波纹、翻页、反翻页、镜头开、镜头关
animation.type = @"cube"  
animation.type = @"suckEffect";   
animation.type = @"oglFlip"; 
animation.type = @"rippleEffect";  
animation.type = @"pageCurl";  
animation.type = @"pageUnCurl"  
animation.type = @"cameraIrisHollowOpen"; 
animation.type = @"cameraIrisHollowClose";
上一篇下一篇

猜你喜欢

热点阅读