CABasicAnimation圆形CAShapeLayer在地图上移动，而不是缩放

CABasicAnimation是iOS开发中的一个动画类，用于创建基本的动画效果。CAShapeLayer是CALayer的子类，用于绘制和管理图形路径。在地图上移动圆形CAShapeLayer，可以通过以下步骤实现：

创建CAShapeLayer对象，并设置其路径为一个圆形。可以使用UIBezierPath来创建圆形路径，然后将其设置为CAShapeLayer的path属性。

let circleLayer = CAShapeLayer()
let circlePath = UIBezierPath(arcCenter: CGPoint(x: centerX, y: centerY), radius: radius, startAngle: 0, endAngle: CGFloat.pi * 2, clockwise: true)
circleLayer.path = circlePath.cgPath

创建CABasicAnimation对象，并设置其属性为位置变化。可以使用keyPath属性来指定动画的属性类型为position。

let animation = CABasicAnimation(keyPath: "position")

设置动画的起始位置和结束位置。可以使用fromValue和toValue属性来设置动画的起始值和结束值。

animation.fromValue = NSValue(cgPoint: startPoint)
animation.toValue = NSValue(cgPoint: endPoint)

设置动画的其他属性，如动画的持续时间、重复次数、速度等。

animation.duration = 2.0
animation.repeatCount = Float.infinity
animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

将动画添加到CAShapeLayer上，并将CAShapeLayer添加到地图的对应图层上。

circleLayer.add(animation, forKey: "positionAnimation")
mapView.layer.addSublayer(circleLayer)

通过以上步骤，就可以在地图上实现一个圆形CAShapeLayer的移动动画效果。

推荐的腾讯云相关产品：腾讯云地图服务（https://cloud.tencent.com/product/maps）可以提供地图相关的服务和功能，如地图展示、地理编码、路径规划等，可以与上述动画效果结合使用。

相关·内容

iOS动画三板斧（二）--CoreAnimation动画介绍使用附加

先上个示例代码，将一个视图往上移动一段距离： ?...先看示例代码，动画效果是视图一边向上移动，一边绕Y轴旋转： ?...CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise // 绘制圆形曲线...- (void)appendPath:(UIBezierPath *)bezierPath; // 拼接曲线如果将路径显示的图案显示到视图上呢？...进度条.gif 上图这样的视图是用UIBezierPath用多个CAShapeLayer制作出来的，而动画效果只需要改变进度的layer的strokeEnd和修改下面代表水面进度的视图位置即可。

1.1K4 0

绘图-CAShapeLayer、CABasicAnimation以及核心动画

CAShapeLayer有不同于CALayer的属性，它从CALayer继承而来的属性在绘制时是不起作用的。...#比如末端是矩形还是圆形，都是 UIBezierPath的设置，而且fillColor 也是 UIBezierPath区域内的颜色。...这面这个例子就是使用 CAShapeLayer与UIBezierPath以及CABasicAnimation结合在一起，实现的动态画图。 ?...(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值。...而实际上,keyPath的值(layer的属性)在动画运行这一过程中,是没有任何变化的,它只是调用了GPU去完成这些显示效果而已.

2.7K3 0

iOS CAShapeLayer和UIBezierPath的使用

1.CAShapeLayer简介 CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。...一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。...3.简单的使用使用CAShapeLayer和UIBezierPath画一条直线和一个椭圆形，效果如下： ?...CGColor; shapeLayer.path = path.CGPath; [self.view.layer addSublayer:shapeLayer]; // 2,绘制一个椭圆形...肯定不是啦，不然我怎么会特（gu）意（yi）写出来呢？先看看效果： ?

1.9K3 0

iOS Core Animation的用法

CAAnimation可分为以下四种： CABasicAnimation 通过设定起始点，终点，时间，动画会沿着你这设定点进行移动。...position = 位置 shadowColor shadowOffset shadowOpacity shadowRadius 有用的属性设置 Autoreverses 当你设定这个属性为 true 时,在它到达目的地之后...#define定义的常量 kCATransitionFade 交叉淡化过渡 kCATransitionMoveIn 新视图移到旧视图上面 kCATransitionPush...是一个通过矢量图形而不是bitmap来绘制的图层子类。...一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。不会出现像素化。

1.3K3 0

绘图-几个较复杂统计图案例的实现分析

后，直接对 CAShapeLayer的strokeEnd 作CABasicAnimation动画，就会出现，三条横线依次出现的动画，很巧妙，而不是你看到的初始化三条UIBezierPath。...最后对CAShapeLayer的strokeEnd 作CABasicAnimation动画即可实现。...小圆点的动画根据数据源，在每一数据点处放上一个自定义UIView，在此自定义UIView的drawRect中绘制圆形图形，并且设置 shape.layer.opacity = 0;，即让这些小圆点（...渐变区域的动画我们仔细观察上图会发现，渐变区域的动画是这样的，先慢慢变清晰，同时波浪往上移动的效果，它是怎样实现的呢？...recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, scale, scale); //在已缩放大小基础下进行累加变化

1.4K2 0

Swift动画 —— 进度条

在viewDidLoad中将shapeLayer的.strokeEnd 设为0 shapeLayer.strokeEnd = 0 之后在handleTap中为shapeLayer添加动画。...这里有个问题就是开始的位置应该是圆的上方而不是右边，这里就需要去修改shapeLayer的transform,这样就会从圆的上方开始动画了。...shapeLayer.transform = CATransform3DMakeRotation(-CGFloat.pi / 2, 0, 0, 1) （滑动显示更多）这里还有个问题就是圆圈的头是直线而不是圆形的...let pulsatingLayer = CAShapeLayer() 在viewDidLoad中设置好属性并添加为view的layer的sublayer pulsatingLayer.path =...在方法里为pulsatingLayer添加一个放大1.5倍。时间为1秒的动画,并将其autoreverses设为true，这样放大后会自动缩放到原来的大小,最后将重复次数设为无限大。

2.7K1 0

iOS动画系列之七：实现类似Twitter的启动动画1. CAKeyframeAnimation2. CAAnimationGroup3. 实现类似Twitter的启动动画

在码云上看了一下下载的统计，发现其实下载的童鞋并不是特别多。如果只是看看思路，或者复习一下这些基础知识，确实是很快。但是如果对于这些内容不是特别熟悉，建议还是敲一边代码，看看自己能碰到什么坑。...只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值。...= @(M_PI * 2); // 创建缩放的动画 CABasicAnimation *basicScale = [CABasicAnimation animationWithKeyPath...它类似于一个子图层，相对于父图层（即拥有该属性的图层）布局，但是它却不是一个普通的子图层。不同于其他能够在父图层中绘制出图像的子图层，mask图层定义了父图层的部分可见区域。...好，下篇其实有一个重头，就是CAShapeLayer。因为在工作中碰到的大部分动画都是通过UIView的动画block实现，其他都基本上都是需要用到CAShapeLayer。

1.4K3 0

浅汇－iOS 动画

其次，我们知道iOS平台的Cocoa Touch 是源于OS X平台的Cocoa)，是在Cocoa的基础上添加了适用于移动手机设备的手势识别、动画等特性；但从底层实现上来说，Cocoa Touch与Cocoa...比如：位移、透明度、缩放、旋转、背景色等等。...`CABaseAnimation只能从一个数值（fromValue）变换成另一个数值（toValue）,而CAKeyframeAnimation则会使用一个NSArray保存一组关键帧。...CGFloat tx, CGFloat ty) CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty) 特殊地,...; transform严格的说不是一种动画，而是动画中的一部分操作，我拿出来说是因为它同时出现在了UIView 动画和CALayer动画中。

8253 0

学会不一样的Loading图

gif图比效果偏快前言：越来越多的应用，在等待网络时使用闪烁的效果，那么这种效果，如何实现？...*maskLayer = [CAShapeLayer layer]; maskLayer.path = totalCoverablePath.CGPath; maskLayer.fillColor...也就是说在遮罩层中有对象的地方就是“透明”的，可以看到被遮罩层中的对象，而没有对象的地方就是不透明的，被遮罩层中相应位置的对象是看不见的。它的原理是：上面一层是遮罩层，下面一层是被遮罩层。...假定遮罩层上是一个正圆，那么光线就会透过这个圆形，射到下面的被遮罩层上，只会显示一个圆形的图形。如果遮罩层上什么都没有，那么光线就无法透到下面来，那么下面的被遮罩层什么也显示不出来。...上述代码，得出如下效果：上述效果，其实很多app就单纯这样使用了，但是我们为了更美化，决定为其增加动态效果 3、为渐变层增加动态效果 // 动画 animate CABasicAnimation

8984 0

绘图- 镂空效果及其动画实现解析

（2）当CAShapeLayer的backgroundColor不是clearColor的时候，CAShapeLayer的显示区域就是它本身的Frame，跟它的path区域就没关系了。...self.bounds.size.height); [self.layer addSublayer:self.waveCosLayer]; 因为我设置了self.waveSinLayer的背景为红色，所以它里面的path形成的波浪便不再显示，而...移动.gif CGPoint position = self.waveSinLayer.position; position.y = position.y - self.bounds.size.height...-10; CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"]; animation.fromValue...animation forKey:@"positionWave"]; [self.waveCosLayer addAnimation:animation forKey:@"positionWave"]; 使用CABasicAnimation

2.1K2 0

Android仿新版微信浮窗效果

panBack:(CADisplayLink *)link { //判断手势状态 if (self.edgePan.state == UIGestureRecognizerStateChanged) {//移动过程...//手指在右下视图上的位置(若 x 0 && y 0 说明此时手指在右下视图上) CGPoint touchPoint = [kWindow convertPoint:[self.edgePan locationInView...*maskLayer = [CAShapeLayer layer]; maskLayer.path = maskFinalBP.CGPath; toVC.view.layer.mask = maskLayer...; //动画类 CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; maskLayerAnimation.fromValue...#import “HKFloatManager.h” 中 //在AppDelegate中将类名传入即可,在该类控制器侧滑返回时启动浮窗功能(需要在实例化导航控制器之后) [HKFloatManager

8932 0

从案例出发，由浅到深了解 iOS 动画

sonar(CACurrentMediaTime() + 1.84) } * * * 例子四：加载动画 [image] 这是 UIView 框架自带的动画，看起来不错，就是做了一个简单的缩放...self.dotThree.transform = CGAffineTransform.identity }, completion: nil) } * * * 例子五：下划线点击转移动画...这里动画效果的主要用到 strokeEnd 属性, 笔画结束插值的时候，要注意，下一段动画的开始，正是上一段动画的结束 // 这个用来，主要的效果 let progressLayer = CAShapeLayer...return gradientLayer }() // 文字转图片，然后绘制到视图上 // 通过设置渐变图层的遮罩 `mask` , 为指定文字，来设置渐变闪烁的效果...一般这种动画，我们用 Lottie * * * 例子十：文本变换动画 [image] 这个动画有些复杂，重点使用了 CoreAnimation 的组动画，叠加了五种效果，缩放、尺寸、布局、位置与透明度。

7143 0

iOS动画-CAAnimation使用详解

，现实中的任何物体都会在运动中经历加速或者减速的过程，而不是速度骤变；因此，CoreAnimation也内嵌了一系列标准的缓冲函数来使动画看起来更平滑自然，这就是我们要说到的动画缓冲。...在屏幕上绘制曲线(此步骤对于动画不是必须的，只是为了动画看起来更直观)； 3.创建用于显示飞机的视图，将其设置在贝塞尔曲线的初始位置； 4.创建并执行关键帧动画，实现飞机飞行的曲线动画； - (void...九、委托模式下的动画区分对于CAAnimation而言，使用委托模式而不是一个完成块会带来一个问题，那就是设置多个动画时，无法在回调方法中区分。...，然后在回调用比较，但实际上并不起作用，因为委托传入的动画参数是原始值的一个深拷贝，从而不是同一个值。...度的动画；可以使用相对值而不是绝对值旋转，设置byValue而不是toValue；可以不用创建CATransform3D，而是使用一个简单的数值来指定角度；不会和transform.position

2.2K1 0

iOS Core Animation:Advanced Techniques

第1篇：CAShapeLayer CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。...如果修改代码让-hitTest:直接作用于colorLayer而不是呈现图层，你会发现当图层移动的时候它并不能正确显示。...这时候你就需要点击图层将要移动到的位置而不是图层本身来响应点击（这就是为什么用呈现图层来响应交互的原因）。...Core Animation使用缓冲来使动画移动更平滑更自然，而不是看起来的那种机械和人工，在这一章我们将要研究如何对你的动画控制和自定义缓冲曲线。...在这个例子中，我们自始至终想使用同一个缓冲函数，但我们同样需要一个函数的数组来告诉动画不停地重复每个步骤，而不是在整个动画序列只做一次缓冲，我们简单地使用包含多个相同函数拷贝的数组就可以了。

1.8K3 0

iOS动画系列之五：基础动画之缩放篇&旋转篇Swift+OC1. 思路和最终成果2. 抽取公共方法3. 懒加载Layer4. 添加动画

这一篇主要介绍基础动画之缩放和旋转。这些基本操作分享完之后，我想想可以找个稍微复杂一点点的动画做做啦。这篇继续基础篇，分享一下缩放和旋转。...使用extension区分代码静态截取图：是不是很清晰？ ?...是不是懒到家了？关于keyPath的字段有啥作用，可以看看第三篇：iOS动画系列之三：Core Animation。介绍了Core Animation的常用属性和方法。...懒加载Layer 懒加载的目的是为了在View实例化的时候不进行创建，用的时候才进行创建。这样可以一定程度上提高效率。...第八篇：iOS动画系列之八：使用CAShapeLayer绘画动态流量图第九篇：iOS动画系列之九：实现点赞的动画及播放起伏指示器第十篇：实战系列:绘制过山车场景

2.3K1 0

iOS开发UI篇--iOS动画（Core Animation）总结

这种自动化的图形加速技术让动画拥有更高的帧率并且显示效果更加平滑，不会加重CPU的负担而影响程序的运行速度。...效果演示：位移动画代码演示： //使用CABasicAnimation创建基础动画 CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath...（位移动画、旋转动画、组动画） 3、点击黑色小按钮，其他按钮消失，被点击的黑色按钮变大变淡消失。（缩放动画、alpha动画、组动画）小编的话：代码过多，这里不做演示。文章最后提供代码下载地址。...4.5.2：仿钉钉菜单效果效果演示：看上去挺炫的，其实实现很简单，就是位移动画+缩放动画。 4.5.3：点赞烟花效果动画效果演示：这里其实只有按钮变大效果使用的缩放动画。...动画其实也不是那么难。六、下载地址推广一个我的iOS交流平台：624212887，群文件自行下载，不管你是小白还是大牛热烈欢迎进群，分享面试经验，讨论技术，大家一起交流学习成长！

1.6K0 0

iOS学习——核心动画

它有一个削弱的效果，应用的场景比如一扇门慢慢地关上，而不是砰地一声。 kCAMediaTimingFunctionEaseInEaseOut：动画在开始和结束时速度较慢，中间时间段内速度较快。...fillMode主要有四种类型： kCAFillModeForwards :动画开始之后layer的状态将保持在动画的最后一帧，而removedOnCompletion的默认属性值是 YES，所以为了使动画结束之后.../* CABasicAnimation应用心跳效果思路:就是让一张图片做一个放大缩放小的动画. */ //代码实现: - (void) viewDidLoad...{ CABasicAnimation *anim =[CABasicAnimation animation]; //设置缩放属性 anim.keyPath = @"transform.scale...的重要属性： type：过渡动画的类型 //转场类型,字符串类型参数.系统提供了四中动画形式: //kCATransitionFade//淡出效果//kCATransitionMoveIn//新视图移动到旧视图上

1.2K5 0

分分钟解决iOS开发中App启动广告的功能

前不久有朋友需要一个启动广告的功能，我说网上有挺多的，他说，看的不是很理想。...UIWindow *)window andType:(NSInteger)type andImgUrl:(NSString *)url; @end 里面主要重写了init方法，init方法方便我们在调用封装的类初始化时传递一些参数...byRoundingCorners:UIRectCornerBottomRight | UIRectCornerTopRight cornerRadii:CGSizeMake(15, 15)]; CAShapeLayer...*maskLayer = [[CAShapeLayer alloc] init]; maskLayer.frame = self.skipBtn.bounds; maskLayer.path...; countDownTimer = nil; [self startcloseAnimation]; } } #pragma mark - 指定宽度按比例缩放

1.2K6 0

分分钟解决iOS开发中App启动广告的功能

allluckly.cn 前不久有朋友需要一个启动广告的功能，我说网上有挺多的，他说，看的不是很理想。...(UIWindow *)window andType:(NSInteger)type andImgUrl:(NSString *)url; @end 里面主要重写了init方法，init方法方便我们在调用封装的类初始化时传递一些参数...byRoundingCorners:UIRectCornerBottomRight | UIRectCornerTopRight cornerRadii:CGSizeMake(15, 15)]; CAShapeLayer...*maskLayer = [[CAShapeLayer alloc] init]; maskLayer.frame = self.skipBtn.bounds; maskLayer.path...countDownTimer = nil; [self startcloseAnimation]; } } #pragma mark - 指定宽度按比例缩放

3.4K4 1

实践－小效果 III

饼状图.gif 大家都知道这是通过 CAShapeLayer 和 CABasicAnimation 结合起来实现的，可是其中还是有需要注意的地方，实现的步骤大致如下：绘制一个 CAShapeLayer...不用指定大小，_pieLayer = [CAShapeLayer layer]; 绘制三个彩色的扇形CAShapeLayer 并加载在 _pieLayer 上。...绘制一个遮盖住这三个 CAShapeLayer 的 CAShapeLayer 并赋值给 _pieLayer.mask ,我们都知道 maskLayer的颜色是不会印象视图的显示的，视图的显示只跟maskLayer..._pieLayer.mask 添加 CABasicAnimation 动画，使 _pieLayer.mask 动画绘制，就达到了 _pieLayer 的动态绘制，其实是无法对 _pieLayer 动态绘制...UIEdgeInsetsMake(Scale_Y(5), Scale_X(7), Scale_Y(7), Scale_X(7))]; 不过值得一提的是使用 SDWebImage为UIButtont添加的是内容Image，而不是

1.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

CABasicAnimation圆形CAShapeLayer在地图上移动，而不是缩放

相关·内容

iOS动画三板斧（二）--CoreAnimation动画介绍使用附加

绘图-CAShapeLayer、CABasicAnimation以及核心动画

iOS CAShapeLayer和UIBezierPath的使用

iOS Core Animation的用法

绘图-几个较复杂统计图案例的实现分析

Swift动画 —— 进度条

iOS动画系列之七：实现类似Twitter的启动动画1. CAKeyframeAnimation2. CAAnimationGroup3. 实现类似Twitter的启动动画

浅汇－iOS 动画

学会不一样的Loading图

绘图- 镂空效果及其动画实现解析

Android仿新版微信浮窗效果

从案例出发，由浅到深了解 iOS 动画

iOS动画-CAAnimation使用详解

iOS Core Animation:Advanced Techniques

iOS动画系列之五：基础动画之缩放篇&旋转篇Swift+OC1. 思路和最终成果2. 抽取公共方法3. 懒加载Layer4. 添加动画

iOS开发UI篇--iOS动画（Core Animation）总结

iOS学习——核心动画

分分钟解决iOS开发中App启动广告的功能

分分钟解决iOS开发中App启动广告的功能

实践－小效果 III

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐