CODEWITHSUNDEEP
iosswiftuiviewanimation
Bhavin Bhadani
Bhavin Bhadani

Reputation: 22374

shrink width of button with animation issue

I want to replicate this animation in my project

enter image description here

So what I did try is:

  1. To transform scale X .. but the problem is it also shrinks the title of a button.

    self.transform = CGAffineTransform.identity
UIView.animate(withDuration: duration, delay: delayTime,
               usingSpringWithDamping: 0.7,
               initialSpringVelocity: 0.7,
               options: [.curveEaseIn],
               animations: {
                self.transform = CGAffineTransform(scaleX: 0.5, y: 1.0)
    }, completion: nil)

    This is what it gives (title of button also shrinks)

    enter image description here

  2. Use of CASpringAnimation

    let shrinkAnim = CASpringAnimation(keyPath: "bounds.size.width")
shrinkAnim.damping = 0.7
shrinkAnim.initialVelocity = 0.7
shrinkAnim.fromValue = frame.width
shrinkAnim.toValue = width
shrinkAnim.dura[![enter image description here][3]][3]tion = duration
shrinkAnim.timingFunction = getTimingFunction(curve: curve)
shrinkAnim.fillMode = kCAFillModeForwards
shrinkAnim.isRemovedOnCompletion = false
layer.add(shrinkAnim, forKey: shrinkAnim.keyPath)

    So it can change the width but also position of the title enter image description here

So my question is whats going wrong or what I need to add to replicate first image?

My constraints for button is pinned to left, right and bottom edges and fix height. and more thing is I am making a class for this so I cant change constants because I have to use this in many screens .. so I want one stop solution.

Upvotes: 3

Views: 955

Answers (4)

Zonily Jame
Zonily Jame

Reputation: 5349

Put your button inside a UIView

your view tree would then look like this

Superview > UIView > Button

By doing this you now have a fixed width size your button can follow which is the uiview

It would look like this

View in a superview

Button Constraints

Left Contraint Right Constraint

And then animate using

//let's say the current left and right constraint are 8

leftConstraint.constant = 50
rightConstraint.constant = 50
UIView.animate ... {
    self.view.layoutIfNeeded()
}

By using this you'd only need to set the UIView's frame to your desired frame and have the button follow suit and your animations would just be set proportionate to how you'd code it

//let's say the current left and right constraint are 8

// get view frame

...

// calculate distance

var calculatedDistance = ......

// set distance
let distanceToAnimate = calculatedDistance

leftConstraint.constant = distanceToAnimate
rightConstraint.constant = distanceToAnimate
UIView.animate ... {
    self.view.layoutIfNeeded()
}

Upvotes: 1

Windindi
Windindi

Reputation: 412

Apply the transform on the frame of the button. When you scale an UIView in animation it does not take consideration of subviews/layout it will just uniformly scale whatever is being drawn.

self.transform = CGAffineTransform.identity
UIView.animate(withDuration: duration, delay: delayTime,
               usingSpringWithDamping: 0.7,
               initialSpringVelocity: 0.7,
               options: [.curveEaseIn],
               animations: {
                self.frame = CGRectMake(<#CGFloat x#>, <#CGFloat y#>, <#CGFloat width#>, <#CGFloat height#>)
    }, completion: nil)

Upvotes: 0

B25Dec
B25Dec

Reputation: 2377

Have you tried content content hugging and compression resistance. Can you please try doing below at highest priorty. enter image description here

Upvotes: 0

Bista
Bista

Reputation: 7893

Don't use CGAffineTransform, rather take and NSLayoutConstraint attribute outlet for Button's width and change its constant inside animation block/closure.

UIView.animate(withDuration: duration, delay: delayTime,
           usingSpringWithDamping: 0.7,
           initialSpringVelocity: 0.7,
           options: [.curveEaseIn],
           animations: {
            self.buttonWidthConstraint.constant = desired_width_here
}, completion: nil)

Upvotes: 1

Related Questions