相信大家在做电商类的App的时候,一定都会遇到关于购物车的需求,这时候,如果给购物车添加一些动画,这样的话,效果会更加的逼真。
直接进入正题吧。还是老规矩,有图有真相:
//负责旋转 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
新闻热点
疑难解答