码迷,mamicode.com
首页 > 其他好文 > 详细

Core Animation

时间:2014-07-19 18:34:05      阅读:334      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   使用   os   art   

Core Anitmation 是什么??

•Core Animation是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍!
(使用之前要导入框架哦)添加QuartzCore.framework和引入对应的框架<QuartzCore/QuartzCore.h>
 
 
那使用Core Animation的基本步骤是什么??
1.初始化一个动画对象(CAAnimation)并设置一些动画相关属性
2.CALayer中很多属性都可以通过CAAnimation实现动画效果,包括:opacity、position、transform、bounds、contents等(可以在API文档中搜索:CALayer Animatable Properties)
3.添加动画对象到层(CALayer)中,开始执行动画
4.通过调用CALayer的addAnimation:forKey增加动画到层(CALayer)中,这样就能触发动画了。通过调用removeAnimationForKey可以停止层中的动画
5.Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程
 
下面我们现在来介绍一下动画类的祖宗类----CAAnimation
•CAAnimation是所有动画对象的父类,负责控制动画的持续时间和速度,是个抽象类,不能直接使用,应该使用它具体的子类
他都有那些属性呢?(红色代表来自CAMediaTiming协议的属性)
duration:动画的持续时间
repeatCount:重复次数,无限循环可以设置HUGE_VALF或者MAXFLOAT
repeatDuration:重复时间
–removedOnCompletion:默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,同时还要设置fillMode为kCAFillModeForwards
fillMode:决定当前对象在非active时间段的行为。比如动画开始之前或者动画结束之后
beginTime:可以用来设置动画延迟执行时间,若想延迟2s,就设置为CACurrentMediaTime()+2,CACurrentMediaTime()为图层的当前时间
–timingFunction:速度控制函数,控制动画运行的节奏
–delegate:动画代理
 
下面来看一个demo~
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    
    CGPoint point = [touch locationInView:self.view];
    [self moveToPoint:point];
    
}

-(void)moveToPoint:(CGPoint)point{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"] ;
    // 1.设置目的点
    animation.toValue =[NSValue valueWithCGPoint:point];
    // 2.设置动画时长
    animation.duration =0.5;
    // 3.设置完成后删除动画
    animation.removedOnCompletion = NO;
    // 4.设置模式为向前填充
    animation.fillMode = kCAFillModeBoth;
    // 5.设置速度模式为先慢后快
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    // 6.设置开始时长延后1秒
    animation.beginTime  =CACurrentMediaTime() + 1;
    // 7.将动画添加到Layer上开始执行
    [_redview.layer addAnimation:animation forKey:nil];

}

将上述代码插入到一视图控制器中,点屏幕上点击一下看看效果~

下面看一下fillMode是干啥的

•fillMode属性值(要想fillMode有效,最好设置removedOnCompletion = NO)
kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
kCAFillModeBackwards 在动画开始前,只需要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始。
kCAFillModeBoth 这个其实就是上面两个的合成,动画加入之后在开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态
 
•速度控制函数(CAMediaTimingFunction)
1.kCAMediaTimingFunctionLinear(线性):匀速
2.kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开
3.kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地
4.kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。
 
 艹刚才写了一个小时的博客不小心让我给点没了????
蛋疼屎
算了粘一下代码把,有时间再写????
#pragma mark 暂停动画
- (void)pause
{
    // 记录停止瞬间的时间偏移量,取出当前动画定格对应的事件
    CFTimeInterval time = [_redView.layer convertTime:CACurrentMediaTime() fromLayer:nil];
    // 利用图层的timeOffset记录暂停的时间偏移量
    _redView.layer.timeOffset = time;
    
    NSLog(@"%f", time);
    
    // 将速度设置为0,可以停止动画
    _redView.layer.speed = 0.0;
}

#pragma mark 继续动画
- (void)resume
{
    // 恢复时间量
    CFTimeInterval pauseTime = _redView.layer.timeOffset;
    // 取当前媒体时间
    CFTimeInterval time = CACurrentMediaTime();
    // 计算时间差值
    CFTimeInterval offset = time - pauseTime;
    NSLog(@"%f", offset);
   
    // 设置图层动画的起始时间
    _redView.layer.beginTime = offset;
    _redView.layer.timeOffset = 0;
    
    // 恢复速度为1
    _redView.layer.speed = 1.0;
}

// 用户抬起手指,才会执行,通常会针对touchesMove中的处理,做一些收尾工作
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    
}

#pragma mark - 动画代理方法
- (void)animationDidStart:(CAAnimation *)anim
{
    NSLog(@"动画开始 %@", NSStringFromCGPoint(_redView.center));
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    CABasicAnimation *animation = (CABasicAnimation *)anim;
    
    // 动画结束后,修正视图的位置
    CGPoint point = [animation.toValue CGPointValue];
    _redView.center = point;

    NSLog(@"动画结束 %@ %@", NSStringFromCGPoint(_redView.center), animation.toValue);
}

#pragma mark - 动画方法
#pragma mark 旋转动画
- (void)rotation
{
    
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    
    _redView.layer.anchorPoint = CGPointMake(1, 1);
    
    // 设置旋转角度,转360
    anim.toValue = @(2 * M_PI);
    // 要无限循环转动,指定一个非常大的数值
    // 对于无限循环的动画,需要处理动画累加的问题
    anim.repeatCount = HUGE_VALF;
//    anim.repeatCount = MAXFLOAT;
    
    // 如果要退出到后台,再次回复的时候继续执行动画,需要设置removedOnCompletion = NO
    anim.removedOnCompletion = NO;
    
    anim.duration = 1.0f;
    
    [_redView.layer addAnimation:anim forKey:@"myRotation"];
}

#pragma mark 缩放动画
- (void)scale
{
    // 1. 实例化
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    
    // 2. toValue
    anim.toValue = @(2.0);
    anim.repeatCount = 3;
    // 自动反向执行动画
    anim.autoreverses = YES;
    
    anim.duration = 0.3f;
    
    [_redView.layer addAnimation:anim forKey:nil];
}

 

Core Animation,布布扣,bubuko.com

Core Animation

标签:style   blog   color   使用   os   art   

原文地址:http://www.cnblogs.com/xyzaijing/p/3855024.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!