iOS水波纹动画中心扩散效果
iOS 的水波纹动画，挺适合用在按钮点击或者界面过渡的时候。它从中心扩散开来，颜色还能渐变，看起来顺滑。实现上主要靠Core Animation，用到的是CALayer和CAKeyframeAnimation这些老熟人。
水波纹的核心是一个自定义的CALayer，不靠图片，直接用动画画出来。layoutSubviews里确定初始位置和形状，透明度和半径就靠动画搞定，扩散起来贼自然。
动画属性定义挺关键，opacity控制透明度，radius控制扩散大小。你可以用CADisplayLink或NSTimer来更新这些值，动画就能持续动起来。
渐变效果用CGGradientRef，从中心的浅色过渡到边缘的深色，视觉上有点像水面荡开的感觉。记得用CGColorSpace控制色彩空间，渐变才自然。
接下来就靠CAKeyframeAnimation搞定关键帧了。定义好keyPath、values、keyTimes这些属性后，动画节奏就稳了。再配点timingFunctions，缓动效果也有了。
加动画到图层简单，用addAnimation:forKey:把动画绑上去。你可以控制播放次数、持续时间，甚至设置无限循环，想怎么扩就怎么扩。
想要触发动画？监听按钮的touchUpInside事件，用户一点击就跑动画，还可以把动画播放完之后恢复初始状态，准备下一次触发。
性能方面也别忽略。设备性能不强或者动画多的时候，可以试试降低帧率，或者搞个异步绘制，动画依旧流畅，体验不掉队。
如果你平时做触控反馈或者 UI 动效比较多，这个水波纹方案还挺值得收藏的。动画自然、扩展性强、性能也还不错，用起来蛮顺手。
文件大小：2.44KB
评论区