How to animate a CATransform3DRotate ?

Question

Aldariann OP

Created Apr ’21

Replies 1

Boosts 0

Views 1.6k

Participants 2

Hi here is the code:

Code Block     let button = self.votingButtonsContainer[0]
    let layer = button.layer
    let rotationAngle: CGFloat = 49
    var rotationAndPerspectiveTransform = CATransform3DIdentity
    rotationAndPerspectiveTransform.m34 = 1.0 / -500
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, rotationAngle * .pi / 180.0, 0.0, 1.0, 0.0)
    layer.transform = rotationAndPerspectiveTransform

This code correctly rotate in 3D my "button" in this case by 49 degrees (rotationAngle).
Problem is that this is not animated.

How to make this code animate the rotation, instead of simply displaying the result?

Answered by Claude31 in 669796022

I see at least 2 ways:

create a CoreAnimation with the transform keyPath

Code Block           let trans = CABasicAnimation(keyPath: "transform");
          trans.fromValue = [0.0, 0.0, 1.0, 0.0] // you may have to correct this
          trans.toValue = [rotationAngle * .pi / 180.0, 0.0, 1.0, 0.0]   // That's my guess of the correct set of parameters
          button.layer.add(cotransor, forKey: "rotation")     // I am not sure of the keyPath to use

For the list of keyPaths:
https://stackoverflow.com/questions/44230796/what-is-the-full-keypath-list-for-cabasicanimation

call animate on the view

Code Block UIView.animate(withDuration: 2.0, delay: 0.0, options: .curveEaseOut, animations: { /* TRANSFORM */ }, completion: { (done) in } )

with the right animations and completion handler

Boost

Answer 1

Claude31 OP

Apr ’21

Accepted Answer

I see at least 2 ways:

create a CoreAnimation with the transform keyPath

Code Block           let trans = CABasicAnimation(keyPath: "transform");
          trans.fromValue = [0.0, 0.0, 1.0, 0.0] // you may have to correct this
          trans.toValue = [rotationAngle * .pi / 180.0, 0.0, 1.0, 0.0]   // That's my guess of the correct set of parameters
          button.layer.add(cotransor, forKey: "rotation")     // I am not sure of the keyPath to use

For the list of keyPaths:
https://stackoverflow.com/questions/44230796/what-is-the-full-keypath-list-for-cabasicanimation

call animate on the view

Code Block UIView.animate(withDuration: 2.0, delay: 0.0, options: .curveEaseOut, animations: { /* TRANSFORM */ }, completion: { (done) in } )

with the right animations and completion handler

0