とりあえずブログ

プログラミングとiPhoneアプリの作り方を勉強中です。

試行錯誤 9 (アニメーション:花びらが散る動き)

「春の縁側」アプリの背景には、満開の桜が咲いています❀❀❀
表紙と画面遷移した2つの場面で、桜の花びらがひらひら散るようなアニメーションを行ってみました。

f:id:onetoonewao:20151118032631p:plain

実際には花びらは回転しながら落ちてきますので、本当は3Dで舞い散る様子ができたら良いのですが全く歯が立たない状態...orz
今回は平面上で、前回の蝶の動きに少し近いですが左右に揺れながら落ちてくるようにしました。
作ってみたサンプルです。


画像は、向きが異なる4種類の花びらを用意して画面の一番上から降らせています。
f:id:onetoonewao:20151118034036p:plain f:id:onetoonewao:20151118034045p:plain f:id:onetoonewao:20151118034048p:plain f:id:onetoonewao:20151118034051p:plain

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //一定間隔で花びらを作る関数を呼ぶ
        for(var i=0; i<12; i++){
            
            let delayTime = dispatch_time(DISPATCH_TIME_NOW, Int64(i*Int(NSEC_PER_SEC)))
            dispatch_after(delayTime, dispatch_get_main_queue()) {
                self.petalMake()
            }
        }
    }
    
    ///花びらを作る関数
    func petalMake(){
    
        //ランダムなx座標を取り、花びらを作る
        let x:Int = Int(UIScreen.mainScreen().bounds.size.width)
        let num = Int(arc4random_uniform(UInt32(x)))
        let petalImg = UIImageView(frame: CGRectMake(CGFloat(num), 0, 20, 30))
        let petalNum = arc4random_uniform(4)+1
        let petalType = "petal\(petalNum).png"
        petalImg.image = UIImage(named: petalType)
        self.view .addSubview(petalImg)
        
        //花びらを降らす関数を呼ぶ
        startFall(petalImg)
    }
    
/**
花びらを降らす関数
     
- parameter petal : 花びらのimageView
*/
    func startFall(petal:UIImageView){
        
        //花びらの中心
        var point = petal.center
        
        //花びらのアニメーション
        UIView.animateWithDuration(0.01, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
            
                //下向きに落ちていく
                point.y += 1
            
                //一定距離ごとに左右に揺れる
                if point.y % 100 <= 25{
                    point.x += 1
                }else if point.y % 100 <= 50{
                    point.x -= 1
                }

                petal.center = point
            
            }) { (finished:Bool) -> Void in
                
                    //画面の一番下まで来たら花びらを消す
                    if point.y >= UIScreen.mainScreen().bounds.size.height{
                        
                        petal.removeFromSuperview()
                        
                        //花びらを作る関数を呼ぶ
                        self.petalMake()
                        
                    }else{

                        //まだ画面途中なら降らすアニメーションを行う
                        self.startFall(petal)
                    }
                }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}


viewDidLoadで、1秒ずつずらして花びらを作っているのですが、performSelectorが使えなくなったのでdispatch_afterを使いました。
でも、意味がきっちり分からないまま使っています(--;)
今回Swiftで書き直すに当たって調べてみましたが、それでも...orz

これに限らず、調べても分からないこと、分かっているつもりで実は分かっていないことがたくさんあります。
今まで「こんなものが作りたい!」と思ったら一目散にその動きを作ることを最優先にやってきたのですが、もう一度基礎の基礎から丁寧に勉強する必要を痛切に感じます。
今作っているアプリが完成したら、勉強を始めようと思っていますφ(.. )
どんな方法でやろうかな...と現在考え中。。。
このこともまた書いてみたいと思います。

*参考にさせていただきました

アプリで飯を食う: Objective-Cで簡単に並列処理をする方法