[译] Animating text layers using CoreAnimation and CoreText frameworks in iOS SDK

转载 2016年05月30日 14:00:25

原文地址: Animating text layers using CoreAnimation and CoreText frameworks in iOS SDK


4月13号 使用iOS SDK中的CoreAnimation和CoreText实现文本层动画

CoreAnimation是一个非常强大的框架。通过使用CABasicAnimationCAKeyFrameAnimation或者CAAnimationGroup,我们可以创建惊艳的用户体验来,同时基本上是没有什么限制的。仅仅取决于我们想要在屏幕上展示什么和它是怎么交互的。事实证明,CoreAnimation也可以和一些其他的框架(如CoreGraphics或者CoreText)组合使用,这也给了开发者创造更加惊艳的动画的能力。使用CoreTextCoreAnimation我们可以给任何指定字体类型和字体大小的文本添加动画。在这篇文章中我会展示一种方式如何做到这样。

CoreText基础

首先,让我向大家展示一下CoreText的基础。为了给文本添加动画,我们必须知道线条(line)和象形符号(glyph)是什么,这会帮助我们理解从一个文本生成一条路径(path)的整个过程。苹果已经为我们奠定了CoreText的基础知识。所有的这些都可以在下面看到。下面是我收集的最重要的信息。


在此层次结构的顶部是frame setter对象。带有属性的字符串和图形路径作为输入。一个frame setter生成文本的一个或者多个frame。每一个frame对象都代表一个段落。要生成frameframe setter调用一个typesetter对象。当一个frame setter奠定一个特定的frame的时候,它适用于段落样式,包括对齐方式,制表位,或者行距等属性。typesetter将这些带有属性的字符串中的字符转换成象形字符(glyphs),同时也适合那些象形字符(glyphs)形成填充文字框的线条。

每一个frame对象包含段落的线对象,它代表一个段落中文本的一行。一个frame对象可能只包含一个单一的长line对象,也可能包含一系列的line。line对象在frame设置时期被typesetter创建。每一个line对象包含一组象形字符运行(glyph run)对象。一个象形字符运行(glyph run)是一组共享相同属性和方向的连续象形字符(glyph)。typesetter创建象形字符运行(glyph run)就像它从字符串、属性和字体对象生产line一样。这意味着,一个line构成一个或者多个象形字符运行(glyph run)。在层次结构的尾部是通常代表单个文本字符的象形字符(glyph)对象。经过我们对CoreText的基本熟悉,我们现在可以文本层动画了。

Animating text layer

为了给文本层添加动画,我们需要将其转换成CGPath对象。首先我们必须创建我们想要添加动画的带属性的字符,然后我们为了得到象形字符运行(glyph run)不得不从这个字符串中创建一个line对象。下面的代码展示了我们如何实现这些目的:

let attrString  = NSAttributedString(string: text, attributes: [kCTFontAttributeName as String : font])
let line        = CTLineCreateWithAttributedString(attrString)
let runArray    = CTLineGetGlyphRuns(line)

这里我们将所有的象形字符运行(glyph run)保存在runArray中。我们通过这个数组循环,并且从每一个象形字符运行(glyph run)来看,我们可以得到这些字体,以及所有相应的象形字符(glyph)。现在我们可以通过遍历所有的象形字符(glyph)来选出特定的象形字符(glyph)对象。当我们有了这个对象,我们可以计算它的位置,并使用CTFontCreatePathForGlyph函数将其转换成path对象。通过拥有一个路径就知道它的位置,我们就可以创建一个有象形字符(glyph)路径组合而成的总体路径。下面的伪代码显示了整体算法:

%For each glyph run
for runIndex in 0..<CFArrayGetCount(runArray) {
     let runFont = %Get a font from a single glyph

     %For each glyph in a single glyph run
     for runGlyphIndex in 0..<CTRunGetGlyphCount(run) {
                var glyph    = %Get a glyph
                var position = %Get glyph’s position

                %Get a letter path from a single glyph
                let letter = CTFontCreatePathForGlyph(runFont, glyph, nil)
                 %Make a translation to a desired position
                var t = CGAffineTransformMakeTranslation(position.x, position.y)
                 %Add a single letter path to the whole path  
                CGPathAddPath(letters, &t, letter)
            }
     }

之后我们已经将我们的文本转换成path对象,并将其添加到路径层,我们就可以使用下面代码简单添加动画了:

let pathAnimation       = CABasicAnimation(keyPath: "strokeEnd")
pathAnimation.duration  = duration
pathAnimation.fromValue = 0.0
pathAnimation.toValue   = 1.0
pathAnimation.delegate  = self
pathLayer?.addAnimation(pathAnimation, forKey: "strokeEnd")

为了达到给文本层添加动画的目的,一个VRMTextAnimator类被创建了。这个类和示范文本层动画的示例工程在这里可以找到。

为了使用这个类,你不得不使用带有一个reference view的初始化方式init(referenceView:)``初始化。reference view是一种类型的视图,其中我们执行文本动画。VRMTextAnimator有两个关键属性,animationLayerpathLayer。第一个是我们要执行动画的CALayer对象,第二个是CAShapeLayer对象,它存储从我们之前设定的文字创造了一个CGPath对象。这个类也有三个可设置的属性:字体名称/fontName,字体尺寸/fontSizetextToAnimate。如果我们想要动画一个特定的文本与他的字体和字体大小,我们需要设置这些属性,VRMTextAnimator`也有一个代理对象,可以通知我们动画的起点和终点。


在这个项目中,有两种类型的文本层动画。第一种动画是简单的开始按钮触发的,第二种是通过滑块控制的。事实证明,我们可以设置它的speedfromValuetoValuedurationtimeOffset属性。如果我们设置fromValue为0,toValue为1,duration为1,同时我们正在动画pathLayer对象的strokeEnd属性,我们就可以通过设置pathLayertimeOffset属性来绘制文本轮廓的相应部分。



文/上天遁地(简书作者)
原文链接:http://www.jianshu.com/p/1780bb27ce8f
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
DEMO的 githup下载地址:https://github.com/VormLab/VRMTextAnimator

相关文章推荐

MKNetworkkit uses features only available in iOS SDK 4.0 and later

导入第三方库MKNetworkKit出错 MKNetworkKit uses features only available in iOS SDK 4.0 and later报错解决方案 ...

MKNetworkKit uses features only available in iOS SDK 4.0 and later报错解决方案

MKNetworkKit uses features only available in iOS SDK 4.0 and later报错解决方案 MKNetworkKit是一个非常优秀的网络请求框架...

MKNetworkKit uses features only available in iOS SDK 4.0 and later报错解决方案 --- 有我的一点思想

转学长的博客 ------ 其实我自己也是有些博客的:请看我的博客 :-- 我的关于MKNetWorkKit想法   -------一下是我转载的内容--------博主是...

ios SDK开发之关于CoreAnimation的一些注意点总结

关于UIView animation,很多读者相信非常喜欢用animation block的动画API,如下: Animating Views with Blocks + animateWithDu...

Animating Views Using Scenes and Transitions - Applying a Transition

In the transitions framework, animations create a series of frames that depict a change between the ...

使用Scenes和Transitions执行动画 -- Animating Views Using Scenes and Transitions

当用户通过键盘输入或者触发其他事件时界面需要做出变化。比如,某个Activity包含一个搜索框,当用户输入数据并提交的时候搜索框需要隐藏同时搜索的结果也跟着显示出来。 在这种情况下要做出连续的视觉效果...

Animating Views Using Scenes and Transitions ? - Creating Custom Transitions

A custom transition enables you to create an animation that is not available from any of the built-i...

Animating Views Using Scenes and Transitions - Creating a Scene

Scenes store the state of a view hierarchy, including all its views and their property values. The t...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[译] Animating text layers using CoreAnimation and CoreText frameworks in iOS SDK
举报原因:
原因补充:

(最多只允许输入30个字)