具有自定义形状框架的 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
    };
}

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

UIView with custom shaped frame: Animation not behaving as expected

core-animation

calayer

uiview

swift

编辑：

初始结果：

初始代码：