具有自定义形状框架的 UIView：动画未按预期运行

Question

我想用自定义形状为抽屉制作动画，但是预期的 popOut() 动画显示不正确。

我错过了哪一部分让它不眨眼就过渡？
为什么popIn() 显示正常但popOut() 不显示？

编辑：

我试着用动画层

        //pop
        self.layer.transform = CATransform3DMakeScale(1, 0, 1)

和

        //unPop
        let transform = CATransform3DConcat(
            CATransform3DMakeScale(1, 0, 1),
            CATransform3DMakeTranslation(0, 0 - self.frame.height / 2, 0))
        self.layer.transform = transform

它看起来很棒，但我希望我的框架的顶部是固定的，并且只能通过使其从底部生长来对其进行动画处理...

初步结果：

初始代码：

//   Points reference
//   1-------5
//   |       |
//   |       |
//   |       |
//   |       |
//   |       |
//   |       |
//   |       |
//   2\     /4
//     \   /
//      \ /
//       3



class PowerUpDrawer : UIView {
    var triangleHeight : CGFloat
    var orignalHeight : CGFloat = 0
    var orignalY : CGFloat = 0
    var isPoped : Bool = true {
        didSet {
            if (isPoped) {
                pop()
            } else {
                unPop()
            }
        }
    }


    //XXX
    override init(frame: CGRect) {
        triangleHeight = 25
        super.init(frame: frame)
    }

    //XXX
    required init(coder aDecoder: NSCoder) {
        triangleHeight = 25
        super.init(coder: aDecoder)
        orignalHeight = frame.height
        orignalY = frame.origin.y
    }


    override var frame: CGRect {
        didSet {
            let bezierpath = UIBezierPath()
            bezierpath.moveToPoint(CGPoint(x: 0, y: 0)) // 1
            bezierpath.addLineToPoint(CGPoint(x: 0, y:  frame.height - triangleHeight)) // 2
            bezierpath.addLineToPoint(CGPoint(x: frame.width / 2, y: frame.height))// 3
            bezierpath.addLineToPoint(CGPoint(x: frame.width, y: frame.height - triangleHeight))// 4
            bezierpath.addLineToPoint(CGPoint(x: frame.width, y: 0))// 5
            let mask = CAShapeLayer()
            mask.frame = bounds
            mask.path = bezierpath.CGPath
            self.layer.mask = mask
        }
    }


    @IBAction func toggle() {
        isPoped = !isPoped
    }


    func pop() {
        UIView.animateWithDuration(1, delay: 0.5, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.8, options: nil, animations: { () -> Void in
            self.frame = CGRectMake(self.frame.origin.x, self.orignalY, self.frame.width, self.orignalHeight)
            }) { (Bool) -> Void in
        };
    }


     func unPop() {
        UIView.animateWithDuration(1, delay: 0.5, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.8, options: nil, animations: { () -> Void in
            self.frame = CGRectMake(self.frame.origin.x, self.orignalY, self.frame.width, self.triangleHeight)
            }) { (Bool) -> Void in
        };
    }
}

Answer 1

这是一个有趣的问题。你可以试试这个作为你的unPop() 函数。我正在抵消足够的高度，以使其感觉高端保持静止。你可以试试任何scaleFactor。

func unPop() {

   UIView.animateWithDuration(1, delay: 0.5, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.8, options: nil, animations: { () -> Void in

        let scaleFactor:CGFloat = 0.25
        let offset = -(self.frame.height * (1 - scaleFactor))/2
        let transform = CATransform3DConcat(
            CATransform3DMakeScale(1, scaleFactor, 1),
            CATransform3DMakeTranslation(0, offset, 0))
        self.layer.transform = transform
    }) { (Bool) -> Void in
    };
}