Я пытаюсь сделать масштабную анимацию для UIButton, когда ее щелкнул, но то, что я пытаюсь выполнить, - это когда кнопка нажата. Мне нужно, чтобы UIButton был меньше внутри, а затем возвращается к тому же размер (например, пузырь).
Я попробовал следующее:
button.transform = CGAffineTransformMakeScale(-1, 1)
UIView.animateWithDuration(0.5, animations: { () -> Void in
button.transform = CGAffineTransformMakeScale(1,1)
})
Попробуйте это
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
}
})
Обновление кода SWIFT 4: у меня есть анимированная кнопка с приятным эффектом подпрыгивания и весенней анимацией.
@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() }
)
}
Все приведенные выше ответы действительны.
В качестве плюса с Swift я предлагаю создать расширение UIView, чтобы "масштабировать" любое ваше мнение.
Вы можете получить вдохновение от этого фрагмента кода:
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
})
})
}
}
Использование очень просто:
let button = UIButton(frame: frame)
button.zoomIn() // here the magic
версия 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
})
})
}
}
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")
}
}
Применение:
myButton.flash()
// myButton.pulsate()
// myButton.shake()
Кредиты: Шон Аллен
Версия 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
})
})
Это работает со мной следующим образом: анимация настроена на небольшой размер, затем при запуске анимации она возвращается к своему первоначальному размеру:
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)
})
Используя Swift 4 Xcode 9, это оживит кнопку вниз при первоначальном нажатии и затем вернет назад при отпускании.
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)
}
Реализация:
@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
}
Я предпочитаю иметь анимацию печати и устанавливать ее быстрее, чем другие примеры, с контролем завершения для ожидания окончания анимации:
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)
})
})
}
}
Использование
@IBAction func playPauseBtnTap(_ sender: Any) {
let playPauseBtn = sender as! UIButton
playPauseBtn.press(completion:{ finish in
if finish {
print("animation ended")
}
}
}
Используя следующую анимацию, кнопка начнет с ее полного размера, уменьшится до 0,6 с анимацией spring, чтобы вернуться к ней в полном размере.
[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
}];
}];
iOS 9 и 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){}];
Это даст прекрасный эффект отскока:
@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)
})
}
Вы можете попробовать это, если хотите эффект автореверса с обработчиком завершения.
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.
})
Кнопка масштабирования или любое представление примерно в три раза и более используют следующий код. swift 3 или swift 4 с 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
})
})
})
})
})
})
Я сделал протокол с использованием Swift 4, который вы можете использовать в некоторых специфических UIViews, которые вы хотите анимировать... Вы можете попробовать некоторые анимации здесь или изменить время и задержку.
Этот способ рекомендуется, потому что вы можете использовать этот протокол и другие в одном представлении, и это представление может использовать эти функции, делая множество расширений из UIView, создавая запах кода.
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
})
}
}
Вот рабочий пример:
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()
}