简单动画 (二) 之Core Animation

Core Animation 是iOS中一个比较重要的框架,许多炫酷动画和效果都可以用Core Animation 来实现,下面我们先简单的认识了解下Core Animation.

认识 Core Animation

在QuartzCore这个framwork 中提供了一下这些类


简单动画 (二) 之Core Animation_第1张图片

在Core Animation中提供了一个基本类 CAAnimation 通过查看文档我们可以看到一些方法和属性

@interface CAAnimation : NSObject

{@private  void *_attr; 

 uint32_t _flags;

}

/* Creates a new animation object. */

+ (instancetype)animation;

/* Animations implement the same property model as defined by CALayer. * See CALayer.h for more details. */

+ (nullable id)defaultValueForKey:(NSString *)key;

- (BOOL)shouldArchiveValueForKey:(NSString *)key;

/* A timing function defining the pacing of the animation. Defaults to * nil indicating linear pacing. */

@property(nullable, strong) CAMediaTimingFunction *timingFunction;

/* The delegate of the animation. This object is retained for the * lifetime of the animation object. Defaults to nil. See below for the * supported delegate methods. */

@property(nullable, strong) id delegate;

/* When true, the animation is removed from the render tree once its

* active duration has passed. Defaults to YES. */

@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;

@end

这个类是最基本的抽象类 ,主要提供了创建类方法 ,动画执行方法 以及是否在执行完成后移除等.

我们常用到的动画主要涉及到以下几个类

CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup 、CASpringAnimation

在文档往下继续查看 我们能看到更多的类,多层次继承关系

CAPropertyAnimation : CAAnimation

CABasicAnimation : CAPropertyAnimation

CAKeyframeAnimation : CAPropertyAnimation

CASpringAnimation : CABasicAnimation

CAAnimationGroup : CAAnimation

CATransition : CAAnimation


1    CABasicAnimation 的使用

  改变透明度

- (IBAction)baseClick:(id)sender {

CABasicAnimation* animation=[CABasicAnimation animationWithKeyPath:@"opacity"];

animation.fromValue=[NSNumber numberWithFloat:1.0];

animation.toValue=[NSNumber numberWithFloat:0.00];

//默认是NO  YES 表示重复循环

animation.autoreverses=YES;

animation.duration=1;

animation.repeatCount=10;//重复次数

animation.removedOnCompletion=NO;//执行完成后是否移除

animation.fillMode=kCAFillModeForwards;//效果可选择

/** Timing function names.

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);

NS_ASSUME_NONNULL_END

**/

animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

[self.baseBtn.layer addAnimation:animation forKey:@"alpha"];

}

效果


简单动画 (二) 之Core Animation_第2张图片



2   CATransition 的转场动画

之前我们就知道CATransition继承于CAAniamtion ,CATransition用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。


@interface CATransition : CAAnimation

@property(copy) NSString *type;  //动画过渡类型

@property(nullable, copy) NSString *subtype; //动画过渡方向

@property float startProgress;

@property float endProgress;

@property(nullable, strong) id filter;

@end

type的值解读对应常量

fade       淡入淡出    kCATransitionFade

push         推挤         kCATransitionPush

reveal       揭开         kCATransitionReveal

moveIn    覆盖          kCATransitionMoveIn

cube       立方体           私有API

suckEffect 吮吸           私有API

oglFlip         翻转           私有API

rippleEffect  波纹         私有API

pageCurl     反翻页          私有API

cameraIrisHollowOpen  开镜头    私有API

cameraIrisHollowClose   关镜头   私有API

过渡方向参数

kCATransitionFromRight      从右转场

kCATransitionFromLeft         从左转场

kCATransitionFromBottom    从下转场

kCATransitionFromTop          从上转场

上代码  imageView 放了一张女神王祖贤的照片

//转场动画

-(void)maketransAnimation

{

CATransition* trans=[CATransition animation];

trans.repeatCount=1000;

// trans.type= kCATransitionPush;

trans.type=@"oglFlip";

trans.subtype=kCATransitionFromRight;

trans.duration=1.2;

trans.autoreverses=YES;

[self.imageView.layer addAnimation:trans forKey:nil];

}


简单动画 (二) 之Core Animation_第3张图片

你可能感兴趣的:(简单动画 (二) 之Core Animation)