UIView анимация с несколькими объектами

Question

Я хочу, чтобы эти элементы создавали анимацию один за другим в строке с продолжительностью, но вместо этого они создают анимацию вместе в один и тот же момент

            authClicked = true
            var angle: CGFloat = 45.0

            google = UIButton(type: .custom)
            facebook = UIButton(type: .custom)
            vk = UIButton(type: .custom)
            instagram = UIButton(type: .custom)
            regular = UIButton(type: .custom)

            let buttonArray = [self.google: "Google", self.facebook: "Facebook", self.vk: "VK", self.instagram: "Instagram", self.regular: "Regular"];

            for (button, buttonName) in buttonArray {
                button.frame = CGRect(x: x, y: y, width: 150, height: 150)
                button.addTarget(self, action: #selector(self.buttonClicked), for: .touchUpInside)
                button.setTitle(buttonName, for: .normal)
                button.alpha = 0

                circleButton(button: button)

                angle -= 45.0
                view.addSubview(button)

                let cosX = cos(angle) * 200
                let sinY = sin(angle) * 200

                UIView.animate(withDuration: 1.0, delay: 1.0, options: [], animations: {
                    button.transform = CGAffineTransform(translationX: cosX, y: sinY).concatenating(CGAffineTransform(scaleX: 0.5, y: 0.5))
                    button.alpha = 1
                }) { (done) in
                    print(done)
                }

Answer 1

просто Увеличьте время задержки, так как цикл выполняется быстро и не требует времени, каждый элемент указывается в одно и то же время, поэтому вам нужно задать различную задержку для запуска каждой анимации.Создайте одну переменную animationDelay и передайте ее в uiview.animaton

var animationDelay = 1.0 //your dealy for first element


for (button, buttonName) in buttonArray {
      button.frame = CGRect(x: x, y: y, width: 150, height: 150)
      button.addTarget(self, action: #selector(self.buttonClicked), for: .touchUpInside)
      button.setTitle(buttonName, for: .normal)
      button.alpha = 0

      circleButton(button: button)

      angle -= 45.0
      view.addSubview(button)

      let cosX = cos(angle) * 200
      let sinY = sin(angle) * 200
      //set created animationDelay 
      UIView.animate(withDuration: 1.0, delay: animationDelay, options: [], animations: {
          button.transform = CGAffineTransform(translationX: cosX, y: sinY).concatenating(CGAffineTransform(scaleX: 0.5, y: 0.5))
          button.alpha = 1
      }) { (done) in
          print(done)
      }
      animationDelay += 0.35 // increment the delay you want between each elemnts 
}

Answer 2

Согласно коду, все они выполняются одновременно (с задержкой в ​​1,0 секунды).

Чтобы изменить это:

// create a variable outside of the for loop
var animationDelayTime = 1.0

// the for loop
for (button, buttonName) in buttonArray {

            // the other stuff
            ... 
            ...
            ...


            // instead of 1.0 for delay, use animationDelayTime
            UIView.animate(withDuration: 1.0, delay: animationDelayTime, options: [], animations: {
                button.transform = CGAffineTransform(translationX: cosX, y: sinY).concatenating(CGAffineTransform(scaleX: 0.5, y: 0.5))
                button.alpha = 1
            }) { (done) in
                print(done)
            }

    // after the animation is done, increment the var for the next iteration.
    // it will be 1.25 for the 2nd loop, then 1.50, then 1.75, etc.
    animationDelayTime += 0.25

} // end, for loop