美文网首页
Swift添加商品到购物车动画

Swift添加商品到购物车动画

作者: 玉思盈蝶 | 来源:发表于2020-07-08 10:25 被阅读0次

    点击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添加商品到购物车动画

          本文链接:https://www.haomeiwen.com/subject/iiuqcktx.html