用 key frame animation 实现一个扩散水波效果

这里实际上是利用中间原点的图不动, 然后两个外圈的图片放大来达到效果的.

// 水波扩散动画: 主要是通过扩大效果来实现.
// 利用循环的 keyframe 动画来实现. 一个 timer 控制. 只动 3 环和 2 环, 一环不动, 然后动图片.
UIView
  .animateKeyframes(withDuration: 1.0, delay: 0.0, options: [.repeat], animations: {
    UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.5, animations: {// 0% ~ 50%
      self.imageV2.transform = self.imageV2.transform.scaledBy(x: 1.25, y: 1.25)
    })
    UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 1.0, animations: {// 0% ~ 100%
      self.imageV3.transform = self.imageV3.transform.scaledBy(x: 1.5, y: 1.5)
    })
  }, completion: nil)

这个动画要停止的话也很简单:

    func stopAnimation() {
        self.layer.removeAllAnimations()
        self.subviews.forEach({ $0.layer.removeAllAnimations() })
    }

实现的效果如下, 当然可以自己调整动画速度, 这里是截图 gif 的效果:

QQ20171014-135659.gif