大数据

购物车旋转+抛物线动画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
    作者:胥鸿儒