首先创建2个图片和一个按钮
let btn = UIButton.init(frame: CGRect.init(x: 100, y: 50, width: 50, height: 20))
btn.setTitle("购买", for: .normal)
btn.backgroundColor = UIColor.orange
btn.addTarget(self, action: #selector(butBtnClick), for: .touchUpInside)
self.view.addSubview(btn)
goodImage.frame = CGRect.init(x: 20, y: 100, width: 30, height: 30)
goodImage.image = UIImage.init(named: "商品")
self.view.addSubview(goodImage)
buyCar.frame = CGRect.init(x: 300, y: 300, width: 30, height: 30)
buyCar.image = UIImage.init(named: "购物车")
self.view.addSubview(buyCar)
然后创建一个贝塞尔曲线来描绘物品进入购物车的曲线
path.move(to: CGPoint.init(x:20,y:100))
path.addQuadCurve(to: CGPoint.init(x: 300, y: 300), controlPoint: CGPoint.init(x: 150, y: 20))
然后在按钮的点击事件中使用组合动画: 获取贝塞尔的路径,旋转动画,缩小动画
最后的组合动画方法添加了一个代理,OC中是不需要的,不知道Swift中莫名的打动画结束的协议方法了,进去一看原来新加了一个代理
//获取贝塞尔曲线的路径
let animationPath = CAKeyframeAnimation.init(keyPath: "position")
animationPath.path = path.cgPath
animationPath.rotationMode = kCAAnimationRotateAuto
//旋转
let rotate:CABasicAnimation = CABasicAnimation()
rotate.keyPath = "transform.rotation"
rotate.toValue = M_PI
//缩小图片到0
let scale:CABasicAnimation = CABasicAnimation()
scale.keyPath = "transform.scale"
scale.toValue = 0.0
//组合动画
let animationGroup:CAAnimationGroup = CAAnimationGroup()
animationGroup.animations = [animationPath,rotate,scale];
animationGroup.duration = 2.0;
animationGroup.delegate = self
animationGroup.fillMode = kCAFillModeForwards;
animationGroup.isRemovedOnCompletion = false
goodImage.layer.add(animationGroup, forKey:
nil)
协议方法:动画结束后执行购物车的抖动
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
//购物车抖动
let shakeAnimation = CABasicAnimation.init(keyPath: "transform.translation.y")
shakeAnimation.duration = 0.5
shakeAnimation.fromValue = NSNumber.init(value: -5)
shakeAnimation.toValue = NSNumber.init(value: 5)
shakeAnimation.autoreverses = true
buyCar.layer.add(shakeAnimation, forKey: nil)
}