在这互联网金融铺天盖地的年代，购物车相信大家都不陌生。最近被一个朋友问起购物车模块的实现，恰好最近两个项目也有涉及到购物车这个模块，只不过当时是用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
作者：胥鸿儒
网友评论