点击cell里+按钮加到右上角圆图购物车。
效果图如下:
image.png代码如下:
extension AddShopCartController: UITableViewDelegate,UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 10
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "addShopCartIdentifier", for: indexPath) as! AddShopCartCell
cell.indexpath = indexPath
cell.clickAction = { (index) in
/*
[viewB convertRect:viewC.frame toView:viewA];计算viewB上的viewC相对于viewA的frame
[viewC convertRect:viewB.frame fromView:viewA];计算viewA上的viewB相对于viewC的frame
*/
let rect = cell.convert(cell.addButton.frame, to: self.view)
print(rect)
self.addAnimation(rect: rect)
}
return cell
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 80
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 0.01
}
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return 0.01
}
}
extension AddShopCartController: CAAnimationDelegate {
func addAnimation(rect: CGRect) {
autoreleasepool{
let squr = UIView()
squr.backgroundColor = UIColor.red
squr.frame = CGRect(x: 0, y: 0, width: 23, height: 23)
squr.layer.cornerRadius = 23/2
squr.layer.masksToBounds = true
self.view.insertSubview(squr, aboveSubview: self.tableview)
self.viewArray.append(squr)
}
let lastSquar = self.viewArray.last
let path = CGMutablePath()
let beginPoint = CGPoint(x: rect.origin.x + rect.size.width / 2, y: rect.origin.y + rect.size.height / 2)
path.move(to: beginPoint)
path.addQuadCurve(to:self.cartBtn1.center, control: CGPoint(x: 150, y: rect.origin.y))
//获取贝塞尔曲线的路径
let animationPath = CAKeyframeAnimation.init(keyPath: "position")
animationPath.path = path
animationPath.rotationMode = CAAnimationRotationMode.rotateAuto
//缩小图片到0
let scale:CABasicAnimation = CABasicAnimation()
scale.keyPath = "transform.scale"
scale.toValue = 0.5
//组合动画
let animationGroup:CAAnimationGroup = CAAnimationGroup()
animationGroup.animations = [animationPath,scale];
animationGroup.duration = 0.8;
animationGroup.fillMode = CAMediaTimingFillMode.forwards;
animationGroup.isRemovedOnCompletion = false
animationGroup.delegate = self
lastSquar!.layer.add(animationGroup, forKey:
nil)
}
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
let redview = self.viewArray.first
redview?.isHidden = true
self.viewArray.remove(at: 0)
}
}
重要点记录:
addQuadCurve(to endPoint: CGPoint, controlPoint: CGPoint)
在当前路径中追加一条二阶贝塞尔曲线
endPoint:终点
controlPoint:控制点
参考链接:
UIBezierPath贝塞尔曲线详解(swift):
https://www.jianshu.com/p/b203537f31af
swift 实现简单的添加购物车动画:
https://www.jianshu.com/p/b590518ce115
问题?
Swift里使用autoreleasepool是为啥?什么场景使用?
网友评论