购物车旋转+抛物线动画Swift实现

在这互联网金融铺天盖地的年代，购物车相信大家都不陌生。最近被一个朋友问起购物车模块的实现，恰好最近两个项目也有涉及到购物车这个模块，只不过当时是用OC写的，所以就分模块写了个Swift版的demo。
1.首页的布局
现在假设首页的布局是采用UICollectionView的布局，自定义cell和flowLayout，每一个cell上展示的都是一些商品信息，然后有一个加号添加按钮，实现代码很简单就不详述了（可看demo），效果具体如图

cell展示图.png

2.cell的说明
由于按钮是在cell上，但是购物车是在tabBar上，因此如果直接在cell中实现动画想拿到tabBar上控件坐标是比较麻烦的事情，我这里是使用了代理方法，把点击事件抛给控制器，代码如下：

• 定义代理方法

// cell的代理方法
protocol XHRCollectionViewCellDelegate : NSObjectProtocol
{
   func collectionViewCellDidClickAddButton(image:UIImage?,centerPoint:CGPoint,button:UIButton)
}

• 处理点击事件
  在动画过程中禁用添加按钮，待动画完成过后再打开，用户体验会好一点。

 //按钮的点击方法
    func actionDidClickAddButton(sender:UIButton)
    {
        sender.enabled = false
        let centerPoint = contentView.convertPoint(imageView.center, toView: XHRKeyWindow)
        delegate?.collectionViewCellDidClickAddButton(imageView.image,centerPoint: centerPoint,button:sender)
    }

3.controller中处理代理方法

• 首先判断需要做动画的image存在与否
• 利用给定的image创建一个和原位置相同的UIImageView添加到窗口上，这里传出来的中心点是经过坐标转化过的主窗口的中心点坐标

  //这里是cell的代理方法,把需要做动画的图片和中心点以及点击的button传出来了
    func collectionViewCellDidClickAddButton(image: UIImage?, centerPoint: CGPoint, button: UIButton) {
        //先判断image是否有值
        guard let _ = image else
        {
            return
        }
        //创建动画的imageView
        let animationImageView = UIImageView(image:image)
        animationView = animationImageView
        animationImageView.center = centerPoint
        //把动画imageView添加到主窗口上
        XHRKeyWindow!.addSubview(animationImageView)
        //开始动画
        startAnimation(animationImageView,button: button)
    }

4.最核心的部分动画部分

• 动画分两个部分：第一个是CABasicAnimation，另外一个是CAKeyframeAnimation。CABasicAnimation是用来做旋转动画的，CAKeyframeAnimation是用来做抛物线动画的。然后把两者加入动画组就OK。每一步解释请看注释：
• endPoint 这个坐标是购物车的中心点坐标转化为主窗口上的坐标，具体的代码实现是在自定义UITabBarController中实现的，代码如下

//用这个方法来计算购物车中心点的在主敞口上的坐标
    private func getShoppCartCenter()
    {
        for childView in tabBar.subviews
        {
            if childView.isKindOfClass(XHRShoppingCartButton.self)
            {
                //转换坐标系
                shoppCartCenter = tabBar.convertPoint(childView.center, toView: XHRKeyWindow)
                return
            }
        }
    }

以下是动画的具体实现代码

//这里把点击的button传过来是为了调整它的enable属性保证动画过程中按钮不可以被点击,加强用户体验
    private func startAnimation(imageView:UIImageView,button:UIButton)
    {
        //初始化旋转动画
        let animation = CABasicAnimation(keyPath: "transform.rotation.z")
        //设置属性
        animation.toValue = NSNumber(double: M_PI * 11)
        animation.duration = 1
        animation.cumulative = true;
        animation.repeatCount = 0;
        //初始化抛物线动画
        let pathAnimation = CAKeyframeAnimation(keyPath: "position")
        let startPoint = imageView.center
        let endPoint = (tabBarController as! XHRTabBarController).shoppCartCenter
        //抛物线的顶点,可以根据需求调整
        let controlPoint = CGPointMake(XHRScreenWidth * 0.5, startPoint.y - 100);
        //生成路径
        let path = CGPathCreateMutable();
        //描述路径
        CGPathMoveToPoint(path, nil, startPoint.x, startPoint.y)
        CGPathAddQuadCurveToPoint(path, nil, controlPoint.x, controlPoint.y, endPoint.x, endPoint.y)
        //设置属性
        pathAnimation.duration = 1
        pathAnimation.path = path
        //初始化动画组
        let animationGroup = CAAnimationGroup()
        animationGroup.animations = [animation,pathAnimation]
        animationGroup.duration = 1
        animationGroup.delegate = self
        //延时的目的是让view先做UIView动画然后再做layer动画
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (Int64)(100000000)), dispatch_get_main_queue(), {() -> Void in
            imageView.layer.addAnimation(animationGroup, forKey: nil)
        })
        UIView.animateWithDuration(1, animations: { () -> Void in
            imageView.bounds = CGRectMake(0, 0, 10, 10)
            imageView.center = endPoint
            }) { (_) -> Void in
              button.enabled = true
        }
    }

5.待动画完成后，执行完成后的业务逻辑

   //动画结束后调用的代理方法,将动画的imageView移除,将来还有刷新购物车数据之类的事情可以在这个方法里面做
   override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
//移除动画imageView
       self.animationView?.removeFromSuperview()
//发出添加完成的通知（伪代码）  
NSNotificationCenter.defaultCenter().postNotificationName(XHRSucceedAddToShoppingMartNotification, object: "商品ID")
   }

Tips:以上是我项目中的需求，具体的还要看各个人的需求，可以在组动画上动手脚来实现不同的动画模式。
demo地址：https://github.com/xuhongru/ShoppingCartAnimation
作者：胥鸿儒