复杂路径的动画,我们可以借助关键关键帧动画(CAKeyframeAnimation)来实现,给其的path属性设置相应的路径信息即可。
以下为一个红色的小球按照指定的路径运动的动画。
此动画关键在于如何把路径画出来(如两个圆弧)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | //创建一个可变路径 let circleKeyframePath = CGPathCreateMutable () //创建用于转移坐标的Transform,这样我们不用按照实际显示做坐标计算,以这个坐标做基准点。坐标为下半个弧的中心点 var circleKeyframeTransform : CGAffineTransform = CGAffineTransformMakeTranslation ( self . view . frame . size . width / 2 , 260 ) CGPathMoveToPoint ( circleKeyframePath , & circleKeyframeTransform , 0 , 0 ) //CGPathAddLineToPoint(circleKeyframePath, &circleKeyframeTransform, -100, 0) //创建一个1/4弧(圆的左下角弧) CGPathAddArc ( circleKeyframePath , & circleKeyframeTransform , 0 , - 100 , 100 , CGFloat ( 0.5 * M_PI ), CGFloat ( M_PI ), false ) CGPathAddLineToPoint ( circleKeyframePath , & circleKeyframeTransform , - 100 , - 100 ) CGPathAddLineToPoint ( circleKeyframePath , & circleKeyframeTransform , - 50 , - 100 ) //创建一个以半径为50的两条切线的内切圆弧 CGPathAddArcToPoint ( circleKeyframePath , & circleKeyframeTransform , 0 , - 200 , 50 , - 100 , 50 ) CGPathAddLineToPoint ( circleKeyframePath , & circleKeyframeTransform , 50 , - 100 ) CGPathAddLineToPoint ( circleKeyframePath , & circleKeyframeTransform , 100 , - 100 ) //CGPathAddLineToPoint(circleKeyframePath, &circleKeyframeTransform, 100, 0) //创建一个1/4弧(圆的右下角弧) CGPathAddArc ( circleKeyframePath , & circleKeyframeTransform , 0 , - 100 , 100 , 0 , CGFloat ( 0.5 * M_PI ), false ) //关闭路径 CGPathCloseSubpath ( circleKeyframePath ) let backgroundLayer : CAShapeLayer = CAShapeLayer () backgroundLayer . path = circleKeyframePath backgroundLayer . strokeColor = UIColor . yellowColor (). CGColor backgroundLayer . lineWidth = 3 backgroundLayer . fillColor = UIColor . clearColor (). CGColor self . view . layer . addSublayer ( backgroundLayer ) |
此时在模拟器上运行后的效果如下:
看起来还不错哦。像个元宝,呵,接下来就创建一个UIView对象让它成圆形,并按此路径做运动即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | let circleView : UIView = UIView ( frame : CGRect ( x : 0 , y : 0 , width : 20 , height : 20 )) let redCircleLayer : CAShapeLayer = CAShapeLayer () let redCirclePath : UIBezierPath = UIBezierPath ( ovalInRect : CGRect ( x : 0 , y : 0 , width : 20 , height : 20 )) redCircleLayer . path = redCirclePath . CGPath redCircleLayer . fillColor = UIColor . redColor (). CGColor circleView . layer . addSublayer ( redCircleLayer ) self . view . addSubview ( circleView ) //创建关键帧动画对象 let circleKeyframeAnimation : CAKeyframeAnimation = CAKeyframeAnimation ( keyPath : "position" ) circleKeyframeAnimation . path = circleKeyframePath circleKeyframeAnimation . duration = 5 //让 Core Animation 向被驱动的对象施加一个恒定速度,不管路径的各个线段有多长。 circleKeyframeAnimation . calculationMode = kCAAnimationPaced circleKeyframeAnimation . repeatCount = HUGE //让它自身也做旋转,不过是圆的看不出效果 circleKeyframeAnimation . rotationMode = kCAAnimationRotateAutoReverse //print(circleView.layer.anchorPoint) circleView . layer . addAnimation ( circleKeyframeAnimation , forKey : nil ) |
到此,就完成了,比较重要的要区分CGPathAddArc以及CGPathAddLineToPoint的不同,不同可以参考StackOverflow
CGPathAddArc方法工作方式类似于,(x,y)为圆心所在的坐标,radius为圆的半径,startAngle路径开始的角度按弧度算,endAngle路径结束的角度按弧度算,
clockwise方向(与实际的方向相反)
CGPathAddLineToPoint方法工作如下图,x1,y1,x2,y2为方法的四个位置参数,r为半径。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端
2015-07-18 SWIFT中调用Segue的几个方法
2015-07-18 SWIFT中将信息保存到plist文件内
2015-07-18 SWIFT中获取配置文件路径的方法
2012-07-18 ALV调用的几个标准函数
2012-07-18 简单的ALV显示信息