2015-07-09 22 views
43

Próbuję wykonać animację skali dla UIButton, gdy kliknięto, ale próbuję wykonać, gdy przycisk kliknął Potrzebuję, aby UIButton był mniejszy od wewnątrz, a następnie powraca do swojego ten sam rozmiar (jak bańka).Skala UIButton Animacja- Swift

Próbowałem następujące:

button.transform = CGAffineTransformMakeScale(-1, 1) 

UIView.animateWithDuration(0.5, animations: {() -> Void in 

    button.transform = CGAffineTransformMakeScale(1,1) 

}) 

Odpowiedz

102

Spróbuj tego

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 
     } 
    }) 
+6

Swift 3,0: UIView.animate (withDuration 0,6 animacje: { self.button.transform = CGAffineTransform (scaleX: 0,6, r: 0,6) } realizacji: {(folia: Bool) w UIView.animate (withDuration 0,6 animacje { self.button.transform = CGAffineTransform.identity }) }) – agfa555

+0

@nRewik wykorzystali sam kod, ale nie przycisk animowanie. Proszę o pomoc –

5

Pracuje ze mną w następujący sposób, animacja jest ustawiona na mały wtedy, gdy zaczynają animacji to wrócić do swojego pierwotnego rozmiaru:

button.transform = CGAffineTransformMakeScale(0.6, 0.6) 

UIView.animateWithDuration(0.3, animations: {() -> Void in 

    button.transform = CGAffineTransformMakeScale(1,1) 

}) 
+0

Twój kod natychmiast ustawia rozmiar przycisku na 0.6, a następnie animuje go z powrotem do pierwotnego rozmiaru. Jednak jeśli chcesz animować do 0,6, a następnie animować z powrotem do oryginalnego rozmiaru. Sprawdź moją odpowiedź. – nRewik

+0

@nRewik będzie to sprawdzić :) – AaoIi

34

Aktualizacja kodu SWIFT 4: Mam animowany przycisk z ładnym efektem odbicia, z animacją wiosenną.

@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() } 
    ) 
} 
+0

Sprawdzę to !!! :) – AaoIi

+0

Uwielbiam to. Dzięki! –

+0

witamy na @DavidDelMonte .. :) –

2

Korzystanie następujące animacji przycisku rozpocznie z pełnym rozmiarze, należy zmniejszyć do 0,6 z animacją wiosennej odbijać się to w pełnym rozmiarze.

[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 
      }]; 
      }]; 
+0

dziękuje, używany do innego celu – Greg

25

Wszystkie powyższe odpowiedzi są ważne.
Jako plus, z Swift Proponuję utworzyć rozszerzenie UIView, aby "skalować" dowolny widok, który chcesz.
można czerpać inspirację z tego kawałka kodu:

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 
       }) 
     }) 
    } 

} 

Użycie jest bardzo proste:

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

Swift 3 Wersja

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 
     }) 
    }) 
} 

}

2

iOS 9 i 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){}]; 
+0

dziękuję, używany do innego celu – Greg

2

To daje wspaniały efekt podskakujące:

@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) 
    }) 

} 
13

Swift 3 Wersja:

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 
      }) 
    }) 
+0

Świetnie, dzięki, to zadziałało – Sakthimuthiah

2

można spróbować to jeśli chcesz AUTOREVERSE efekt z obsługi realizacji.

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. 
     }) 
9

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") 
     } 
    } 

wykorzystania:

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

Kredyty: Sean Allen

4

wolę mieć animację naciśnij i ustawić go bardziej szybka niż w innych przykładach, z kontrolą realizacji do czekania do zakończenia animacji:

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) 
        }) 
      }) 
    } 
} 

Wykorzystanie:

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

dobre wykorzystanie ukończenia w celu uruchomienia rzeczy na wątku bez tego śmiesznego bzdur obracającego się koła –

1

Skalowanie przycisk lub dowolny pogląd o trzy lub więcej razy użycia następującego kodu. swift 3 lub swift 4 z 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 
         }) 
        }) 
       }) 
      }) 
     }) 
    })