Cool Text Effects - Part 2

Episode #210 | 12 minutes | published on February 25, 2016
Subscribers Only
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")
    }
}
blog comments powered by Disqus