Swift购物车的动画的实现

相信大家在做电商类的App的时候，一定都会遇到关于购物车的需求，这时候，如果给购物车添加一些动画，这样的话，效果会更加的逼真。

直接进入正题吧。还是老规矩，有图有真相：

1.效果图：

这是效果图

2.文章要点：

1.使用组合动画组。

2.抛物线的实现。

在这里笔者会通过使用上述两个支持点来梳理购物车的实现逻辑。笔者只会讲解关节代码部分，如有需要的demo的，我下面也会有此篇demo的下载链接。

3.实现物体旋转的代码。

   //负责旋转 rotation        let basicAnimation = CABasicAnimation(keyPath: "transform.rotation")        basicAnimation.isRemovedOnCompletion = true        basicAnimation.fromValue = NSNumber(value: 0)        basicAnimation.toValue = NSNumber(value: 3 * 2 * M_PI)//这里是旋转的角度 共是：3圈 （2 * M_PI）是一圈        basicAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)

这里是的keyPath的路径'transform.rotation.z'，当然这里不要是不写z的话，也是可以的，因为默认的也是绕Z轴旋转，顺便说一下，我们iOS手机端的是左手定则，mac开发是右手定则。

M_PI是半圈，所以这里的3 * 2 * M_PI是三圈。

4.物体移动路线的制定。

//创建路径 其路径是抛物线        let path : UIBezierPath = UIBezierPath()        path.move(to: (layer?.position)!)        path.addQuadCurve(to: finishPoint, controlPoint:CGPoint(x: myWindow.frame.size.width/2, y: rect.origin.y - 40))                //这里要使用组合动画 一个负责旋转，另一个负责曲线的运动        //创建 关键帧动画 负责曲线的运动        let pathAnimation : CAKeyframeAnimation = CAKeyframeAnimation(keyPath: "position")//位置的平移        pathAnimation.path = path.cgPath

估计有的同学也猜到了，这里的keyPath是'position'。当然这里指的是物体的位移（Z坐标为0,平移）,可能有同学对addQuadCurve(),不是特别的了解，下面的我也上传一张图片，估计大部分都会瞬间懂了。

不是很简单呀，这是在初三的时候学的抛物线。二次方程，不过在这里我要感谢我的龚成同学。

这里的里面的controllPoint点就A，B,C，中的A点，是不是瞬间大家都懂了。

5.组合动画的实现的代码

     let groups : CAAnimationGroup = CAAnimationGroup()     groups.animations = [pathAnimation,basicAnimation]     groups.duration = 1.5//国际单位制 S     groups.fillMode = kCAFillModeForwards     groups.isRemovedOnCompletion = false     groups.delegate = self     self.layer?.add(groups, forKey: "groups")

这里面就是设置一些动画的时间和代理什么的。好了，到此为止，关键的代码都已经讲解完了。

总结

其实iOS中的动画不是很难，不过数学的基础要相对好点，这样的话，学起动画来，可能更方便和快速。

其下载的连接：https://github.com/WSmalan/Swift-BuyGoodsCar

如有问题的可直接评论，或者通过以下方式联系笔者：

qq: 3145419760

微信号：WsMl0612

邮箱：[e-mail]