Animate a rotated label in swift?

Question

I am trying to animate a rotated label like this:

@IBOutlet fileprivate weak var loadingLabel: UILabel!

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        loadingLabel.transform = CGAffineTransform(rotationAngle: CGFloat(0.2))  // rotation line

        UIView.animate(withDuration: 2.0, animations: {
            self.loadingLabel.transform = CGAffineTransform(translationX: 0, y: self.view.bounds.size.height)
        })
    }

When I comment out the rotation line of code (and keep the label unrotated), it works fine. But when I rotate it, the label starts off the screen at the beginning of the animation:

When I comment out the animation, the label is rotated perfectly fine (but no animation obviously):

How do I rotate the image and animate it, without having this weird placement?

Edit: To clarify: I want the label to start off rotated in the center of the screen, and just simply move the label. I do not want to rotate the image during the animation.

also https://stackoverflow.com/a/41398481/294884 – Fattie Mar 28 '19 at 16:38 — Fattie, Mar 28 '19 at 16:38
and https://stackoverflow.com/q/22887629/294884 – Fattie Mar 28 '19 at 16:40 — Fattie, Mar 28 '19 at 16:40

score 1 · Answer 1 · answered Mar 28 '19 at 17:02

You can perform the animation with CABasicAnimation as it will give you more control on the animation and it has a completion block on which you can hide your label as well upon your requirement.

    loadingLabel.transform = CGAffineTransform(rotationAngle: CGFloat(0.2))  // rotation line

        let animationKey = "position.y"
        CATransaction.begin()
        let moveYAnimation = CABasicAnimation( keyPath:  animationKey)
        moveYAnimation.fromValue = loadingLabel.frame.origin.y
        moveYAnimation.toValue = self.view.bounds.size.height
        moveYAnimation.duration = 2
        loadingLabel.layer.add( moveYAnimation, forKey: animationKey )

        // Callback function
        CATransaction.setCompletionBlock {
            print("end animation")
            self.loadingLabel.isHidden = true
        }

        // Do the actual animation and commit the transaction
        loadingLabel.layer.add(moveYAnimation, forKey: animationKey)
        CATransaction.commit()

Hope it will help you.

score 1 · Accepted Answer · answered Mar 28 '19 at 17:18

The correct answer is that you are supposed to concatenate the transformation matrices. If you don't want to do linear algebra then the easy way is that you use the transform to set the rotation and don't animate it, then animate the view's frame/center instead.

import UIKit

class V: UIViewController {
    @IBOutlet var label: UILabel!
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        label.transform = CGAffineTransform(rotationAngle: CGFloat.pi / 6)
        label.center.x += 300
        UIView.animate(withDuration: 2) {
            self.label.center.x -= 300
        }
    }
}

score 0 · Answer 3 · edited Mar 05 '20 at 10:59

0

The first transform is ot of the animation block, it's why it begin out of the screen. You should move it in the animation block, and use a completion handler to animate again.

UIView.animate(withDuration: 2.0, animations: {
    //
}, completion: { (result) in
    //
})

Be carefull, the angle is in radians.

edited Mar 05 '20 at 10:59

Spidy

1,137
3
28
48

answered Mar 28 '19 at 16:36

simvi

1

Animate a rotated label in swift?

3 Answers3