快速无限淡入和淡出循环

问题描述:

如何快速实现类似于以下的效果:

How can I make a effect in swift similar to this:

我希望动画能够永远循环。

I want the animation to loop forever.

对于iOS

UIViewAnimationOptions set提供了方便的选项,以实现精美和复杂的动画组合。对于您的特定情况,您将需要两个选项。

UIViewAnimationOptions set provides different handy options to achieve a combination of beautiful and complex animations. For your particular scenario you will require two of the options.

UIViewAnimationOptions.Repeat
UIViewAnimationOptions.AutoReverse

查看下面的代码以进行实施。

Check out the code below for implementation.

代码

class MyViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
        view.backgroundColor = UIColor.blueColor()
        self.view.addSubview(view)

        UIView.animateWithDuration(1, 
        delay: 0, 
        options: [UIViewAnimationOptions.Autoreverse, UIViewAnimationOptions.Repeat], 
        animations: {
              view.backgroundColor = UIColor.clearColor()
          }, 
        completion: nil)
    }

}

说明:
我已经创建了一个具有特定框架的视图以进行演示。

Explanation: I have created a view with a specific frame for demo purpose.

您感兴趣的部分是 UIView .animateWithDuration 方法。请注意,我在 options 参数中提供了数组 [UIViewAnimationOptions.AutoReverse,UIViewAnimationOptions.Repeat]

The part you are interested in is the UIView.animateWithDuration method. Notice that I have provided an array [UIViewAnimationOptions.AutoReverse, UIViewAnimationOptions.Repeat] in the options parameter.

这两个选项足以实现平滑且永久的循环动画,如下所示。
https://s3.amazonaws.com /uploads.hipchat.com/37040/1764070/6Iow7n7WiWf6Naz/autoReverse.gif

These two options are enough to achieve a smooth and forever looping animation like below. https://s3.amazonaws.com/uploads.hipchat.com/37040/1764070/6Iow7n7WiWf6Naz/autoReverse.gif

如果您不想反转动画,只需删除 UIViewAnimationOptions.AutoReverse 从数组中的 options 参数中。您将获得这样的动画。
https://s3.amazonaws.com /uploads.hipchat.com/37040/1764070/8fyRUlzqNHSQI47/noreverse.gif

If you don't want to reverse the animation, just remove UIViewAnimationOptions.AutoReverse from the array in the options parameter. You will get an animation like this. https://s3.amazonaws.com/uploads.hipchat.com/37040/1764070/8fyRUlzqNHSQI47/noreverse.gif