效果图

实现思路:

扇形动画分为4部分,先将4个View加入视图,横向重叠展示,然后修改view的锚点为最右侧中心点,同一时间进行角度不同的旋转动画,就实现了展开效果.view上如果加入子View.也需要将其旋转90度使其横向展示

实现方式:

1.声明View,添加子View,修改子View位置,修改锚点.

2.实现动画方法.

---

1.声明View,添加子View,修改子View位置,修改锚点.

    private let firstView: UIImageView = {
        let view = UIImageView(frame: CGRect(x: 200, y: 500, width: 120.6, height: 94.5))
        view.alpha = 0
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 50, height: 94.5))
        label.text = "第一"
        label.textAlignment = .center
        /// 将label旋转90度
        label.transform = CGAffineTransform(rotationAngle: -.pi/2)
        view.addSubview(label)
        view.image = UIImage(named: "pink")
        /// 修改imageView的锚点,使其旋转时以自定义的锚点为中心点
        view.layer.anchorPoint = CGPoint(x: 1, y: 0.5)
        return view
    }()
    private let secondView: UIImageView = {
        let view = UIImageView(frame: CGRect(x: 200, y: 500, width: 120.6, height: 94.5))
        view.alpha = 0
        view.image = UIImage(named: "qianse")
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 50, height: 94.5))
        label.text = "第二"
        label.textAlignment = .center
        /// 将label旋转90度
        label.transform = CGAffineTransform(rotationAngle: -.pi/2)
        view.addSubview(label)
        /// 修改imageView的锚点,使其旋转时以自定义的锚点为中心点
        view.layer.anchorPoint = CGPoint(x: 1, y: 0.5)
        return view
    }()
    private let thirdView: UIImageView = {
        let view = UIImageView(frame: CGRect(x: 200, y: 500, width: 120.6, height: 94.5))
        view.image = UIImage(named: "pink")
        view.alpha = 0
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 50, height: 94.5))
        label.text = "第三"
        label.textAlignment = .center
        /// 将label旋转90度
        label.transform = CGAffineTransform(rotationAngle: -.pi/2)
        view.addSubview(label)
        /// 修改imageView的锚点,使其旋转时以自定义的锚点为中心点
        view.layer.anchorPoint = CGPoint(x: 1, y: 0.5)
        return view
    }()
    private let fourthView: UIImageView = {
        let view = UIImageView(frame: CGRect(x: 200, y: 500, width: 120.6, height: 94.5))
        view.image = UIImage(named: "qianse")
        view.alpha = 0
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 50, height: 94.5))
        label.text = "第四"
        label.textAlignment = .center
        /// 将label旋转90度
        label.transform = CGAffineTransform(rotationAngle: -.pi/2)
        view.addSubview(label)
        /// 修改imageView的锚点,使其旋转时以自定义的锚点为中心点
        view.layer.anchorPoint = CGPoint(x: 1, y: 0.5)
        return view
    }()

2.实现动画方法.

  @objc private func beginAnimation() {
        /// 保证动画在非进行中
        guard self.isAnimationIng == false else { return }
        /// 分别设定三个imageView的旋转角度
        let transform1 = CGAffineTransform(rotationAngle: .pi/4)
        let transform2 = CGAffineTransform(rotationAngle: .pi/2)
        let transform3 = CGAffineTransform(rotationAngle: .pi/4*3)
        /// 关键帧动画
        UIView.animateKeyframes(withDuration: 1.5, delay: 0, options: [.allowUserInteraction], animations: {
            /// 动画进行中
            self.isAnimationIng = true
            /// view展开状态
            if self.isOpen {
                /// 将View复原
                self.secondView.transform = CGAffineTransform.identity
                self.thirdView.transform = CGAffineTransform.identity
                self.fourthView.transform = CGAffineTransform.identity
                self.firstView.alpha = 0
                self.secondView.alpha = 0
                self.thirdView.alpha = 0
                self.fourthView.alpha = 0
                self.isOpen = !self.isOpen
            } else {
                /// 添加关键帧, 在前0.2秒将View展示
                UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.2, animations: {
                    self.firstView.alpha = 1
                    self.secondView.alpha = 1
                    self.thirdView.alpha = 1
                    self.fourthView.alpha = 1
                })
                /// 在1.5秒时间进行旋转动画
                self.secondView.transform = transform1
                self.thirdView.transform = transform2
                self.fourthView.transform = transform3
                self.isOpen = !self.isOpen
            }
        }) { (_) in
            /// 结束时设置动画进行中状态为False
            self.isAnimationIng = false
        }
    }

---

demo地址:EWArcAnimation

有问题欢迎探讨.