效果圖
實現(xiàn)思路:
扇形動畫分為4部分,先將4個View加入視圖,橫向重疊展示,然后修改view的錨點為最右側(cè)中心點,同一時間進行角度不同的旋轉(zhuǎn)動畫,就實現(xiàn)了展開效果.view上如果加入子View.也需要將其旋轉(zhuǎn)90度使其橫向展示
實現(xiàn)方式:
- 創(chuàng)建扇形ImageView。
- 添加4個扇形View,一個動畫開始關(guān)閉按鈕。
- 實現(xiàn)動畫方法.
1.創(chuàng)建扇形ImageView
為其修改錨點為最右側(cè)中心點。為扇形ImageView添加子View.同時將子View旋轉(zhuǎn)90度，以保證與扇形View同方向展示。為扇形ImageView添加閉包回調(diào)。
class EWArcAnimationSubImageView: UIImageView {
public var backClick: (()->())?
private let imageView: UIImageView = {
let imageView = UIImageView(frame: CGRect(x: 5, y: 30.75, width: 33, height: 33))
imageView.transform = CGAffineTransform(rotationAngle: -.pi/2)
return imageView
}()
private let label: UILabel = {
let label = UILabel(frame: CGRect(x: 35, y: 0, width: 40, height: 94.5))
label.textColor = UIColor.black
label.textAlignment = .center
label.transform = CGAffineTransform(rotationAngle: -.pi/2)
return label
}()
private let button: UIButton = {
let button = UIButton(frame: CGRect(x: 0, y: 22.25, width: 60, height: 50))
return button
}()
override init(frame: CGRect) {
super.init(frame: frame)
drawMyView()
}
init(frame: CGRect, title: String, image: String, backImage: String) {
super.init(frame: frame)
drawMyView()
self.label.text = title
self.imageView.image = UIImage(named: image)
self.image = UIImage(named: backImage)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
private func drawMyView(){
self.alpha = 0
self.layer.anchorPoint = CGPoint(x: 1, y: 0.485)
self.isUserInteractionEnabled = true
self.addSubview(imageView)
self.addSubview(label)
self.addSubview(button)
button.addTarget(self, action: #selector(onClickSubButton), for: .touchUpInside)
}
@objc private func onClickSubButton(){
if backClick != nil {
backClick!()
}
}
}
2.添加4個扇形View,一個動畫開始關(guān)閉按鈕。
private lazy var homeButton: EWArcAnimationSubImageView = {
let view = EWArcAnimationSubImageView(frame:CGRect(x: 60.3, y: 69, width: 120.6, height: 94.5), title: "首頁", image: "ArcAnimation_home", backImage: "ArcAnimation_white")
view.backClick = { [weak self] in
if self?.backType != nil{
self?.backType!("首頁")
}
}
return view
}()
private lazy var nameButton: EWArcAnimationSubImageView = {
let view = EWArcAnimationSubImageView(frame:CGRect(x: 60.3, y: 69, width: 120.6, height: 94.5), title: "姓名", image: "ArcAnimation_name", backImage: "ArcAnimation_pink")
view.backClick = { [weak self] in
if self?.backType != nil{
self?.backType!("姓名")
}
}
return view
}()
private lazy var industrybutton: EWArcAnimationSubImageView = {
let view = EWArcAnimationSubImageView(frame:CGRect(x: 60.3, y: 69, width: 120.6, height: 94.5), title: "行業(yè)", image: "ArcAnimation_industry", backImage: "ArcAnimation_white")
view.backClick = { [weak self] in
if self?.backType != nil{
self?.backType!("行業(yè)")
}
}
return view
}()
private lazy var locationButton: EWArcAnimationSubImageView = {
let view = EWArcAnimationSubImageView(frame:CGRect(x: 60.3, y: 69, width: 120.6, height: 94.5), title: "地址", image: "ArcAnimation_location", backImage: "ArcAnimation_pink")
view.backClick = { [weak self] in
if self?.backType != nil{
self?.backType!("地址")
}
}
return view
}()
private let setingButton: UIButton = {
let button = UIButton(frame: CGRect(x: 235 - 79 - 68, y: 190 - 32 - 68, width: 68, height: 68))
button.setImage(UIImage(named: "CircleSelect_select"), for: .normal)
button.setImage(UIImage(named: "CircleSelect_select"), for: .selected)
return button
}()
override init(frame: CGRect) {
super.init(frame: frame)
drawMyView()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func drawMyView() {
self.addSubview(homeButton)
self.addSubview(nameButton)
self.addSubview(industrybutton)
self.addSubview(locationButton)
self.addSubview(setingButton)
setingButton.addTarget(self, action: #selector(onClickSetingButton), for: .touchUpInside)
}
3.實現(xiàn)動畫方法.
@objc private func onClickSetingButton() {
setingButton.isSelected = !setingButton.isSelected
if setingButton.isSelected {
show()
}else {
hidden()
}
}
@objc private func show() {
/// 保證動畫在非進行中
guard self.isAnimationIng == false else { return }
/// 分別設(shè)定三個imageView的旋轉(zhuǎn)角度
let transform1 = CGAffineTransform(rotationAngle: .pi/4)
let transform2 = CGAffineTransform(rotationAngle: .pi/2)
let transform3 = CGAffineTransform(rotationAngle: .pi/4*3)
/// 關(guān)鍵幀動畫
UIView.animateKeyframes(withDuration: 1.5, delay: 0, options: [.allowUserInteraction], animations: {
/// 動畫進行中
self.isAnimationIng = true
/// 添加關(guān)鍵幀, 在前0.2秒將View展示
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.2, animations: {
self.homeButton.alpha = 1
self.nameButton.alpha = 1
self.industrybutton.alpha = 1
self.locationButton.alpha = 1
})
/// 在1.5秒時間進行旋轉(zhuǎn)動畫
self.nameButton.transform = transform1
self.industrybutton.transform = transform2
self.locationButton.transform = transform3
}) { (_) in
/// 結(jié)束時設(shè)置動畫進行中狀態(tài)為False
self.isAnimationIng = false
}
}
@objc private func hidden(){
/// 保證動畫在非進行中
guard self.isAnimationIng == false else { return }
/// 關(guān)鍵幀動畫
UIView.animateKeyframes(withDuration: 1.5, delay: 0, options: [.allowUserInteraction], animations: {
/// 動畫進行中
self.isAnimationIng = true
/// view展開狀態(tài)
/// 將View復原
self.nameButton.transform = CGAffineTransform.identity
self.industrybutton.transform = CGAffineTransform.identity
self.locationButton.transform = CGAffineTransform.identity
self.homeButton.alpha = 0
self.nameButton.alpha = 0
self.industrybutton.alpha = 0
self.locationButton.alpha = 0
}) { (_) in
/// 結(jié)束時設(shè)置動畫進行中狀態(tài)為False
self.isAnimationIng = false
}
}
demo地址:EWArcAnimation
有問題歡迎探討.
