文档章节

[iOS Animation]-CALayer 定时器动画演示一

浩浩老师
 浩浩老师
发布于 2015/09/18 15:27
字数 2114
阅读 50
收藏 1

定时器的动画

我可以指导你,但是你必须按照我说的做。 -- 骇客帝国

在第10章“缓冲”中,我们研究了CAMediaTimingFunction,它是一个通过控制动画缓冲来模拟物理效果例如加速或者减速来增强现实感的东西,那么如果想更加真实地模拟物理交互或者实时根据用户输入修改动画改怎么办呢?在这一章中,我们将继续探索一种能够允许我们精确地控制一帧一帧展示的基于定时器的动画。

定时帧

动画看起来是用来显示一段连续的运动过程,但实际上当在固定位置上展示像素的时候并不能做到这一点。一般来说这种显示都无法做到连续的移动,能做的仅仅是足够快地展示一系列静态图片,只是看起来像是做了运动。

我们之前提到过iOS按照每秒60次刷新屏幕,然后CAAnimation计算出需要展示的新的帧,然后在每次屏幕更新的时候同步绘制上去,CAAnimation最机智的地方在于每次刷新需要展示的时候去计算插值和缓冲。

在第10章中,我们解决了如何自定义缓冲函数,然后根据需要展示的帧的数组来告诉CAKeyframeAnimation的实例如何去绘制。所有的Core Animation实际上都是按照一定的序列来显示这些帧,那么我们可以自己做到这些么?

NSTimer

实际上,我们在第三章“图层几何学”中已经做过类似的东西,就是时钟那个例子,我们用了NSTimer来对钟表的指针做定时动画,一秒钟更新一次,但是如果我们把频率调整成一秒钟更新60次的话,原理是完全相同的。

我们来试着用NSTimer来修改第十章中弹性球的例子。由于现在我们在定时器启动之后连续计算动画帧,我们需要在类中添加一些额外的属性来存储动画的fromValuetoValueduration和当前的timeOffset(见清单11.1)。

清单11.1 使用NSTimer实现弹性球动画

复制代码

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;
@property (nonatomic, strong) UIImageView *ballView;
@property (nonatomic, strong) NSTimer *timer;
@property (nonatomic, assign) NSTimeInterval duration;
@property (nonatomic, assign) NSTimeInterval timeOffset;
@property (nonatomic, strong) id fromValue;
@property (nonatomic, strong) id toValue;@end@implementation ViewController- (void)viewDidLoad
{
    [super viewDidLoad];    //add ball image view
    UIImage *ballImage = [UIImage imageNamed:@"Ball.png"];
    self.ballView = [[UIImageView alloc] initWithImage:ballImage];
    [self.containerView addSubview:self.ballView];    //animate    [self animate];
}- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{    //replay animation on tap    [self animate];
}float interpolate(float from, float to, float time)
{    return (to - from) * time + from;
}- (id)interpolateFromValue:(id)fromValue toValue:(id)toValue time:(float)time
{    if ([fromValue isKindOfClass:[NSValue class]]) {        //get type
        const char *type = [(NSValue *)fromValue objCType];        if (strcmp(type, @encode(CGPoint)) == 0) {
            CGPoint from = [fromValue CGPointValue];
            CGPoint to = [toValue CGPointValue];
            CGPoint result = CGPointMake(interpolate(from.x, to.x, time), interpolate(from.y, to.y, time));            return [NSValue valueWithCGPoint:result];
        }
    }    //provide safe default implementation
    return (time < 0.5)? fromValue: toValue;
}float bounceEaseOut(float t)
{    if (t < 4/11.0) {        return (121 * t * t)/16.0;
    } else if (t < 8/11.0) {        return (363/40.0 * t * t) - (99/10.0 * t) + 17/5.0;
    } else if (t < 9/10.0) {        return (4356/361.0 * t * t) - (35442/1805.0 * t) + 16061/1805.0;
    }    return (54/5.0 * t * t) - (513/25.0 * t) + 268/25.0;
}- (void)animate
{    //reset ball to top of screen
    self.ballView.center = CGPointMake(150, 32);    //configure the animation
    self.duration = 1.0;
    self.timeOffset = 0.0;
    self.fromValue = [NSValue valueWithCGPoint:CGPointMake(150, 32)];
    self.toValue = [NSValue valueWithCGPoint:CGPointMake(150, 268)];    //stop the timer if it's already running    [self.timer invalidate];    //start the timer
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1/60.0
                                                  target:self
                                                selector:@selector(step:)
                                                userInfo:nil
                                                 repeats:YES];
}- (void)step:(NSTimer *)step
{    //update time offset
    self.timeOffset = MIN(self.timeOffset + 1/60.0, self.duration);    //get normalized time offset (in range 0 - 1)
    float time = self.timeOffset / self.duration;    //apply easing
    time = bounceEaseOut(time);    //interpolate position
    id position = [self interpolateFromValue:self.fromValue
                                     toValue:self.toValue
                                  time:time];    //move ball view to new position
    self.ballView.center = [position CGPointValue];    //stop the timer if we've reached the end of the animation
    if (self.timeOffset >= self.duration) {
        [self.timer invalidate];
        self.timer = nil;
    }
}@end

复制代码

 

很赞,而且和基于关键帧例子的代码一样很多,但是如果想一次性在屏幕上对很多东西做动画,很明显就会有很多问题。

NSTimer并不是最佳方案,为了理解这点,我们需要确切地知道NSTimer是如何工作的。iOS上的每个线程都管理了一个NSRunloop,字面上看就是通过一个循环来完成一些任务列表。但是对主线程,这些任务包含如下几项:

  • 处理触摸事件

  • 发送和接受网络数据包

  • 执行使用gcd的代码

  • 处理计时器行为

  • 屏幕重绘

当你设置一个NSTimer,他会被插入到当前任务列表中,然后直到指定时间过去之后才会被执行。但是何时启动定时器并没有一个时间上限,而且它只会在列表中上一个任务完成之后开始执行。这通常会导致有几毫秒的延迟,但是如果上一个任务过了很久才完成就会导致延迟很长一段时间。

屏幕重绘的频率是一秒钟六十次,但是和定时器行为一样,如果列表中上一个执行了很长时间,它也会延迟。这些延迟都是一个随机值,于是就不能保证定时器精准地一秒钟执行六十次。有时候发生在屏幕重绘之后,这就会使得更新屏幕会有个延迟,看起来就是动画卡壳了。有时候定时器会在屏幕更新的时候执行两次,于是动画看起来就跳动了。

我们可以通过一些途径来优化:

  • 我们可以用CADisplayLink让更新频率严格控制在每次屏幕刷新之后。

  • 基于真实帧的持续时间而不是假设的更新频率来做动画。

  • 调整动画计时器的run loop模式,这样就不会被别的事件干扰。

CADisplayLink

 CADisplayLink 是CoreAnimation提供的另一个类似于 NSTimer 的类,它总是在屏幕完成一次更新之前启动,它的接口设计的和 NSTimer 很类似,所以它实际上就是一个内置实现的替代,但是和 timeInterval 以秒为单位不同, CADisplayLink 有一个整型的 frameInterval 属性,指定了间隔多少帧之后才执行。默认值是1,意味着每次屏幕更新之前都会执行一次。但是如果动画的代码执行起来超过了六十分之一秒,你可以指定frameInterval为2,就是说动画每隔一帧执行一次(一秒钟30帧)或者3,也就是一秒钟20次,等等。

用 CADisplayLink 而不是 NSTimer ,会保证帧率足够连续,使得动画看起来更加平滑,但即使 CADisplayLink 也不能保证每一帧都按计划执行,一些失去控制的离散的任务或者事件(例如资源紧张的后台程序)可能会导致动画偶尔地丢帧。当使用NSTimer的时候,一旦有机会计时器就会开启,但是 CADisplayLink 却不一样:如果它丢失了帧,就会直接忽略它们,然后在下一次更新的时候接着运行。

计算帧的持续时间

无论是使用NSTimer还是 CADisplayLink ,我们仍然需要处理一帧的时间超出了预期的六十分之一秒。由于我们不能够计算出一帧真实的持续时间,所以需要手动测量。我们可以在每帧开始刷新的时候用 CACurrentMediaTime() 记录当前时间,然后和上一帧记录的时间去比较。

通过比较这些时间,我们就可以得到真实的每帧持续的时间,然后代替硬编码的六十分之一秒。我们来更新一下上个例子(见清单11.2)。

清单11.2 通过测量没帧持续的时间来使得动画更加平滑

复制代码

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;
@property (nonatomic, strong) UIImageView *ballView;
@property (nonatomic, strong) CADisplayLink *timer;
@property (nonatomic, assign) CFTimeInterval duration;
@property (nonatomic, assign) CFTimeInterval timeOffset;
@property (nonatomic, assign) CFTimeInterval lastStep;
@property (nonatomic, strong) id fromValue;
@property (nonatomic, strong) id toValue;@end@implementation ViewController

...- (void)animate
{    //reset ball to top of screen
    self.ballView.center = CGPointMake(150, 32);    //configure the animation
    self.duration = 1.0;
    self.timeOffset = 0.0;
    self.fromValue = [NSValue valueWithCGPoint:CGPointMake(150, 32)];
    self.toValue = [NSValue valueWithCGPoint:CGPointMake(150, 268)];    //stop the timer if it's already running    [self.timer invalidate];    //start the timer
    self.lastStep = CACurrentMediaTime();
    self.timer = [CADisplayLink displayLinkWithTarget:self
                                             selector:@selector(step:)];
    [self.timer addToRunLoop:[NSRunLoop mainRunLoop]
                     forMode:NSDefaultRunLoopMode];
}- (void)step:(CADisplayLink *)timer
{    //calculate time delta
    CFTimeInterval thisStep = CACurrentMediaTime();
    CFTimeInterval stepDuration = thisStep - self.lastStep;
    self.lastStep = thisStep;    //update time offset
    self.timeOffset = MIN(self.timeOffset + stepDuration, self.duration);    //get normalized time offset (in range 0 - 1)
    float time = self.timeOffset / self.duration;    //apply easing
    time = bounceEaseOut(time);    //interpolate position
    id position = [self interpolateFromValue:self.fromValue toValue:self.toValue
                                        time:time];    //move ball view to new position
    self.ballView.center = [position CGPointValue];    //stop the timer if we've reached the end of the animation
    if (self.timeOffset >= self.duration) {
        [self.timer invalidate];
        self.timer = nil;
    }
}@end

复制代码

 


本文转载自:http://www.cnblogs.com/daxiaxiaohao/p/4272955.html

浩浩老师
粉丝 1
博文 80
码字总数 0
作品 0
海淀
程序员
私信 提问
iO6 Programming pushing the limits 阅读笔记

目录 第一部分 iOS6新内容 第二部分 从每天工具中获取更多(介绍日常使用控件和框架的潜力) 第三部分 完成任务的正确工具(介绍不是那么常用的控件和框架) 第四部分 发挥到极限(深入理解i...

云飞扬v5
2015/11/09
56
0
GPU vs CPU in iOS

一直以来,我们做产品的时候并没有特别的去考虑CPU/GPU的使用,最近为了提升可视化功能的性能,发现合理使用GPU也是一个可以好好研究的部分,这里总结一下一些有用的信息。 中央处理器 CPU ...

雨_树
2018/07/10
0
0
iOS开发系列--让你的应用“动”起来

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jianxin160/article/details/47753223 --iOS核心动画 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动...

KenshinCui
2015/08/18
0
0
IOS开发UI篇--动画(Core Animation)总结

一、简介 IOS 动画主要是指Core Animation框架。官方使用文档地址为:Core Animation Guide。 Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架。Core Animation可以作用与动画...

lewis-180
2015/07/29
495
0
iOS开发系列--让你的应用“动”起来

概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画...

creeve
2014/10/26
676
0

没有更多内容

加载失败,请刷新页面

加载更多

Taro 兼容 h5 踩坑指南

最近一周在做 Taro 适配 h5 端,过程中改改补补,好不酸爽。 本文记录📝遇到的问题,希望为有相同需求的哥们👬节约点时间。 Taro 版本:1.3.9。 解决跨域问题 h5 发请求会报跨域问题,需...

dkvirus
53分钟前
3
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
今天
3
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
今天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
今天
19
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部