view内にランダムに円をフェードインアウトで出現させたい

Question

view内で円を交互にランダムに繰り返し出現させたいのですが方法がわからず困っております。
下記のコードでfor文を使ってループさせてみたのですが、１０回分が同時に出現しただけで思った通りの結果になりませんでした。
何か良い方法はないでしょうか？教えていただけましたら幸いです。

コード

class ViewController: UIViewController {
    
    func makeImage(width w: CGFloat,height h: CGFloat) -> UIImage{
        let size = CGSize(width: w, height: h)
        UIGraphicsBeginImageContextWithOptions(size, false, 1.0) //size、opaques、scale
        let context = UIGraphicsGetCurrentContext()
        let drawRect = CGRect(x: 0, y: 0, width: w, height: h)
        let drawPath = UIBezierPath(roundedRect: drawRect, cornerRadius: 100)
        context?.setFillColor(red: 0, green: 1.0, blue: 1.0, alpha: 1.0)
        drawPath.fill()
        context?.setStrokeColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
        drawPath.stroke()
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        return image!
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let c: CGFloat = 100.0
        let fw = view.frame.width
        let fh = view.frame.height
        
　　　　　for _ in 0..<10{
         rdmImage(viewFrameWidth: fw, viewFrameHeight: fh, circleSize: c)
        }
    }
    
    func rdmImage(viewFrameWidth w: CGFloat,viewFrameHeight h: CGFloat,circleSize c: CGFloat){
        var rdmWid = CGFloat(arc4random_uniform(UInt32(w)))
        var rdmHei = CGFloat(arc4random_uniform(UInt32(h)))
        
        if rdmWid<c/2{
            rdmWid = c/2
        }else if rdmWid>w-c/2{
            rdmWid = w-c/2
        }
        if rdmHei<c/2{
            rdmHei = c/2
        }else if rdmHei>h-c/2{
            rdmHei = h-c/2
        }
        
        let circleImage = makeImage(width: c, height: c)
        let circleView = UIImageView(image: circleImage)
        circleView.center = CGPoint(x: rdmWid, y: rdmHei)
        circleView.alpha = 0.0
        self.view.addSubview(circleView)
        
        UIView.animate(
            withDuration: 2.0,
            delay: 0,
            options: [.curveEaseInOut],
            animations: {circleView.alpha = 1.0},
            completion: {(finished: Bool) in
                self.fadeOutRemove(circleView)
        })
    }
    
    func fadeOutRemove(_ view: UIView){
        UIView.animate(withDuration: 2.0, delay: 0, options: UIView.AnimationOptions(), animations: {
            view.alpha = 0.0
        }, completion: {(finished: Bool) in
            view.removeFromSuperview()
        })
    }   
}

Answer 1

for i in 0..<10 {
  DispatchQueue.main.asyncAfter(deadline: .now() + 0.5*Double(i)) {
        self.rdmImage(viewFrameWidth: fw, viewFrameHeight: fh, circleSize: c)
        }
    }

こんなんじゃダメですかね・・

Comments

[退会済みユーザー]

シンプルでいいと思います。なぜか２回書いてあるけど。

[fugu]

ほんとだ、すいません、修正します。

[okkyu]

ご回答ありがとうございます。参考にさせていただきます。

Answer 2

asyncAfterは最初に思いついたので、ちょっと別解を考えてみました。

UIView.animate() の completion （つまり、クロージャ）に終了後の動作を記述するのはもちろんアリなのですが、それを次々と記述していくと可読性が落ちてしまいそうなので、Core Animation の別の手法に書き換えてみました。

• iOSアプリ開発でアニメーションするなら押さえておきたい基礎

ここでは、DispatchQueueに入れるのではなく、CATransaction.setCompletionBlock で再帰的に rdmImage() を呼び出しています。

また、これは完全に先読みなのですが、もしアニメーションを途中で中断したくなったときに、任意のタイミングで中断できるようにもしてみました。

下記の実装ではボタンを押したタイミングでアニメーションを中断しています。

import UIKit

class ViewController: UIViewController {
    // MARK: アニメーションのレイヤ
    var animationLayer: CALayer?
    
    // 中略
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 中略

        // MARK: 再帰呼び出しするようにメソッドを書き換え。ここでは10回呼び出し
        recursiveRdmImage(viewFrameWidth: fw, viewFrameHeight: fh, circleSize: c, repeats: 10)
    }
    
    func recursiveRdmImage(viewFrameWidth w: CGFloat,viewFrameHeight h: CGFloat,circleSize c: CGFloat, repeats: Int) {
        
        var rdmWid = CGFloat.random(in: 0...w)
        var rdmHei = CGFloat.random(in: 0...h)
                    
            
        if rdmWid<c/2{
            rdmWid = c/2
        }else if rdmWid>w-c/2{
            rdmWid = w-c/2
        }
        if rdmHei<c/2{
            rdmHei = c/2
        }else if rdmHei>h-c/2{
            rdmHei = h-c/2
        }
        
        let circleImage = makeImage(width: c, height: c)
        let circleView = UIImageView(image: circleImage)
        circleView.center = CGPoint(x: rdmWid, y: rdmHei)
        circleView.alpha = 0.0
        self.view.addSubview(circleView)
        
        // MARK: トランザクションとして一括登録
        CATransaction.begin()
        
        // MARK: トランザクション終了時の処理
        CATransaction.setCompletionBlock {
            circleView.removeFromSuperview()
            
            if repeats > 0 && self.animationLayer != nil {
                // MARK: 繰り返しが残っていて、かつanimationLayer != nil の場合は再帰呼び出し
                self.recursiveRdmImage(viewFrameWidth: w, viewFrameHeight: h, circleSize: c , repeats: repeats - 1)
            } else {
                // すべてのアニメーションが終わったので animationLayer を nil にする
                self.animationLayer = nil
            }
        }
        
        // MARK: 4秒間のアニメーションを frameAnimation としてまとめて登録する
        // layer には alpha というプロパティはなく、かわりに opacity を使う
        let animation = CAKeyframeAnimation(keyPath: "opacity")
        animation.duration = 4.0
        animation.keyTimes = [0.0, 0.5, 1.0]
        animation.values = [0.0, 1.0, 0.0]
        // MARK: アニメーションを登録する。
        // forkey: は必須ではないが、あとで削除するときにキーが必要なので登録
        circleView.layer.add(animation, forKey: "rdmImage")
        
        // MARK: アニメーションを止めるときに使う
        animationLayer = circleView.layer
        CATransaction.commit()
    }
    
    // MARK: 止めるボタンを押した時の処理
    @IBAction func stopButton(_ sender: Any) {
        if animationLayer == nil {
            print("no animations")
            return
        }
        
        // forkey で指定したアニメーションを止める
        animationLayer?.removeAnimation(forKey: "rdmImage")
        animationLayer = nil
        
    }
}

Comments

[okkyu]

ご回答ありがとうございます。悩んでいたことが解決でき、とても参考になりました。ありがとうございます。