当前位置： 移动技术网 > 移动技术>移动开发>IOS > iOS CAReplicatorLayer实现脉冲动画效果

iOS CAReplicatorLayer实现脉冲动画效果

2019年07月24日  | 移动技术网移动技术  | 我要评论

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网