- 最近闲得无事，用Swift写了个仿百思不得姐demo 记录一下不得姐pop 弹出动画效果
- 使用facebook出品的 pop 这个第三方动画库 (https://github.com/facebook/pop)
- 下面介绍一下pop 的集成和使用
1.集成方式我是用pods 集成的 直接 pod 'pop'
2.pop的弹簧效果使用 - 暂时只写了从上往下弹出 和 从下往上弹出的效果
/// 弹出
enum XHPopStyle {
case XHPopFromTop // 从下往下弹出
case XHPopFromBottom // 从下往上弹出
}
/// 回收
enum XHDissMissStyle {
case XHDissMissToTop // 往上移除
case XHDissMissToBottom // 往下移除
}
然后写个自定义Button 可以根据自己的需求来改
class CompostButton: UIView {
var imagev : UIImageView!
var title : UILabel!
class func initTypeButton(imageName:String,title:String) -> CompostButton {
let button = CompostButton.init(frame: .zero)
button.imagev.image = UIImage.init(named: imageName)
button.title.text = title
return button
}
override init(frame: CGRect) {
super.init(frame: frame)
imagev = UIImageView.init()
title = UILabel.init()
title.font = UIFont.systemFont(ofSize: 15)
title.textColor = UIColor.white
title.textAlignment = .center
self.addSubview(imagev)
self.addSubview(title)
}
override func layoutSubviews() {
super.layoutSubviews()
imagev.frame = CGRect(x: self.frame.size.width / 2 - 35, y: 0, width: 70, height: 70)
title.frame = CGRect(x: 0, y: imagev.frame.maxY + 5, width: self.frame.size.width, height: 20)
}
required init?(coder aDecoder: NSCoder) {
fatalError()
}
}
把自定义button 遍历创建好 初始化位置根据从上往下弹 还是从下往上弹设置在view的顶部 或底部
/// 添加button
func initButtons() {
let buttonSize = CGSize.init(width: 100, height: 100)
let margin = (ScreenWidth - 3 * buttonSize.width)/4
for i in 0..<buttonsInfo.count {
let dict = buttonsInfo[I]
guard let imageName = dict["imageName"],
let title = dict["title"] else {
continue
}
let button = CompostButton.initTypeButton(imageName:imageName,title:title)
self.addSubview(button)
let col = i % 3
let row = i / 3
let margin2 = col>0 ? margin : 0
let x = margin + (buttonSize.width + margin2) * CGFloat(col)
var y: CGFloat = 0
/// + 70 是labTitle的高度30 + 距离button间隔 40
if popstyle == .XHPopFromBottom {
y = row > 0 ? (ScreenHeight + 70 + (buttonSize.height + 20) * CGFloat(row)) : ScreenHeight + 70
}else{
y = row > 0 ? ( -100 - (buttonSize.height + 20) * CGFloat(row)) : -100
}
button.frame = CGRect(x: x, y: y, width: buttonSize.width, height: buttonSize.height)
}
}
接下来就要用到pop了
创建POPSpringAnimation类型动画
弹力系数参数:springBounciness 取值范围 0~20，数值越大，弹性越大，默认数值为4
弹力速度:springSpeed 取值范围 0~20，数值越大，弹性越大，默认数值为4
开启动画时间参数:beginTime
设置起点值fromValue和终点值 toValue
设置好参数后add到对应的UI上 添加方法 btn.pop_add(anim, forKey: nil)
因为我是按顺序遍历 所以启动动画时间都根据遍历下标来设置延迟的
贴上代码
/// 正向遍历
for (i , btn) in self.subviews.enumerated() {
if btn.isKind(of: CompostButton.self) || btn.isKind(of: UILabel.self) {
// 创建动画 根据Y轴
let anim: POPSpringAnimation = POPSpringAnimation.init(propertyNamed: kPOPLayerPositionY)
// 弹力系数，取值范围 0~20，数值越大，弹性越大，默认数值为4
anim.springBounciness = kSpringFactor
// 弹力速度，取值范围 0~20，数值越大，速度越快，默认数值为12
anim.springSpeed = kSpringFactor
// 设置动画启动时间
anim.beginTime = CACurrentMediaTime() + CFTimeInterval.init(i) * kAnimationDelay
btn.pop_add(anim, forKey: nil)
anim.fromValue = btn.center.y
if popstyle == .XHPopFromBottom {
anim.toValue = btn.center.y - ScreenHeight / 2 - 290 / 2
}else{
anim.toValue = btn.center.y + ScreenHeight / 2 + 290 / 2
}
}
}
回收动画也是一样的道理反向遍历 这里就不重复了
值得注意的一点是 由于我在View上加了一层毛玻璃 因此在遍历回收时下标i == 1时 就得从父类上移除添加的View了
if i == 1 { // 因为添加了visual毛玻璃 所以self.subviews.count 多了1
anim.completionBlock = { [weak self] _, _ in
/// 动画执行完毕 当前view设为可点击
kRootView?.isUserInteractionEnabled = true
self?.removeFromSuperview()
}
}
效果图:
popanimation2.gif
觉得不错的话给个星也是极好的
Demo地址
网友评论