Episode #210

Cool Text Effects - Part 2

12 minutes
Published on February 25, 2016

This video is only available to subscribers. Get access to this video and 497 others.

Continuing on from last time, we take our glyph layers and apply Core Animation, providing for some interesting effects including animating the stroke of each glyph path and applying a typing effect with transforms.

Episode Links

Stroke Effect

class StrokeEffectTextView : TextEffectView {
    override func processGlyphLayer(layer: CAShapeLayer, atIndex index: Int) {
        layer.strokeStart = 0
        layer.strokeEnd = 0

        layer.strokeColor = UIColor.blackColor().CGColor
        layer.fillColor = UIColor.whiteColor().CGColor
        layer.lineWidth = 1
        layer.lineJoin = kCALineJoinBevel

        let anim = CABasicAnimation(keyPath: "strokeEnd")
        anim.fromValue = 0.0
        anim.toValue = 1.0
        anim.duration = 0.5
        anim.beginTime = CACurrentMediaTime() + Double(index) * anim.duration
        anim.removedOnCompletion = false
        anim.fillMode = kCAFillModeForwards

        layer.addAnimation(anim, forKey: "strokeAnim")
    }
}

Typing Effect

class TypingTextEffectView : TextEffectView {

    var letterDuration: NSTimeInterval = 0.25
    var letterDelay: NSTimeInterval = 0.1

    override func processGlyphLayer(layer: CAShapeLayer, atIndex index: Int) {
        layer.opacity = 0
        layer.fillColor = UIColor.darkGrayColor().CGColor
        layer.lineWidth = 0

        let opacityAnim = CABasicAnimation(keyPath: "opacity")
        opacityAnim.fromValue = 0
        opacityAnim.toValue = 1
        opacityAnim.duration = letterDuration

        let rotateAnim = CABasicAnimation(keyPath: "transform.rotation")
        rotateAnim.fromValue = -M_PI / 4.0
        rotateAnim.toValue = 0
        rotateAnim.duration = letterDuration / 2.0

        let scaleAnim = CAKeyframeAnimation(keyPath: "transform.scale")
        scaleAnim.values = [1.4, 0.9, 1.0]
        scaleAnim.keyTimes = [0, 0.75, 1.0]
        scaleAnim.duration = letterDuration

        let group = CAAnimationGroup()
        group.animations = [opacityAnim, rotateAnim, scaleAnim]
        group.duration = letterDuration
        group.beginTime = CACurrentMediaTime() + Double(index) * letterDelay

        group.fillMode = kCAFillModeForwards
        group.removedOnCompletion = false

        layer.addAnimation(group, forKey: "animationGroup")
    }
}