Swift购物车的动画的实现

最新推荐文章于 2026-06-07 09:28:48 发布

原创最新推荐文章于 2026-06-07 09:28:48 发布 · 1.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Swift #iOS #购物车 #动画

iOS 同时被 3 个专栏收录

13 篇文章

订阅专栏

Swift

5 篇文章

订阅专栏

动画

3 篇文章

订阅专栏

相信大家在做电商类的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")

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