3D animate text in iOS / Swift as if it were written on an invisible rotating toilet paper roll

user_9878385 0
Viewed 137

Whether it is fake 3D (illusion to the same effect) or actual 3D, I would like to animate text and images as if they were printed on an invisible rotating toilet paper roll, the same way that you would rotate a toilet roll around its holder. Another analogy would be a poker machine - so that the old symbols slide out, and the new ones slide in.

I have managed to do this with fake 3D (2D animation only to create an illusion). But I am not happy with it. Also, one of the animated images must be spinning (it's a custom spinner made by our graphical designers which must be spinning in its own coordinate space), and my way is incompatible with that animation happening at the same time. It glitches out when they are combined. So for the poker machine analogy, imagine the fruit symbol is spinning in place.

Thanks

swift ios
1 Answers

Where the variable myScale is the scale of the animation of your choosing, I came up with:

viewSlideInFromBottom.layer.transform = CATransform3DConcat(CATransform3DMakeTranslation(0, 0, -myScale), CATransform3DMakeRotation(CGFloat.pi / 2, 1, 0, 0))
        
viewSlideOutToTop.layer.transform = CATransform3DMakeTranslation(0, 0, -myScale)
        
let animation = UIViewPropertyAnimator(duration: 1.0,
    curve: .easeIn,
    animations: {
        self.viewSlideInFromBottom.layer.transform = CATransform3DMakeTranslation(0, 0, -self.myScale)
        self.viewSlideOutToTop.layer.transform = CATransform3DConcat(CATransform3DMakeTranslation(0, 0, -self.myScale), CATransform3DMakeRotation(-CGFloat.pi / 2, 1, 0, 0))
    }
)

animation.startAnimation()

viewSlideInFromBottom slides in from the bottom and viewSlideOutToTop slides out of the top.

user_98783850
Related