CODEWITHSUNDEEP
iosuibuttontransformationuianimation
Jrey Quiros
Jrey Quiros

Reputation: 243

iOS UIButton scale animation

i'm working on a UIButton animation where it moves along x-axis while it scales to its original size from the initial size. when i tried the code below it doesnt move to the point where it should go and doesn't scale up to its original size.

this is my code for initializing the button:

 _testBtn1.layer.anchorPoint = CGPointMake(0.5f, 0.5f);
scaleBtn = CGAffineTransformMakeScale(0.2, 0.2);
[_testBtn1 setTransform: scaleBtn];

and this is my code for the moving/translation and scaling:

CGAffineTransform translate = CGAffineTransformMakeTranslation(50.0f, 0.0f);
CGAffineTransform animate = CGAffineTransformConcat(scaleBtn, translate);
[_testBtn1 setTransform:animate];

any help, suggestion, advice will be appreciated. i'm new to iOS..thanks!

Upvotes: 0

Views: 5007

Answers (4)

xavi.pedrals
xavi.pedrals

Reputation: 1634

I made this animation:

enter image description here

With this reusable class:

class AnimatedButton: UIButton {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        addTargets()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        addTargets()
    }
    
    func addTargets() {
        self.addTarget(self, action: #selector(scaleDownAnimated), for: .touchDown)
        self.addTarget(self, action: #selector(scaleBackToNormalAnimated), for: [.touchUpOutside, .touchCancel, .touchUpInside])
    }
    
    @objc func scaleDownAnimated() {
        UIView.animate(withDuration: 0.25, delay: 0, options: .allowUserInteraction) {
            self.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
        } completion: { _ in }
    }
    
    @objc func scaleBackToNormalAnimated() {
        UIView.animate(withDuration: 0.2, delay: 0, options: .allowUserInteraction) {
            self.transform = CGAffineTransform(scaleX: 1, y: 1)
        } completion: { _ in }
    }
}

Then just make the class of your button AnimatedButton like below (if you are using Storyboards) and use the button normally:

enter image description here

Upvotes: 0

Kunal Verma
Kunal Verma

Reputation: 602

A simple scale(bouncy) animation with completion handler implementation in swift.

Hope it'll help you or anyone else in some way.

viewToanimate.transform = CGAffineTransform(scaleX: 0.1, y: 0.1) UIView.animate(withDuration: 0.7, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 6.0, animations: { _ in viewToAnimate.transform = .identity }, completion: { _ in //Implement your awesome logic here. })

Upvotes: 0

Jay Gajjar
Jay Gajjar

Reputation: 2741

You can just create a custom type UIButton (either with IB by changing the type to Custom, or programmatically with 

UIButton *aButton = [UIButton buttonWithType:UIButtonTypeCustom];//set the button's image with 
[aButton setImage:[UIImage imageNamed:@"abc" forState:UIControlStateNormal];

To move it, just animate its position normally...

[UIView animateWithDuration:0.5 animations:^{aButton.center = newCenter;}];

Or

CGRect originalFrame = aButton.frame;
aButton.frame = CGRectMake(originalFrame.origin.x, originalFrame.origin.y, originalFrame.size.width, 0);
[UIView animateWithDuration:0.5 animations:^{aButton.frame = originalFrame;}];

OR Reffer this link http://objectiveapple.blogspot.in/2011/10/23-quizapp-16-animate-scale-uibutton.html

Upvotes: 1

robahl
robahl

Reputation: 559

This should be easily done with Core Animation, take a look the the most basic one CABasicAnimation

Upvotes: 0

Related Questions