播放动画等待2秒并重复播放

时间:2018-06-16 14:18:01

标签: ios swift uiview

我使用UIView.animate为简单的UIView制作动画。 开始条件:width = height = 30, color = blue(我在故事板中设置了这个)

我希望将大小增加到w = 50,h = 50并使其变为白色,同时它具有适当的cornerRadius。然后我重置视图并再次执行相同的动画。

这是我的代码:

class ViewController: UIViewController {

    @IBOutlet weak var swipeRightView: UIView!
    @IBOutlet weak var doubleTab: UIView!
    override func viewDidLoad() {
        super.viewDidLoad()

        for _ in 0...2 {
            startAnimation()
            sleep(5)
            self.doubleTab.layer.removeAllAnimations()
            startAnimation()
        }
    }

    func startAnimation() {
        self.doubleTab.layer.cornerRadius = 15

        UIView.animate(withDuration: 1.5, delay: 0, options: [.curveLinear], animations: {
            self.doubleTab.backgroundColor = UIColor.white
            self.doubleTab.frame.size.width += 20
            self.doubleTab.frame.size.height += 20
            self.doubleTab.layer.cornerRadius = self.doubleTab.frame.size.width / 2
        }) { (_) in
            self.doubleTab.backgroundColor = UIColor(displayP3Red: 0.34, green: 0.61, blue: 0.88, alpha: 1)
            self.doubleTab.frame.size = CGSize(width: 30, height: 30)
            self.doubleTab.layer.cornerRadius = self.doubleTab.frame.size.width / 2

            UIView.animate(withDuration: 1.5, delay: 0, options: [.curveLinear], animations: {
                self.doubleTab.backgroundColor = UIColor.white
                self.doubleTab.frame.size.width += 20
                self.doubleTab.frame.size.height += 20
                self.doubleTab.layer.cornerRadius = self.doubleTab.frame.size.width / 2
            }, completion: nil)

        }
    }
}

这很好但我想重复整个动画。当整个动画结束时,我想等待2秒然后重复它,然后等待2秒并重复,依此类推。正如您在viewDidLoad中看到的那样,我尝试使用for-loop重复动画,但这没有任何影响或错误的行为。 repeat - while也没有效果。那么,我该如何重复这个动画呢? 任何帮助都非常感谢。

1 个答案:

答案 0 :(得分:0)

在这种情况下,你可以递归地调用// Set an event handler for the <p> element document.querySelector("p").addEventListener("click", function(){ console.log("You clicked the p"); }); // Event delegation is beneficial in two circumstances. // 1. When a single function should be used to handle the same event for many different elements // and you don't want to have to store that callback function with all the different elements // FYI: all event handlers are automatically passed a reference to the event object that they are handling document.getElementById("parent").addEventListener("click", function(evt){ console.log("The event was handled at the parent, but it was triggered at: " + evt.target); }); // 2. When elements will be dynamically added to the document and you can't statically set up event // handlers for elements that don't exist yet. let span = document.createElement("span"); span.textContent = "I was dynamically created, but if you click me, I'll immediately work!"; document.getElementById("parent").appendChild(span);函数 ,这意味着在它完成后再次调用它,它会在完成后再次调用它自己,等等。

因此,您基本上可以在当前设置<div id="parent"> <p>Child One (p)<p> <div>Child Two (div)</div> </div>的最后一个区块中添加startAnimation。 如果您想添加延迟,可以在函数中添加延迟作为参数,并在第一个动画周期默认为, completion: { _ in self.startAnimation() }

完整的代码将是:

completion: nil