模仿爱奇艺播放暂停按钮动画效果——swift

先上效果图

实现思路：

重载init，画出左边线条、右边线条、三角形和圆弧图层，用layer.strokeEnd = 0隐藏三角形和弧线，初始化展示暂停按钮。圆弧作为过渡右边线和三角形使用。
暂停按钮到播放按钮动画分解：左边线条缩短0.15s —> 右边线条上移0.15s —> 0.15后 —> 左线条上移0.15s —> 右线条缩短0.15s。在执行上述过程同时创建一个延时器，延时0.3s，执行：三角形从头到尾出现(顺时针)0.5s —> 弧线从头到尾出现(顺时针)0.125s —> 右线条从尾到头消失0.125s —> 0.125s后 —> 弧线从头到尾消失0.125s —> 0.25s后 —> 左线条从尾到头消失0.25s
播放到暂停按钮动画分解：三角形从尾到头消失(逆时针)0.5s —> 左线条从头到尾出现0.25s —> 0.25后 —> 弧线从尾到头出现(逆时针)0.125s —> 0.725s后 —> 右线条从头到尾出现0.125s —> 弧线从尾到头消失0.125。在执行上述过程同时创建一个延时器，延时0.5s，执行：左线条下移0.15s —> 右线条向上伸长0.15s —> 0.15s后 —> 左线条向上延长0.15s —> 右线条下移0.15s

核心代码

延时器	DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + TimeInterval(LYCopyQIYButton.lineAnimationDuration)) { self.transformPlayAnimation() }
定制图层	func addLayer(layer: CAShapeLayer, path: UIBezierPath, lineCap: String){ layer.path = path.cgPath layer.lineJoin = kCALineJoinRound//圆形端点 layer.lineCap = lineCap//kCALineCapButt：无端点 layer.fillColor = UIColor.clear.cgColor layer.strokeColor = strokColor.cgColor layer.lineWidth = lineWidth self.layer.addSublayer(layer) }
动画效果	func setupAnimation(keyPath: String, from: Int, to: Int, layer:CAShapeLayer, duration: Float, animationName: String) { let animation = CABasicAnimation(keyPath: keyPath) if !(keyPath == "path") { //如果是strokeEnd、strokeStart animation.fromValue = from animation.toValue = to } animation.duration = TimeInterval(duration) animation.fillMode = kCAFillModeForwards animation.isRemovedOnCompletion = false animation.delegate = self //在代理方法里用anim.value(forKey:"animationName")获取动画名称 animation.setValue(animationName, forKey: "animationName") layer.add(animation, forKey: "") }