iOS CAReplicatorLayer实现脉冲动画效果
ios careplicatorlayer 实现脉冲动画效果,供大家参考,具体内容如下
效果图
脉冲数量、速度、半径、透明度、渐变颜色、方向等都可以设置。可以用于地图标注(annotation)、按钮长按动画效果(例如录音按钮)等。
代码已上传 github:https://github.com/silence-github/coreanimationdemo
实现原理
实现方法参考:https://github.com/shu223/pulsator
但是觉得那些代码不够简洁,所以自己写了一个,还加了些功能。
自定义 pulsatorlayer,继承自 careplicatorlayer。careplicatorlayer 可以复制子图层(sublayer),被复制出来的子图层可以改变位置、颜色等属性。每一个脉冲(一个渐变的圆形)就是一个被复制出来的子图层。
显示脉冲的图层就是子图层,把它作为 pulselayer 属性
private var pulselayer: calayer!
脉冲子图层一开始不显示,因此初始化时为全透明;通过设置圆角,使 pulselayer 为圆形
pulselayer = calayer() pulselayer.opacity = 0 pulselayer.backgroundcolor = outcolor pulselayer.contentsscale = uiscreen.main.scale pulselayer.bounds.size = cgsize(width: maxradius * 2, height: maxradius * 2) pulselayer.cornerradius = maxradius addsublayer(pulselayer)
设置 careplicatorlayer 的一些属性
// the number of copies to create, including the source layers instancecount // specifies the delay, in seconds, between replicated copies instancedelay
设置复制子图层的数量、创建两个子图层之间的时间间隔。
careplicatorlayer 遵循 camediatiming 协议,设置协议属性
// determines the number of times the animation will repeat repeatcount = maxfloat
把动画重复次数设置为很大的数,让动画一直重复。
动画效果由 3 个 cabasicanimation 组成,分别改变脉冲的大小、透明度、背景色颜色
let scaleanimation = cabasicanimation(keypath: "transform.scale.xy") scaleanimation.duration = animationduration let opacityanimation = cabasicanimation(keypath: "opacity") opacityanimation.duration = animationduration let coloranimation = cabasicanimation(keypath: "backgroundcolor") coloranimation.duration = animationduration switch pulseorientation { case .out: scaleanimation.fromvalue = minradius / maxradius scaleanimation.tovalue = 1 opacityanimation.fromvalue = maxalpha opacityanimation.tovalue = minalpha coloranimation.fromvalue = incolor coloranimation.tovalue = outcolor case .in: scaleanimation.fromvalue = 1 scaleanimation.tovalue = minradius / maxradius opacityanimation.fromvalue = minalpha opacityanimation.tovalue = maxalpha coloranimation.fromvalue = outcolor coloranimation.tovalue = incolor } let animationgroup = caanimationgroup() animationgroup.duration = animationduration + animationinterval animationgroup.animations = [scaleanimation, opacityanimation, coloranimation] animationgroup.repeatcount = repeatcount pulselayer.add(animationgroup, forkey: kpulseanimationkey)
以上代码判断了脉冲的方向(由内向外、由外向内),两种方向的动画属性起止取值相反。把这 3 个 cabasicanimation 加入 caanimationgroup 中一起执行。
以上就是实现原理与最核心的代码,具体见 github:https://github.com/silence-github/coreanimationdemo
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。