首页 > 代码库 > Core Animation

Core Animation

2024-07-12 22:01:19   227人阅读

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 =http://www.mamicode.com/[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 = http://www.mamicode.com/@(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 = http://www.mamicode.com/@(2.0);    anim.repeatCount = 3;    // 自动反向执行动画    anim.autoreverses = YES;        anim.duration = 0.3f;        [_redView.layer addAnimation:anim forKey:nil];}

 


联系
我们