Decrease the width of a view with animation

Question

Hi all I am facing an strange issue . I want to increase the width of a view on click of a button with animation which is working fine in my case. The code I am using to increase the width is below-

    @IBAction func increaseWidth(_ sender: AnyObject) {

      UIView.animate(withDuration: 1.0, delay: 0, options:
       [.allowUserInteraction], animations: {

            print("Animation function animateStuff() started!")

            let frmPlay : CGRect = self.nameLbl.frame
            let originXbutton = frmPlay.origin.x
            let originYbutton = frmPlay.origin.y
            let originWidthbutton = frmPlay.size.width
            let originHeightbutton = frmPlay.size.height

           self.nameLbl.frame =  CGRect(origin: CGPoint(x: originXbutton,y :originYbutton), size: CGSize(width: originWidthbutton+100, height: originHeightbutton))


        }, completion: { finished in

    })
}

But the code which is use by me not decreasing the width with animation.It is just decreasing the width.The code which is used by to decrease the width is below-

@IBAction func decreaseWidth(_ sender: AnyObject) {


    UIView.animate(withDuration: 1.0, delay: 0, options:
        [.allowUserInteraction], animations: {

            print("Animation function animateStuff() started!")

            let frmPlay : CGRect = self.nameLbl.frame
            let originXbutton = frmPlay.origin.x
            let originYbutton = frmPlay.origin.y
            let originWidthbutton = frmPlay.size.width
            let originHeightbutton = frmPlay.size.height

            // self.nameLbl.frame = frmPlay
            self.nameLbl.frame =  CGRect(origin: CGPoint(x: originXbutton,y :originYbutton), size: CGSize(width: originWidthbutton-100, height: originHeightbutton))



        }, completion: { finished in

    })

}

Please help where I am going wrong.

interesting question, seems UILabel is a special elements that you can't do resize animation on it (http://stackoverflow.com/a/22224630/3869284). try to put it into a UIView and animate on that view. — Ryan, Dec 18 '16 at 08:06
@Jeo - Updated code also have same response as previous one. ): — Pankaj Gupta, Dec 19 '16 at 12:34

Joe · Answer 1 · 2016-12-16T10:47:32.447

You could simply use CALayer to achieve this animation.Try below method.

func scaleX() {

    let animation = CABasicAnimation(keyPath: "transform.scale.x")
    animation.fromValue = NSValue(cgSize: CGSize(width: 1, height: 1))
    animation.toValue = NSValue(cgSize: CGSize(width: 1.2, height: 1)) 
    animation.duration = 1.0
    self.imageView.layer.add(animation, forKey: "Image-scale")
    imageView.transform = CGAffineTransform(scaleX: 1.2, y: 1.0)

}

func reset() {

    UIView.animate(withDuration: 1) { 
          self.imageView.transform = CGAffineTransform.identity
    }

}

Note : I am using imageView to test animation.You can assign your view to perform animation.

Updated:

I recommend you to use basic UIView animation by changing its frame content size.Try below method.

 override func viewDidAppear(_ animated: Bool) {
    //To restrict animation repeats.
    resetButton.isEnabled = false
    resetButton.showsTouchWhenHighlighted = true
    scaleButton.showsTouchWhenHighlighted = true 
 }


func scaleX() {

     resetButton.isEnabled = true
     scaleButton.isEnabled = false  
    UIView.animate(withDuration: 1) { 
        self.imageView.frame = CGRect(x: self.imageView.frame.origin.x, y: self.imageView.frame.origin.y, width: self.imageView.frame.width + 100, height: self.imageView.frame.height)
   }
}

func reset() {

    resetButton.isEnabled = false
    scaleButton.isEnabled = true 
    UIView.animate(withDuration: 1) {    
    self.imageView.frame = CGRect(x: self.imageView.frame.origin.x, y: self.imageView.frame.origin.y, width: self.imageView.frame.width  - 100, height: self.imageView.frame.height)       
 }

 }

Output:

Thanks for response but I want to increment the width of view without changing x coordinate of view and also decrement the width of view without changing the x coordinate.Can you please let me know how can we achieve this by above method. — Pankaj Gupta, Dec 16 '16 at 04:58

Decrease the width of a view with animation

1 Answers1