如何在UIImageView上放置摇动动画

Question

我正在尝试在UIImageView上添加永久性的Shake Animation。 我也该如何控制其动画时间。

 var coffeeImageView = UIImageView(image: UIImage(named: "coffee.png"))
        shakeImg.frame = CGRectMake(100, self.view.frame.size.height - 100, 50, 50)
        self.view.addSubview(coffeeImageView)

        let coffeeShakeAnimation = CABasicAnimation(keyPath: "position")
        coffeeShakeAnimation.duration = 0.07
        coffeeShakeAnimation.repeatCount = 20
        coffeeShakeAnimation.autoreverses = true
        coffeeShakeAnimation.fromValue = NSValue(cgPoint: CGPointMake(shakeImg.center.x - 10, shakeImg.center.y))
        coffeeShakeAnimation.toValue = NSValue(cgPoint: CGPointMake(shakeImg.center.x + 10, shakeImg.center.y))
        shakeImg.layer.add(coffeeShakeAnimation, forKey: "position")

Answer 1

我更喜欢使用UIView Extension来实现具有可重用性的动画。

快捷键4

extension UIView {
    func shake(_ duration: Double? = 0.4) {
        self.transform = CGAffineTransform(translationX: 20, y: 0)
        UIView.animate(withDuration: duration ?? 0.4, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 1, options: .curveEaseInOut, animations: {
            self.transform = CGAffineTransform.identity
        }, completion: nil)
    }
}

用法

coffeeImageView.shake()
coffeeImageView.shake(0.2)

Answer 2

尝试一下！

class func shakeAnimation(_ view: UIView) {
    let animation = CABasicAnimation(keyPath: "position")
    animation.duration = 0.06
    animation.repeatCount = 2
    animation.autoreverses = true
    animation.isRemovedOnCompletion = true
    animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut)
    animation.fromValue = NSValue(cgPoint: CGPoint(x: view.center.x - 7, y: view.center.y))
    animation.toValue = NSValue(cgPoint: CGPoint(x: view.center.x + 7, y: view.center.y))
    view.layer.add(animation, forKey: nil)
}

Answer 3

您需要

var coffeeImageView = UIImageView(image: UIImage(named: "coffee.png"))
coffeeImageView.frame = CGRect(x: 100, y: self.view.frame.size.height - 100, width: 50, height: 50)
self.view.addSubview(coffeeImageView) 
let coffeeShakeAnimation = CABasicAnimation(keyPath: "position")
coffeeShakeAnimation.duration = 0.07
coffeeShakeAnimation.repeatCount = 20
coffeeShakeAnimation.autoreverses = true
coffeeShakeAnimation.fromValue = NSValue(cgPoint: CGPoint(x: coffeeImageView.center.x - 10, y: coffeeImageView.center.y))
coffeeShakeAnimation.toValue = NSValue(cgPoint: CGPoint(x: coffeeImageView.center.x + 10, y: coffeeImageView.center.y))
coffeeImageView.layer.add(coffeeShakeAnimation, forKey: "position")

---

extension UIView {
    func shake(_ dur:Double) {
        let anim = CABasicAnimation(keyPath: "position")
        anim.duration = dur
        anim.repeatCount = 20
        anim.autoreverses = true
        anim.fromValue = NSValue(cgPoint: CGPoint(x: self.center.x - 10, y: self.center.y))
        anim.toValue = NSValue(cgPoint: CGPoint(x: self.center.x + 10, y: self.center.y))
        self.layer.add(anim, forKey: "position")
    }
}