欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

iOS CAReplicatorLayer实现脉冲动画效果

程序员文章站 2023-12-19 17:50:34
ios careplicatorlayer 实现脉冲动画效果,供大家参考,具体内容如下 效果图 脉冲数量、速度、半径、透明度、渐变颜色、方向等都可以设置。可以用...

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:

下一篇: