ios - Scale UIButton Animation- Swift

cgaffinetransformscale

Question

Estoy tratando de hacer una animación a escala para UIButton cuando se hace clic, pero lo que intento lograr es que cuando se UIButton clic en el botón necesito que el UIButton sea ​​más pequeño por dentro y luego vuelva a su mismo tamaño (como una burbuja).

Intenté lo siguiente:

button.transform = CGAffineTransformMakeScale(-1, 1)
UIView.animateWithDuration(0.5, animations: { () -> Void in
button.transform = CGAffineTransformMakeScale(1,1)
})

Answer 1

Actualización del código SWIFT 4 : Tengo un botón animado con un bonito efecto de rebote, con animación de primavera.

@IBOutlet weak var button: UIButton!
@IBAction func animateButton(sender: UIButton) {
sender.transform = CGAffineTransform(scaleX: 0.6, y: 0.6)
UIView.animate(withDuration: 2.0,
delay: 0,
usingSpringWithDamping: CGFloat(0.20),
initialSpringVelocity: CGFloat(6.0),
options: UIViewAnimationOptions.allowUserInteraction,
animations: {
sender.transform = CGAffineTransform.identity
},
completion: { Void in() }
)
}

Answer 2

Aquí hay un ejemplo de trabajo:

extension UIButton{
func flash() {
let flash = CABasicAnimation(keyPath: "opacity")
flash.duration = 0.5
flash.fromValue = 1
flash.toValue = 0.1
flash.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
flash.autoreverses = true
flash.repeatCount = 3
layer.add(flash, forKey: nil)
}
}
@IBAction func taptosave(_ sender: UIButton) {
sender.flash()
}

Answer 3

El botón de escala o cualquier vista aproximadamente tres veces o más usa el siguiente código. Swift 3 o Swift 4 con xcode 9.

 UIView.animate(withDuration: 0.2, animations: {
self.cartShowHideBtnView.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
}, completion: { (finish: Bool) in
UIView.animate(withDuration: 0.2, animations: {
self.cartShowHideBtnView.transform = CGAffineTransform.identity
}, completion:{(finish: Bool) in
UIView.animate(withDuration: 0.2, animations: {
self.cartShowHideBtnView.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
}, completion: { (finish: Bool) in
UIView.animate(withDuration: 0.2, animations: {
self.cartShowHideBtnView.transform = CGAffineTransform.identity
}, completion:{(finish: Bool) in
UIView.animate(withDuration: 0.2, animations: {
self.cartShowHideBtnView.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
}, completion: { (finish: Bool) in
UIView.animate(withDuration: 0.2, animations: {
self.cartShowHideBtnView.transform = CGAffineTransform.identity
})
})
})
})
})
})

Answer 4

Esto le dará un maravilloso efecto de rebote:

@IBAction func TouchUpInsideEvent(sender: UIButton) {
UIView.animateWithDuration(2.0,
delay: 0,
usingSpringWithDamping: CGFloat(0.20),
initialSpringVelocity: CGFloat(6.0),
options: UIViewAnimationOptions.AllowUserInteraction,
animations: {
sender.transform = CGAffineTransformIdentity
},
completion: { Void in() }
)
}
@IBAction func touchDownEvent(sender: UIButton) {
UIView.animateWithDuration(0.15, animations: {
sender.transform = CGAffineTransformMakeScale(0.6, 0.6)
})
}

Answer 5

Funciona conmigo de la siguiente manera, la animación está configurada para ser pequeña y luego, cuando comienza la animación, vuelve a su tamaño original:

Swift 2

button.transform = CGAffineTransformMakeScale(0.6, 0.6)
UIView.animateWithDuration(0.3, animations: { () -> Void in
button.transform = CGAffineTransformMakeScale(1,1)
})

Swift 3, 4, 5

button.transform = CGAffineTransform.init(scaleX: 0.6, y: 0.6)
UIView.animate(withDuration: 0.3, animations: { () -> Void in
button.transform = CGAffineTransform.init(scaleX: 1, y: 1)
})

Answer 6

Hice un protocolo usando Swift 4, que puede usar en algunas UIViews específicas que desea animar ... Puede probar algunas animaciones aquí o cambiar el tiempo y la demora.

Se recomienda esta forma porque puede usar este protocolo y otros en una vista y esta vista puede usar estas funciones, haciendo muchas extensiones de sistema operativo de UIView crear código de olor.

import Foundation
import UIKit
protocol Showable where Self: UIView {}
extension Showable {
func show(_ view: UIView? = nil) {
if let view = view {
self.animate(view)
} else {
self.animate(self)
}
}
private func animate(_ view: UIView) {
view.transform = CGAffineTransform(scaleX: 0.0, y: 0.0)
UIView.animate(withDuration: 2.0,
delay: 0,
usingSpringWithDamping: CGFloat(0.20),
initialSpringVelocity: CGFloat(6.0),
options: [.allowUserInteraction],
animations: {
view.transform = CGAffineTransform.identity
})
}
}

Answer 7

Prefiero tener la animación de la prensa y configurarla más rápido que los otros ejemplos, con el control de finalización para esperar hasta que finalice la animación:

Swift 3 :

extension UIButton {
func press(completion:@escaping ((Bool) -> Void)) {
UIView.animate(withDuration: 0.05, animations: {
self.transform = CGAffineTransform(scaleX: 0.8, y: 0.8) }, completion: { (finish: Bool) in
UIView.animate(withDuration: 0.1, animations: {
self.transform = CGAffineTransform.identity
completion(finish)
})
})
}
}

Uso :

@IBAction func playPauseBtnTap(_ sender: Any) {
let playPauseBtn = sender as! UIButton
playPauseBtn.press(completion:{ finish in
if finish {
print("animation ended")
}
}
}

Answer 8

Prueba esto

UIView.animate(withDuration: 0.6,
animations: {
self.button.transform = CGAffineTransform(scaleX: 0.6, y: 0.6)
},
completion: { _ in
UIView.animate(withDuration: 0.6) {
self.button.transform = CGAffineTransform.identity
}
})

Answer 9

Puede probar esto si desea un efecto de Autoreverse con un controlador de finalización.

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

Answer 10

Todas las respuestas anteriores son válidas.
Como ventaja adicional, con Swift sugiero crear una extensión de UIView para "escalar" cualquier vista que desee.
Puedes inspirarte en este código:

extension UIView {
/**
Simply zooming in of a view: set view scale to 0 and zoom to Identity on ''duration'' time interval.
- parameter duration: animation duration
*/
func zoomIn(duration duration: NSTimeInterval = 0.2) {
self.transform = CGAffineTransformMakeScale(0.0, 0.0)
UIView.animateWithDuration(duration, delay: 0.0, options: [.CurveLinear], animations: { () -> Void in
self.transform = CGAffineTransformIdentity
}) { (animationCompleted: Bool) -> Void in
}
}
/**
Simply zooming out of a view: set view scale to Identity and zoom out to 0 on ''duration'' time interval.
- parameter duration: animation duration
*/
func zoomOut(duration duration: NSTimeInterval = 0.2) {
self.transform = CGAffineTransformIdentity
UIView.animateWithDuration(duration, delay: 0.0, options: [.CurveLinear], animations: { () -> Void in
self.transform = CGAffineTransformMakeScale(0.0, 0.0)
}) { (animationCompleted: Bool) -> Void in
}
}
/**
Zoom in any view with specified offset magnification.
- parameter duration: animation duration.
- parameter easingOffset: easing offset.
*/
func zoomInWithEasing(duration duration: NSTimeInterval = 0.2, easingOffset: CGFloat = 0.2) {
let easeScale = 1.0 + easingOffset
let easingDuration = NSTimeInterval(easingOffset) * duration / NSTimeInterval(easeScale)
let scalingDuration = duration - easingDuration
UIView.animateWithDuration(scalingDuration, delay: 0.0, options: .CurveEaseIn, animations: { () -> Void in
self.transform = CGAffineTransformMakeScale(easeScale, easeScale)
}, completion: { (completed: Bool) -> Void in
UIView.animateWithDuration(easingDuration, delay: 0.0, options: .CurveEaseOut, animations: { () -> Void in
self.transform = CGAffineTransformIdentity
}, completion: { (completed: Bool) -> Void in
})
})
}
/**
Zoom out any view with specified offset magnification.
- parameter duration: animation duration.
- parameter easingOffset: easing offset.
*/
func zoomOutWithEasing(duration duration: NSTimeInterval = 0.2, easingOffset: CGFloat = 0.2) {
let easeScale = 1.0 + easingOffset
let easingDuration = NSTimeInterval(easingOffset) * duration / NSTimeInterval(easeScale)
let scalingDuration = duration - easingDuration
UIView.animateWithDuration(easingDuration, delay: 0.0, options: .CurveEaseOut, animations: { () -> Void in
self.transform = CGAffineTransformMakeScale(easeScale, easeScale)
}, completion: { (completed: Bool) -> Void in
UIView.animateWithDuration(scalingDuration, delay: 0.0, options: .CurveEaseOut, animations: { () -> Void in
self.transform = CGAffineTransformMakeScale(0.0, 0.0)
}, completion: { (completed: Bool) -> Void in
})
})
}
}

El uso es muy simple:

let button = UIButton(frame: frame)
button.zoomIn() // here the magic

Versión Swift 3

extension UIView {
/**
Simply zooming in of a view: set view scale to 0 and zoom to Identity on ''duration'' time interval.
- parameter duration: animation duration
*/
func zoomIn(duration: TimeInterval = 0.2) {
self.transform = CGAffineTransform(scaleX: 0.0, y: 0.0)
UIView.animate(withDuration: duration, delay: 0.0, options: [.curveLinear], animations: { () -> Void in
self.transform = CGAffineTransform.identity
}) { (animationCompleted: Bool) -> Void in
}
}
/**
Simply zooming out of a view: set view scale to Identity and zoom out to 0 on ''duration'' time interval.
- parameter duration: animation duration
*/
func zoomOut(duration: TimeInterval = 0.2) {
self.transform = CGAffineTransform.identity
UIView.animate(withDuration: duration, delay: 0.0, options: [.curveLinear], animations: { () -> Void in
self.transform = CGAffineTransform(scaleX: 0.0, y: 0.0)
}) { (animationCompleted: Bool) -> Void in
}
}
/**
Zoom in any view with specified offset magnification.
- parameter duration: animation duration.
- parameter easingOffset: easing offset.
*/
func zoomInWithEasing(duration: TimeInterval = 0.2, easingOffset: CGFloat = 0.2) {
let easeScale = 1.0 + easingOffset
let easingDuration = TimeInterval(easingOffset) * duration / TimeInterval(easeScale)
let scalingDuration = duration - easingDuration
UIView.animate(withDuration: scalingDuration, delay: 0.0, options: .curveEaseIn, animations: { () -> Void in
self.transform = CGAffineTransform(scaleX: easeScale, y: easeScale)
}, completion: { (completed: Bool) -> Void in
UIView.animate(withDuration: easingDuration, delay: 0.0, options: .curveEaseOut, animations: { () -> Void in
self.transform = CGAffineTransform.identity
}, completion: { (completed: Bool) -> Void in
})
})
}
/**
Zoom out any view with specified offset magnification.
- parameter duration: animation duration.
- parameter easingOffset: easing offset.
*/
func zoomOutWithEasing(duration: TimeInterval = 0.2, easingOffset: CGFloat = 0.2) {
let easeScale = 1.0 + easingOffset
let easingDuration = TimeInterval(easingOffset) * duration / TimeInterval(easeScale)
let scalingDuration = duration - easingDuration
UIView.animate(withDuration: easingDuration, delay: 0.0, options: .curveEaseOut, animations: { () -> Void in
self.transform = CGAffineTransform(scaleX: easeScale, y: easeScale)
}, completion: { (completed: Bool) -> Void in
UIView.animate(withDuration: scalingDuration, delay: 0.0, options: .curveEaseOut, animations: { () -> Void in
self.transform = CGAffineTransform(scaleX: 0.0, y: 0.0)
}, completion: { (completed: Bool) -> Void in
})
})
}

}

Answer 11

Usando Swift 4 Xcode 9 , esto animará el botón hacia abajo cuando se presiona inicialmente y luego hacia atrás cuando se suelte.

extension UIView {
func animateButtonDown() {
UIView.animate(withDuration: 0.1, delay: 0.0, options: [.allowUserInteraction, .curveEaseIn], animations: {
self.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
}, completion: nil)
}
func animateButtonUp() {
UIView.animate(withDuration: 0.1, delay: 0.0, options: [.allowUserInteraction, .curveEaseOut], animations: {
self.transform = CGAffineTransform.identity
}, completion: nil)
}

Implementación:

@IBAction func buttonTouchDown(_ sender: UIButton) {
//Connected with Touch Down Action
sender.animateButtonDown()
}
@IBAction func buttonTouchUpOutside(_ sender: UIButton) {
//Connected with Touch Up Outside Action
//if touch moved away from button
sender.animateButtonUp()
}
@IBAction func buttonTouchUpInside(_ sender: UIButton) {
//Connected with Touch Up Inside Action
sender.animateButtonUp()
//code to execute when button pressed
}

Answer 12

Usando la siguiente animación, el botón comenzará desde su tamaño completo, disminuirá a 0.6 con una animación de primavera para volver a su tamaño completo.

[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.4 initialSpringVelocity:0.3 options:0 animations:^{
//Animations
button.transform = CGAffineTransformIdentity;
CGAffineTransformMakeScale(0.6, 0.6)
} completion:^(BOOL finished) {
//Completion Block
[UIView.animateWithDuration(0.5){
button.transform = CGAffineTransformIdentity
}];
}];

Answer 13

Versión Swift 3:

 UIView.animate(withDuration: 0.6, animations: {
button.transform = CGAffineTransform.identity.scaledBy(x: 0.6, y: 0.6)
}, completion: { (finish) in
UIView.animate(withDuration: 0.6, animations: {
button.transform = CGAffineTransform.identity
})
})

Answer 14

iOS 9 y xCode 7

//for zoom in
[UIView animateWithDuration:0.5f animations:^{
self.sendButton.transform = CGAffineTransformMakeScale(1.5, 1.5);
} completion:^(BOOL finished){}];
// for zoom out
[UIView animateWithDuration:0.5f animations:^{
self.sendButton.transform = CGAffineTransformMakeScale(1, 1);
}completion:^(BOOL finished){}];

Answer 15

Swift 3.x +

extension UIButton {
func pulsate() {
let pulse = CASpringAnimation(keyPath: "transform.scale")
pulse.duration = 0.2
pulse.fromValue = 0.95
pulse.toValue = 1.0
pulse.autoreverses = true
pulse.repeatCount = 2
pulse.initialVelocity = 0.5
pulse.damping = 1.0
layer.add(pulse, forKey: "pulse")
}
func flash() {
let flash = CABasicAnimation(keyPath: "opacity")
flash.duration = 0.2
flash.fromValue = 1
flash.toValue = 0.1
flash.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
flash.autoreverses = true
flash.repeatCount = 3
layer.add(flash, forKey: nil)
}
func shake() {
let shake = CABasicAnimation(keyPath: "position")
shake.duration = 0.05
shake.repeatCount = 2
shake.autoreverses = true
let fromPoint = CGPoint(x: center.x - 5, y: center.y)
let fromValue = NSValue(cgPoint: fromPoint)
let toPoint = CGPoint(x: center.x + 5, y: center.y)
let toValue = NSValue(cgPoint: toPoint)
shake.fromValue = fromValue
shake.toValue = toValue
layer.add(shake, forKey: "position")
}
}

Uso:

myButton.flash()
// myButton.pulsate()
// myButton.shake()

_{Créditos: Sean Allen}