首页 > 学院 > 开发设计 > 正文

Swift购物车的动画的实现

2019-11-07 23:12:06
字体:
来源:转载
供稿:网友

相信大家在做电商类的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邮箱:wusong_gongzuo@163.com
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表