Question

我正在创建一个非常基本的Swift函数，它将UIView设置为屏幕中心的动画，使其显示并加倍，然后在返回原始位置时最后收缩回原始大小。这是代码：

func toTheCorner(view: UIView, delay: Double)
{
    // record original position
    let originalCenter = view.center
    // record original bounds
    let b = view.bounds

    UIView.animateWithDuration(0.1, delay: delay, usingSpringWithDamping: 0.2, initialSpringVelocity: 0, options: .CurveEaseOut, animations: {

        // move view to center of screen
        view.center.x = self.view.bounds.width/2
        view.center.y = self.view.bounds.height/2


        }, completion: nil)

    UIView.animateWithDuration(0.9, delay: delay + 0.1, usingSpringWithDamping: 0.8, initialSpringVelocity: 10, options: .CurveEaseOut, animations: {

        // Fade image in
        view.alpha = 1.0

        // Increase size
        view.bounds.size.height = b.height + b.height/2
        view.bounds.size.width = b.width + b.width/2

        }, completion: nil)

    UIView.animateWithDuration(0.7, delay: delay + 1.0, usingSpringWithDamping: 0.8, initialSpringVelocity: 10, options: .CurveEaseOut, animations: {

        // Shrink to original size
        view.bounds.size.height = b.height
        view.bounds.size.width = b.width

        // Move to original position
        view.center = originalCenter


    }, completion: nil)

}

创建问题的一行是：

view.center = originalCenter

如果没有此行，函数将按预期执行。视图出现在屏幕的中央，然后双倍缩小。但是，只要我输入“view.center = originalCenter”，视图就会出现在屏幕中心的原始点的正对面，而不是中间，然后移动到它的原始点。

这条线如何影响前2个动画？这似乎应该有用，而且非常简单......

谢谢！本

Answer 1

你应该使用完成块;

func toTheCorner(view: UIView, delay: Double)
{
    // record original position
    let originalCenter = view.center
    // record original bounds
    let b = view.bounds

    UIView.animateWithDuration(0.1, delay: delay, usingSpringWithDamping: 0.2, initialSpringVelocity: 0, options: .CurveEaseOut, animations: {

        // move view to center of screen
        view.center.x = self.view.bounds.width/2
        view.center.y = self.view.bounds.height/2

        }, completion: { finished in 
   UIView.animateWithDuration(0.9, delay: delay + 0.1, usingSpringWithDamping: 0.8, initialSpringVelocity: 10, options: .CurveEaseOut, animations: {

        // Fade image in
        view.alpha = 1.0

        // Increase size
        view.bounds.size.height = b.height + b.height/2
        view.bounds.size.width = b.width + b.width/2

        }, completion: { finished in 
    UIView.animateWithDuration(0.7, delay: delay + 1.0, usingSpringWithDamping: 0.8, initialSpringVelocity: 10, options: .CurveEaseOut, animations: {

        // Shrink to original size
        view.bounds.size.height = b.height
        view.bounds.size.width = b.width

        // Move to original position
        view.center = originalCenter
    }, completion: nil)})
    })
}

Answer 2

您也可以使用UIView.animateKeyframes方法，而不是将它们链接到完成闭包中。请参阅下文，其中“subview”是您要设置动画的视图，“originalPoint”是视图的起始CGPoint。

    let duration1 = 0.1
    let duration2 = 0.9
    let duration3 = 0.7

    let animations = {
        UIView.addKeyframe(withRelativeStartTime: delay, relativeDuration: duration1) {
            subview.center = self.view.center
        }
        UIView.addKeyframe(withRelativeStartTime: delay + duration1, relativeDuration: duration2) {    
            subview.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
        }
        UIView.addKeyframe(withRelativeStartTime: delay + duration1 + duration2, relativeDuration: duration3) {
            subview.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
            subview.center = originalPoint
        }
    }
    let completion = { (done: Bool) -> () in
        print("done")
    }
    UIView.animateKeyframes(
        withDuration: [duration1, duration2, duration3].reduce(0, +),
        delay: delay,
        options: [],
        animations: animations,
        completion: completion)

此方法采用可包含多个UIView.addKeyframes函数的闭包。另请参阅这个简单的示例，通过多种颜色here进行动画制作。

Swift动画问题

2 个答案: