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

先上效果图

实现思路：

1. 重载init，画出左边线条、右边线条、三角形和圆弧图层，用layer.strokeEnd = 0隐藏三角形和弧线，初始化展示暂停按钮。圆弧作为过渡右边线和三角形使用。
2. 暂停按钮到播放按钮动画分解：左边线条缩短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
3. 播放到暂停按钮动画分解：三角形从尾到头消失(逆时针)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
4. 核心代码

   延时器	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: "")     }

5. 代码地址：点击打开链接获取swift代码