Achieving a Rotating, Movement, Scale animation effect with a UILabel letter. Swift

Question

I'm attempting to rotate and move and scale a letter. Something like in this video but with UILabels (one letter per label) https://www.youtube.com/watch?v=rwE6tAQPFuY&feature=youtu.be

One 360 degree rotation, a translate movement and a scale to normal size at the same time.

I managed to achieve this effect with a normal UIImageView by doing the following

UIView.animateWithDuration( 0.5, delay: 0, options: UIViewAnimationOptions.CurveLinear, animations: { image.frame = CGRectMake( middlePosX, middlePosY, imageWidth * ( 1 + ranScale ) / 2, imageHeight * ( 1 + ranScale ) / 2 ) image.transform = CGAffineTransformRotate( letterImage.transform, CGFloat( M_PI ) )

        }, completion:
        { _ in
            UIView.animateWithDuration( 0.5, delay: 0, options: UIViewAnimationOptions.CurveLinear, animations:
                {

                    image.frame = CGRectMake( finalPosX, finalPosY, imageWidth, imageHeight )
                    image.transform = CGAffineTransformRotate( letterImage.transform, CGFloat( M_PI ) )
                },
                completion: nil )

    } )

however when using UILabels the frame doesn't reset the size of the text. So i tried an initial transform followed by this

    letterImage.transform = CGAffineTransformScale( letterImage.transform, ranScale, ranScale )

UIView.animateWithDuration( 0.5, delay: 0, options: UIViewAnimationOptions.CurveLinear, animations: {

        letterImage.frame = CGRectMake( middlePosX, middlePosY, imageWidth, imageHeight )

        var rotateTransform = CGAffineTransformMakeRotation( CGFloat( M_PI ) )
        var scaleTransform = CGAffineTransformMakeScale( ( 1 + ranScale ) / 2, ( 1 + ranScale ) / 2 )
        letterImage.transform = CGAffineTransformConcat( rotateTransform, scaleTransform )

    }, completion:
    { _ in
        UIView.animateWithDuration( 0.5, delay: 0, options: UIViewAnimationOptions.CurveLinear, animations:
        {

            letterImage.frame = CGRectMake( finalPosX, finalPosY, imageWidth, imageHeight )
            letterImage.transform = CGAffineTransformIdentity
        },
        completion: nil )

    } )

but it doesn't achieve the effect I want.. When i combine the rotating with the movement it swirls in in a different way then previous and at the end sometimes it even does a glitchy jump. Looks like this https://www.youtube.com/watch?v=CaD1BTwN8Yg&feature=youtu.be

How can i achieve the desired effect with a UILabel letter?

Answer 1

This seems to do the trick. 4 different CABasicAnimations

    let scaleAnimation = CABasicAnimation( keyPath: "transform.scale" )
    scaleAnimation.fromValue = ranScale
    scaleAnimation.toValue = 1
    scaleAnimation.duration = 1
    textLayer.addAnimation( scaleAnimation, forKey: "transform.scale" )


    let rotateAnimation = CABasicAnimation( keyPath: "transform.rotation.z" )

    rotateAnimation.fromValue = 2 * M_PI
    rotateAnimation.toValue = 0
    rotateAnimation.duration = 1
    textLayer.addAnimation( rotateAnimation, forKey: "transform.rotation.z" )

    let moveXAnimation = CABasicAnimation( keyPath: "position.x" )
    moveXAnimation.fromValue = ranX
    moveXAnimation.toValue = textLayer.position.x
    moveXAnimation.duration = 1
    textLayer.addAnimation( moveXAnimation, forKey: "position.x" )


    let moveYAnimation = CABasicAnimation( keyPath: "position.y" )
    moveYAnimation.fromValue = ranY
    moveYAnimation.toValue = textLayer.position.y
    moveYAnimation.duration = 1
    textLayer.addAnimation( moveYAnimation, forKey: "position.y" )

Answer 2

Short answer: Don't.

Longer answer: Use a custom UIView with a text layer and Core Animation.