스탬프가 「반!」이 되는 분위기를 특별한 라이브러리 없이. 획득한 스탬프 수를 유저 디폴트등으로 관리하는 것으로, 소위 로그인 보너스적인 용도로 이용할 수 있다고 생각합니다.

완성 견본

1. 프로젝트 만들기

Single View Application을 템플릿으로 새 프로젝트를 만듭니다.

2. 스탬프대와 스탬프의 위치를 ​​Autolayout으로 정의

중첩이 아래에서 view(StampBaseView(황색)) → ImageView(스탬프대) → ImageView(스탬프 x10)가 되도록 배치합니다. 포인트는 StampBaseView(황색)를 기준으로 스탬프대와 스탬프의 제약을 해 나가는 것입니다. 그렇지 않으면 스탬프를 누르면 스탬프가 함께 흔들리지 않고 떠있는 느낌이 되어 버립니다. StampBaseView는 알기 쉽게 배경을 노란색으로 만들지만 결국 투명하게 만듭니다.

3.ViewController 구현

doStamp()가 스탬프를 누르는 메서드입니다. 처리 직전에 사이즈를 크게 & 투명하게 해, 지정 초를 걸어 사이즈와 불투명도를 바탕으로 되돌리는 것으로 스피드감을 연출하고 있습니다. 스탬프 애니메이션의 콜백에 vibrate()를 지정합니다. vibrate는 산을 흔드는 방법입니다. 좌우에 작은 로테이트를 주고 흔들리는 느낌을 내고 있습니다.

// swift 3.0

import UIKit

class ViewController: UIViewController {

    var currentStampNo:Int = 0

    @IBOutlet weak var stampBaseView: UIView!

    @IBOutlet var stamps: [UIImageView]!

    // スタンプリセット
    @IBAction func stampReset(_ sender:UIButton) {

        let _ = stamps.map { $0.isHidden = true }
        currentStampNo = 0
    }

    // スタンプ押す
    @IBAction func stampAdd(_ sender:UIButton) {

        if currentStampNo < stamps.count {
            doStamp(stamp: stamps[currentStampNo] )
            currentStampNo += 1
        } else {
            let alert = UIAlertView()
            alert.title = "Stamp Demo"
            alert.message = "もういぱいです！"
            alert.addButton(withTitle: "OK")
            alert.show()

        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        // スタンプ初期化
        let _ = stamps.map { $0.isHidden = true }


    }

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


    // スタンプ台を揺らす。amount = 揺れ幅
    func vibrate(amount: Float ,view: UIView) {
        if amount > 0 {
            var animation: CABasicAnimation
            animation = CABasicAnimation(keyPath: "transform.rotation")
            animation.duration = 0.1
            animation.fromValue = amount * Float(M_PI) / 180.0
            animation.toValue = 0 - (animation.fromValue as! Float)
            animation.repeatCount = 1.0
            animation.autoreverses = true
            view.layer .add(animation, forKey: "VibrateAnimationKey")
        }
        else {
            view.layer.removeAnimation(forKey: "VibrateAnimationKey")
        }
    }

    // スタンプ押下
    func doStamp(stamp:UIImageView) {

        // 透明にする
        stamp.alpha = 0.0
        // 表示
        stamp.isHidden = false
        // サイズと位置情報
        let b = stamp.bounds

        UIView.animate(withDuration: 0.05,
                       delay:0.0,
                       usingSpringWithDamping:0.2,
                       initialSpringVelocity:10,
                       options:[],animations:{
                            // サイズを大きくする
                            stamp.bounds = CGRect(x:b.origin.x,
                                                  y:b.origin.y,
                                                  width:b.size.width + 130,
                                                  height:b.size.height + 130)
                        },
                        completion: nil)


         UIView.animate(withDuration: 0.05,
                        delay: 0.8,
                        usingSpringWithDamping: 1.0,
                        initialSpringVelocity: 90,
                        options: [], animations: {
                            // サイズを元に戻す
                            stamp.bounds = CGRect(x:b.origin.x,
                                                  y:b.origin.y,
                                                  width:b.size.width,
                                                  height:b.size.height)
                            // 透過度を元に戻す
                            stamp.alpha = 1.0
                        },
                        completion:{ finished in
                            // 台紙を揺らす
                            self.vibrate(amount: 3.0 ,view: self.stampBaseView)
                        })
    }

}

4. 액션 아울렛 연결

코드와 부품을 연결합니다. (아울렛 콜렉션의 접속 방법은 하부의 보충 참조)

5.완성!

[스탬프 +] 버튼으로 스탬프가 하나 늘어납니다. 10개를 넘으면 대화 상자가 표시됩니다. [리셋] 버튼으로 초기화입니다.

보충(Outlet Collection)

소스상의 작성하고 싶은 곳에 첫 번째 부품을 control을 누르면서 드래그. connection에서 Outlet Collection을 선택합니다. 변수가 생성되면 다른 부품을 순서대로 연결합니다. 연결 순서로 인덱스가 생성되는 것 같습니다.


화상 소재로서 이하의 사이트로부터 이용 받았습니다

스탬프 산 소재
일러스트 박스
h tp // w w. 일단 st-보 x. jp/

스탬프 소재
무료 소재 클럽
h tp : // 소자이. 7 가서 s. 네 t/

프로젝트 세트를 GitHub에 넣을 때