暂停、恢复CALayer 动画

简介:

CALayer都是实现了CAMediaTiming协议(或者叫做接口)。所以layer的动画有一个很有意思的属性speed。如果一个layer的动画速度变成0.0的时候,很显然这个动画就不再动了。设置layer的speed为0时,layer的动画暂停。speed属性设置为任意大于0的值时,动画回复。

要暂停一个动画时:

-(void)pauseLayer:(CALayer*)layer {
   CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
   layer.speed = 0.0;
   layer.timeOffset = pausedTime;
}

恢复一个动画:

复制代码
-(void)resumeLayer:(CALayer*)layer {
   CFTimeInterval pausedTime = [layer timeOffset];
   layer.speed = 1.0;
   layer.timeOffset = 0.0;
   layer.beginTime = 0.0;
   CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
   layer.beginTime = timeSincePause;
}
复制代码

比如你有这么一个在ImageView上执行的动画,你想让这个动画开始执行后点击按钮暂停,在点击按钮恢复就可以这样:

复制代码
CABasicAnimation *sizeAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
        sizeAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
        sizeAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.5f, 1.5f, 1.f)];
        sizeAnim.duration = .2f;
        sizeAnim.fillMode = kCAFillModeForwards;
        sizeAnim.removedOnCompletion = YES;
        sizeAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        [self.collectionImageView.layer addAnimation:sizeAnim forKey:@"size"];
        
        CAKeyframeAnimation *shakeAnim = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
        shakeAnim.values = @[@(M_PI/6), @(-M_PI/6),@(M_PI/6)/*, @(-M_PI/6)*/];
        shakeAnim.timingFunctions = @[[self getTiming:kCAMediaTimingFunctionLinear]
                                      , [self getTiming:kCAMediaTimingFunctionLinear]
                                      ,[self getTiming:kCAMediaTimingFunctionLinear]];
        shakeAnim.duration = .2f;
//        shakeAnim.beginTime = CACurrentMediaTime() + sizeAnim.duration;
        [self.collectionImageView.layer addAnimation:shakeAnim forKey:@"shake"];
复制代码

上面说的ImageView可以通过self.collectionImageView来访问。这里设置的执行时间都不是很长,在实验的时候最好把动画的执行时间设置的长点。

暂停&恢复的代码:

复制代码
static BOOL animationStoped = NO;
- (IBAction)animationAction:(id)sender {
    if (!animationStoped) {
        [self pauseLayer:self.collectionImageView.layer];
//        animationStoped = YES;
    }
    else{
        [self resumeLayer:self.collectionImageView.layer];
    }
    animationStoped = !animationStoped;
}
复制代码

 

欢迎加群互相学习,共同进步。QQ群:iOS: 58099570 | Android: 330987132 | Go:217696290 | Python:336880185 | 做人要厚道,转载请注明出处!
相关文章
|
2月前
|
前端开发 JavaScript
canvas系列教程07 ——捕获、拖拽、抛掷、缓动动画、弹性动画
canvas系列教程07 ——捕获、拖拽、抛掷、缓动动画、弹性动画
16 1
|
4月前
UIView的animateWithDuration动画不执行问题
UIView的animateWithDuration动画不执行问题
68 1
|
4月前
|
iOS开发 容器
在做动画的控件不触发手势事件问题及解决方案
在做动画的控件不触发手势事件问题及解决方案
28 0
|
C++
Qt图片定时滚动播放器+透明过渡动画
解决:[QWidget::paintEngine: Should no longer be called QPainter::begin: Paint device returned engine == 0, type: 1] 需要在哪个控件上绘制,就要在哪个控件类中重写 paintEvent() ,所以本项目 需要使用自定义的MyQLabel继承QLabel
118 0
|
XML 图形学 数据格式
Animation组合动画踩坑-实现循环播放动画,可控制次数
Animation组合动画踩坑-实现循环播放动画,可控制次数
SwiftUI—如何修改动画的播放速度和延迟时间
SwiftUI—如何修改动画的播放速度和延迟时间
292 0
SwiftUI—如何修改动画的播放速度和延迟时间
|
Dart 开发者
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )(三)
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )(三)
170 0
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )(三)
|
前端开发 图形学 Python
动画系统之2D动画
动画系统之2D动画
168 0
动画系统之2D动画
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )(一)
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )(一)
150 0