如何实现没有实现过的需求之文本动画

morpheus1984 发布于 2016年03月19日 | 更新于 2016年03月20日
无人欣赏。

最近写了一篇blog。里面谈了,我的一些感悟,希望大家能喜欢,不喜欢的也希望能假装喜欢。如有错漏,希望多多指正,这个不用假装。下面是原文:

如何实现自己没实现过的需求之文本动画


大家好,欢迎来到罪恶坑,我是非知名程序员,想跟大家说一段传统相声节目,额,对不起,说错了。想跟大家分享一点关于文本和动画的东西。这不是一篇纯血统,高、精、尖的技术文章,但依然希望有人能像喜欢混血美女一样喜欢。

前言

记得以前看到过一个很赞的文字效果的动画,类似于这样:

textanimation

当时被惊艳到了,最近偶然间又再次见到,依然还是那么喜欢。假设我们现在需要实现这样的需求。一般碰到需求我们都会去github上看看,俗称找轮子(github基本上只有你想不到的,就没有它没有的)。大多数情况下,没有问题。或者说有点小问题:轮子太多,无从下嘴。

选择

选轮子就像选姑娘,你不知道后面等着你的是什么 -----罪恶坑小程如是说

程序员江湖,每位大侠的武功和套路不尽一样,少林,武当,昆仑各门各派,百花争艳。实现轮子的思路自然也不一样。有的轮子高深晦涩难懂,功能强大,有的清晰明了,功能简单。不过有一点相同是,选错了就会被坑,只是坑大坑小问题。选轮子自然需要无比谨慎,既要匹配需求同时也要能在掉坑里的时候填上(废话,出bug了,你不填,谁填),要能hold住。然而填坑哪能那么简单呢,首先轮子实现思路,代码的结构,运行时序你要搞清楚吧,提供了哪些功能,没提供哪些功能,你要了解吧。基本上一个复杂点的轮子,研究下来就要好些时间了。这还不包括你开会,沟通,解bug,喝茶,倒水,上厕所,抽烟,骂娘,吐槽产品需求的时间。所以,妹子们,不要问我们今天加不加班,要问今天能不能在你睡前下班。(项目快上线了,小程不加班谁加班。嗯哼。)

创造

如果能用代码扮演上帝话,苍老师的量产不是问题,就看产品经理定的需求是拟物还是扁平。----罪恶坑小程如是说

既然选轮子的时间成本也不低,那有时候我们可以自己造一个轮子。其实写一个的好处也多,有成就感,写好了可以吹牛逼,写坏了填坑速度快。但问题是,以前没写过怎么办?没把握怎么办?比如我们现在需要实现上面的文字效果,但是又不知道怎么写,怎么办? 没关系,上帝创造世间也分了七步走,跟着这位带头大哥后面学,总不会错的。

开始

罗马不是一天建成的,毛片不是一次性拍完的 ----罪恶坑小程如是说

咦,好像扯得有点多了。对不起,现在开始正式拍(苍老师准备下,小程也准备下,Action):

1. 分解任务

通过简单观察我们可以马上知道,上面那个动画效果是通过对每个字符做动画完成的。而在iOS里,文本显示控件最常见和常用的是UILabel。而iOS的Explicit Animation有Properties Animation和keyframe Animation两种。

但是UILabel控件没有提供对其Text中每个字符的控制的功能,我们需要改造下。既然要对每个字符做动画,那少不了需要frameboundspositiontransform,这些属性。 这样看来我们需要两个武器:一个做排版功能的framework,不用说,肯定是TextKit。而另一个是能显示单个字符也拥有frameboundspositiontransform等属性的类,很自然,我们想到CATextLayer

2. 先解决文本布局

TextKit里主要是三个类NSTextStorageNSLayoutManagerNSContainer。它们一起帮组我们解决文字布局,排版的工作。

  • NSTextStorageNSMutableAttributedString的子类,持有文字内容,当字符发生改变时,通知NSLayoutManager对象

  • NSLayoutManager: 我们的男主角,从NSTextStorage里获取文字内容后,转换成对应的glyph,根据NSTextContainer的visible Region显示glyph。

  • NSContainer: 确定一个region来laid out text。这个region被NSLayoutManager用来决定哪里可以break lines

不过可惜UILabel没有这三个类作为自己的属性对象,我们需要自己解决:

class TextAnimationLabel: UILabel,NSLayoutManagerDelegate  {   
 let textStorage:NSTextStorage = NSTextStorage(string: "")
 let textLayoutManager:NSLayoutManager = NSLayoutManager()
 let textContainer:NSTextContainer = NSTextContainer() 
 }

除此以外我们还需要两个Array用来保存文本变换前的旧字符和变换后的新字符:

var oldCharacterTextLayers:[CATextLayer] = [] var newCharacterTextLayers:[CATextLayer] = []

因为我们需要用我们自己的textStorage对象,所以我们需要覆盖text和attributedText等属性。

override var text:String!{
get {
    return super.text
}
set {
    super.text = text
    let attributedText = NSMutableAttributedString(string: newValue)
    let textRange = NSMakeRange(0,newValue.characters.count)
    attributedText.setAttributes([NSForegroundColorAttributeName:self.textColor], range: textRange)
    attributedText.setAttributes([NSFontAttributeName:self.font], range: textRange)
    let paragraphyStyle = NSMutableParagraphStyle()
    paragraphyStyle.alignment = self.textAlignment
    attributedText.addAttributes([NSParagraphStyleAttributeName:paragraphyStyle], range: textRange)
    self.attributedText = attributedText
    } 
 }


   override var attributedText:NSAttributedString!{
      get {
          return self.textStorage as NSAttributedString
      }
      set{
          cleanOutOldCharacterTextLayers()
          oldCharacterTextLayers = Array(newCharacterTextLayers)
          textStorage.setAttributedString(newValue)
          self.startAnimation { () -> () in
       }
         self.endAnimation(nil)
      }
    }

当TextStorage的文本内容改变时,会触发一个通知send textLayoutManager以便重新布局排版。显然我们可以在排版布局完成后来为每个字符创建设置一个CATextLayer,并设置相应的frame以便正确的显示内容。我们可以有个函数来完成计算。并且layout finish完成时调用。

    //Mark:NSLayoutMangerDelegate
       func layoutManager(layoutManager: NSLayoutManager, didCompleteLayoutForTextContainer     textContainer: NSTextContainer?, atEnd layoutFinishedFlag: Bool) {
        calculateTextLayers()
        print("(textStorage.string)")
   }


   //MARK:CalculateTextLayer
   func calculateTextLayers()
   {
   }

接下来我们的主要想法,是找到text里每个character以及对应的glyph rect.然后用character和glyph rect创建CATextLayer

首先我们要有一个空数组用来存放新的CATextLayer。并且获取textStorage的attributedText。

    func calculateTextLayers()
   {
      newCharacterTextLayers.removeAll(keepCapacity:false)
      let attributedText = textStorage.string
   }

接下来我们要通过LayoutManger找到TextContainer的used Rect,这样方便我们可以让文本垂直居中,就像普通的Label那样。

func calculateTextLayers()  {
newCharacterTextLayers.removeAll(keepCapacity:false)
let attributedText = textStorage.string
let wordRange = NSMakeRange(0, attributedText.characters.count)
    let attributedString = self.internalAttributedText();
    let layoutRect = textLayoutManager.usedRectForTextContainer(textContainer)
    var index = wordRange.location
    let totalLength = NSMaxRange(wordRange)
    while index < totalLength {
            ...
     }
}

现在我们开始迭代处理文本里的每个字符,创建一个glyphRange 并且用这个glyphRange找到对应的character,然后我们将glyph index丢给LayoutManager得到textContainer,再用container和glyphRange取得glyphRect(这里需要注意下kerning的问题)。

let glyphRange = NSMakeRange(index, 1)
let characterRange = textLayoutManager.characterRangeForGlyphRange(glyphRange,  actualGlyphRange: nil)
let textContainer = textLayoutManager.textContainerForGlyphAtIndex(index, effectiveRange: nil)
var glyphRect = textLayoutManager.boundingRectForGlyphRange(glyphRange, inTextContainer:      textContainer!)

最终我们还需要注意的就是glyph的kerning,如果kerningRange.location == index,我们需要将前一个textLayer取出来调整其Rect的宽度至新的glyphRect的最右边,保证glyph不会被裁切掉(可以对比下面两张图片)

screen shot 2016-03-18 at 1 24 31 am

screen shot 2016-03-18 at 1 24 50 am

    let kerningRange = textLayoutManager.rangeOfNominallySpacedGlyphsContainingIndex(index)
    if kerningRange.location == index && kerningRange.length > 1 {
            if newCharacterTextLayers.count > 0 {
                //如果前一个textlayer的frame.size.width不变大的话,当前的textLayer会遮挡住字体的一部分,比如“You”的Y右上角会被切掉一部分
                 let previousLayer = newCharacterTextLayers[newCharacterTextLayers.endIndex - 1]
                 var frame = previousLayer.frame
                 frame.size.width += CGRectGetMaxX(glyphRect) - CGRectGetMaxX(frame)
                 previousLayer.frame = frame
         }
    }

这里关于kerning和glyph要多说一点。先来说下glyph,简单来说glyph是表示一个character的具体样式,但他们却不是一一对应的关系,比如一个字母"A"可以有不同的写法来表示例如: screen shot 2016-03-18 at 8 47 32 pm

除此以外,还有这种情况:

screen shot 2016-03-18 at 8 56 45 pm

上面是的"ff"虽然是两个character,但是glyph却是一个。 不过不用担心,强大LayoutManager提供了两个方法帮助我们通过一个找到对应另外那个。

func characterIndexForGlyphAtIndex(_ glyphIndex: Int) -> Int
func glyphIndexForCharacterAtIndex(_ charIndex: Int) -> Int

现在我们说下kerning。通常,在水平排布的文本中,glyph都是一个挨着一个放置的,但是在某些时候为了让文本的可读性更好,看上去更加优雅美观,一个字形和另外一个字形之间可能会稍微的错位下,比如下面这种情况:

screen shot 2016-03-18 at 9 14 35 pm 这也是上面为什么”Y“会出现显示不全的原因了。

接下来就比较简单了,创建Textlayer,设置垂直居中,添加到数组当中,index+= characterRange.length,开始下次循环

glyphRect.origin.y += (self.bounds.size.height/2)-(layoutRect.size.height/2)
let textLayer = CATextLayer(frame: glyphRect, string:     attributedString.attributedSubstringFromRange(characterRange));
layer.addSublayer(textLayer);
newCharacterTextLayers.append(textLayer);
index += characterRange.length

3. 动画实现

上面我们解决了字符排版的问题,接下来动画的实现就相对的容易了,仔细观察那个动画,很容易得出主要是对opacitytransform两个属性做属性动画,opacity让每个字体逐渐显示和逐渐消失,而transform则做了两种变形,一种是往下移动,另外一种是旋转。用CABasicAnimation可以解决单个属性动画,而CAAnimationGroup则帮我们解决多个动画叠加的复合效果。

func groupAnimationWithLayerChanges(old olderLayer:CALayer, new newLayer:CALayer) -> CAAnimationGroup? {

    var animationGroup:CAAnimationGroup?
    var animations:[CABasicAnimation] = [CABasicAnimation]()

    if !CATransform3DEqualToTransform(olderLayer.transform,
    newLayer.transform) {
         let basicAnimation = CABasicAnimation(keyPath: "transform")
         basicAnimation.fromValue = NSValue(CATransform3D: olderLayer.transform)
         basicAnimation.toValue = NSValue(CATransform3D: newLayer.transform)
         animations.append(basicAnimation)
         }

    if olderLayer.opacity != newLayer.opacity {
       let basicAnimation = CABasicAnimation(keyPath: "opacity")
       basicAnimation.fromValue = olderLayer.opacity
       basicAnimation.toValue = newLayer.opacity
       animations.append(basicAnimation)
       }

    if animations.count > 0 {
       animationGroup = CAAnimationGroup()
       animationGroup!.animations = animations
     }
   }

这里需要注意一个问题,就是隐式动画的问题,Core Animation基于一个假说,就是屏幕上的任何东西都可以(或者可能)做动画,我们平时在写代码时应该有这种印象就是你只是layer设置了一个值,没有添加动画,但是你会看到一个平滑过渡的显示效果而不是非常突兀的变化。这就是隐式动画。当我们改变一个属性时,Core Animation帮我们做了一个动画,动画时间取决于当前NSTransaction的设置,而动画类型取决于图层行为。

这里有个有趣的东西,多说一点,就是当我们对UIView关联的图层做动画而不是一个单独的图层做动画,比如

func changeColor()
{
    CATransaction.begin();
    CATransaction.setAnimationDuration(1.0)
    CGFloat red = CGFloat(arc4random() / (CGFloat)INT_MAX);
    CGFloat green = CGFloat(arc4random() / (CGFloat)INT_MAX);
    CGFloat blue = CGFloat(arc4random() / (CGFloat)INT_MAX);
    self.layerView.layer.backgroundColor = UIColor.(colorWithRed:red green:green blue:blue alpha:1.0).CGColor;
    CATransaction.commit();
}

图层的颜色瞬间切换到新的值,而不是之前的平滑过渡,隐式动画似乎给关闭了。 我们知道UIView和CALayer最重要的关系就是UIView是CALayer的delegate, 当我们改变CALayer的属性时,它会调用 func actionForKey(_ event: String) -> CAAction? 这个方法,接下来发生的事情在官方文档里都有写,实际上是如下几步:

  • If the layer has a delegate that implements the actionForLayer:forKey: method, the layer calls that method. The delegate must do one of the following:

    1. Return the action object for the given key.
    
    2. Return the NSNull object if it does not handle the action.
    
  • The layer looks in the layer’s actions dictionary for a matching key/action pair.

  • The layer looks in the style dictionary for an actions dictionary for a matching key/action pair.
  • The layer calls the defaultActionForKey: class method to look for any class-defined actions.

UIView作为它关联图层的Delegate,实现了 actionForLayer(_ layer: CALayer, forKey event: String) -> CAAction? ,当不在一个动画块中,UIView返回nil,而在动画块中则返回一个非空值

print("OutSide:(self.view.actionForLayer(self.view.layer, forKey: "backgroundColor"))")
UIView.beginAnimations(nil, context: nil)
print("InSide:(self.view.actionForLayer(self.view.layer,
forKey: "backgroundColor"))")
UIView.commitAnimations()

显示结果如下

OutSide:Optional(<null>)
InSide:Optional(<CABasicAnimation: 0x7f7f93ff81b0>)

当然返回nil并不是禁用隐式动画的唯一方法,下面这样也行

CATransaction.setDisableActions(true)

那为什么说这个问题呢?因为我们在对每个字符做动画的时候需要先将隐式动画关闭,否者将会做两次动画,比如下面这样:

closeimplicitanimation

那么,我们先生成一份oldlayer,然后改变相应的属性,生产新的newLayer。然后创建相应的动画组,添加显式动画。

let olderLayer = animationObjc.animatableLayerCopy(layer)
CATransaction.begin()
CATransaction.setDisableActions(true)
newLayer = effectAnimationClosure(layer: layer)
CATransaction.commit()
var animationGroup:CAAnimationGroup?
animationGroup = groupAnimationWithLayerChanges(old: olderLayer, new: newLayer!)
layer.addAnimation(textAniamtionGroup, forKey: textAnimationGroupKey)

收工

好了,当上面所有的工作完成之后,就是我们最开始看到的那个效果,代码已经上传github,你可以从这里下载。其实这个demo里实现的label还有很大优化的空间。比如支持多种类型的动画效果,动画效果可配置等等。这是我接下来打算做的事情。 本人才疏学浅,错漏难免,欢迎大家批评指正。如果你发现bug,可以提个pull request。如果你有更好地思路也请告诉我,让我进步,我请你喝咖啡 :)。 这是我的微信号(未完结,请往下看):

wechat

最后

不知不觉工作许多年了,这几年萝莉变成了姑娘,姑娘变成了孩子妈。大家从QQ空间杀到朋友圈。从晒女朋友,到晒结婚照继而到晒娃。这几年鸣人同志都不负众望当上了火影(丫也不请吃饭)。大家都在发生变化。 学会开始写点东西分享可能是我想要的一个变化。

本来作为非知名程序员,平时都是自己上github玩,自认为比起一干牛人既没本领可以提振民心士气,又没有独门绝技可以分享。直到我收到了一封来自组织的信。

最近我加入了一个公会,里面云集了各类高手,轻功,内力,暗器,大家各有所长,时不时分享下自己的看家本领。还是那句老话,不看不知道,一看吓一跳。世界还是外面的大,姑娘还是城里的靓。在群里,大家都很积极活跃,学习氛围异常的好。其实自打做起程序员起,这么多年来,虽然生性慵懒,但是自学却未敢放下,毕竟逆水行舟,不进则退。不可否认的是一个人的学习是很苦闷无聊的,但一群人陪着你一起苦闷无聊也是很欣慰的。

最后我想引用那封邮件里面的话来表达下我对公会的看法:

这个社群的意义证明了,在互联网时代,依然有这么多人愿意为知识的积累和个人的成长付费,知识本身的价值得到重新的认知,人们以一种去中心化的方式连接起来,P2P 的创作和分享,可能会让知识和技能的积累、传播达到了一种新的高度、深度和广度

我想一贯懒散的我为何突然想写这么个blog可能也是因为这个,毕竟知识的受益者永远是那些积极参与学习并持续思考的人。

额,最后想说的是,是的,那段引用的文字你没看错,这是个需要付费的群,免费时代的付费群,它叫攻城狮之路

知识是很昂贵的,我一直这么认为。另外,其实这是篇硬广。

共4条回复
tinyfool 回复于 2016年03月19日

写得不错,可惜不是贴原文

morpheus1984 回复于 2016年03月19日

1楼 @tinyfool 原文已经贴了。想说个事情,就是我用mou编辑,预览没什么问题,贴到站里,发现代码部分显示不对,不得已又重新编辑,很麻烦。这是什么原因呢?markdown语法应该没问题的,因为用别的编辑器预览,都是OK的。

tinyfool 回复于 2016年03月19日

2楼 @morpheus1984 具体点,哪里有问题?

morpheus1984 回复于 2016年03月20日

3楼 @tinyfool 代码块显示。比如:

``` code

```

我原文虽然这么写,贴上了去显示不对,后来就用编辑工具栏提供的“贴代码”按钮重新编辑了。

登录 或者 注册
相关帖子