2

I have two shortcuts. Each of them has initial properties, such as font size and opacity. Before animation, the values ​​are 

labelOne.font = labelOne.font.withSize(109)
labelOne.alpha = 1.0

labelTwo.font = labelTwo.font.withSize(40)
labelTwo.alpha = 0.7

After the animation, they should have these properties:

labelOne.font = labelOne.font.withSize(40)
labelOne.alpha = 0.7

labelTwo.font = labelTwo.font.withSize(109)
labelTwo.alpha = 1.0

For transformation, I use CGAffineTransform() example: 

labelOne.transform = CGAffineTransform(scaleX: //some value? , y: //someValue?)

But I'm new to programming and don't quite understand how it works. Tell me how to write this animation with font size resizing?

sandpat
  • 1,478
  • 12
  • 30
JiosDev
  • 324
  • 3
  • 11
  • 1
    I did it a different way here. https://stackoverflow.com/questions/50876789/how-to-properly-morph-text-in-ios/50889550#50889550 – agibson007 Feb 01 '20 at 13:33

1 Answers1

2

To achieve an animation on both labels, as you wished by controlling font size and alpha, you could achieve it like this:

// Before animation
labelOne.font = labelOne.font.withSize(109)
labelOne.alpha = 1.0

labelTwo.font = labelTwo.font.withSize(40)
labelTwo.alpha = 0.7
UIView.animate(withDuration: 1, animations: {
    // This will be values set during the animation of 1 second
    self.labelOne.font = labelOne.font.withSize(40)
    self.labelOne.alpha = 0.7

    self.labelTwo.font = labelTwo.font.withSize(109)
    self.labelTwo.alpha = 1.0
})

Meanwhile, CGAffineTransform(scaleX:, y:) lets you scale the X,Y coordinates value of your view (labelOne for example), but to make that happen with an animation you have to put that inside the animate block:

// normal state
labelOne.transform = CGAffineTransform(scaleX: 1, y: 1)
labelTwo.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)
UIView.animate(withDuration: 1, animations: {
    // State reached through the animation
    labelOne.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)
    labelTwo.transform = CGAffineTransform(scaleX: 1, y: 1)
})

To achieve a smoother transition play with:

UIView.transition(with: labelOne, duration: 0.25, options: .transitionCrossDissolve, animations: {
    self.labelOne.font = UIFont.systemFont(ofSize: 40)
}) { _ in }
denis_lor
  • 6,212
  • 4
  • 31
  • 55