iOS开发之核心动画

2016-04-27  本文已影响114人  搁浅的青蛙

Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常绚丽的动画效果,而且往往事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能.

所以在了解Core Animation之前,先要了解什么是CALayer

CALayer

在iOS中,你能看得见摸得着的东西基本上都是UIView,比如:按钮,文本标签等等;其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层

@property(nonatomic,readonly,retain) CALayer *layer; 

//宽度和高度
@property CGRect bounds;
//位置(默认指中点，具体由anchorPoint决定)
@property CGPoint position;
//锚点(x,y的范围都是0-1)，决定了position的含义
@property CGPoint anchorPoint;
//背景颜色(CGColorRef类型)
@property CGColorRef backgroundColor;
//形变属性
@property CATransform3D transform;
//边框颜色(CGColorRef类型)
@property CGColorRef borderColor;
//边框宽度
@property CGFloat borderWidth;
//圆角半径
@property CGColorRef borderColor;
//内容(比如设置为图片CGImageRef)
@property(retain) id contents;

UIView和CALayer的选择

通过CALayer，就能做出跟UIImageView一样的界面效果
既然CALayer和UIView都能实现相同的显示效果，那究竟该选择谁好呢？
其实，对比CALayer，UIView多了一个事件处理的功能。也就是说，CALayer不能处理用户的触摸事件，而UIView可以.
所以，如果显示出来的东西需要跟用户进行交互的话，用UIView；如果不需要跟用户进行交互，用UIView或者CALayer都可以.
当然，CALayer的性能会高一些，因为它少了事件处理的功能，更加轻量级.

position和anchorPoint

@property CGPoint position;
  1. 用来设置CALayer在父层中的位置
@property CGPoint anchorPoint;
  1. 称为“定位点”、“锚点”

隐式动画

[CATransaction begin];
[CATransaction setDisableActions:YES];
self.myview.layer.position = CGPointMake(10, 10);
[CATransaction commit];

Core Animation

Core Animation结构图Core Animation结构图

开发步骤

如果不是xcode5之后的版本，使用它需要先添QuartzCore.framework和引入对应的框架<QuartzCore/QuartzCore.h>

  1. 首先得有CALayer

CAAnimation

简介

#pragma mark 暂停CALayer的动画
-(void)pauseLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];

    // 让CALayer的时间停止走动
      layer.speed = 0.0;
    // 让CALayer的时间停留在pausedTime这个时刻
    layer.timeOffset = pausedTime;
}



#pragma mark 恢复CALayer的动画
-(void)resumeLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = layer.timeOffset;
    // 1. 让CALayer的时间继续行走
      layer.speed = 1.0;
    // 2. 取消上次记录的停留时刻
      layer.timeOffset = 0.0;
    // 3. 取消上次设置的时间
      layer.beginTime = 0.0;    
    // 4. 计算暂停的时间(这里也可以用CACurrentMediaTime()-pausedTime)
    CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    // 5. 设置相对于父坐标系的开始时间(往后退timeSincePause)
      layer.beginTime = timeSincePause;
}

动画填充模式

速度控制函数

动画代理方法

@interface NSObject (CAAnimationDelegate)

/* Called when the animation begins its active duration. */

- (void)animationDidStart:(CAAnimation *)anim;

/* Called when the animation either completes its active duration or
 * is removed from the object it is attached to (i.e. the layer). 'flag'
 * is true if the animation reached the end of its active duration
 * without being removed. */

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

@end

1. CAPropertyAnimation

CABasicAnimation

关键帧动画

CABasicAnimation可看做是只有2个关键帧的CAKeyframeAnimation

2. CAAnimationGroup

3. CATransition

类型字符串 效果说明 关键字 方向
fade 交叉淡化过渡 YES
push 新视图把旧视图推出去 YES
moveIn 新视图移到旧视图上面 YES
reveal 将旧视图移开,显示下面的新视图 YES
cube 立方体翻滚效果
oglFlip 上下左右翻转效果
suckEffect 收缩效果，如一块布被抽走 NO
rippleEffect 水滴效果 NO
pageCurl 向上翻页效果
pageUnCurl 向下翻页效果
facameraIrisHollowOpende 相机镜头打开效果 NO
cameraIrisHollowClose 相机镜头关闭效果 NO

使用UIView动画函数实现转场动画——单视图

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion;

使用UIView动画函数实现转场动画——双视图

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion;
上一篇下一篇

猜你喜欢

热点阅读