ios - Swift3 中的 UIView 动画

Question

我正在尝试将 UIImageView 移动到顶部、底部、左侧和右侧。动画应该是 4 四次。中心图像向顶部移动，然后是左侧位置和右侧位置。如何使用 UIAnimation swift 3 实现这一点？

UIView.animate(withDuration: 0.1, 
               delay:0, 
               animations: {}, 
               completion: {completion in})

如何使用动画将图像移动到顶部，左侧，右侧和底部？

Answer 1

您应该为此使用关键帧动画，因为它允许您指定动画的顺序。下面是一个基本示例：

let animationDuration = 2.0
let position: CGFloat = 50.0
let viewToAnimate = UIImageView()

UIView.animateKeyframes(withDuration: animationDuration, delay: 0.0, options: .calculationModeLinear, animations: {
    UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1/3, animations: {
        viewToAnimate.frame.origin.y = viewToAnimate.frame.origin.y + position
    })
    UIView.addKeyframe(withRelativeStartTime: 1/4, relativeDuration: 1/4, animations: {
        viewToAnimate.frame.origin.y = viewToAnimate.frame.origin.y - (position * 2)
    })
    UIView.addKeyframe(withRelativeStartTime: 2/4, relativeDuration: 1/4, animations: {
        viewToAnimate.frame.origin.x = viewToAnimate.frame.origin.x - position
    })
    UIView.addKeyframe(withRelativeStartTime: 3/4, relativeDuration: 1/4, animations: {
        viewToAnimate.frame.origin.x = viewToAnimate.frame.origin.x + (position * 2)
    })
}, completion: { completed in

})

Answer 2

UIView.animate(withDuration: 1, delay:0, animations: {
        //top
        self.tempVW.frame.origin.y = self.tempVW.frame.origin.y - 100
    }, completion: {completion in
        UIView.animate(withDuration: 1, delay:0, animations: {
            //left
            self.tempVW.frame.origin.x = self.tempVW.frame.origin.x - 100

        }, completion: {completion in
            UIView.animate(withDuration: 1, delay:0, animations: {
                //bottom
                self.tempVW.frame.origin.y = self.tempVW.frame.origin.y + 100

            }, completion: {completion in
                UIView.animate(withDuration: 1, delay:0, animations: {                        //right
                     self.tempVW.frame.origin.x = self.tempVW.frame.origin.x + 100
                }, completion: {completion in


                })
            })
        })

    })

Answer 3

UIView.animate(withDuration: 1, delay:0, animations: {
        //top
        self.imageView.frame.origin.y = self.imageView.frame.origin.y - 100
    }, completion: {completion in
        UIView.animate(withDuration: 1, delay:0, animations: {
            //bottom
            self.imageView.frame.origin.y = self.imageView.frame.origin.y + 100
        }, completion: {completion in
            UIView.animate(withDuration: 1, delay:0, animations: {
                //left
                self.imageView.frame.origin.x = self.imageView.frame.origin.x - 100

            }, completion: {completion in
                UIView.animate(withDuration: 1, delay:0, animations: {

                }, completion: {completion in
                    //right
                    self.imageView.frame.origin.x = self.imageView.frame.origin.x + 100
                })
            })
        })

    })