我使用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
也没有效果。那么,我该如何重复这个动画呢?
任何帮助都非常感谢。
答案 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