Swift添加商品到购物车动画

点击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是为啥?什么场景使用?

你可能感兴趣的:(Swift添加商品到购物车动画)