UIImageViewを操って画像をプルプルさせてみた【Swift低空飛行ガイド】
夏が近づいてくると、わらび餅とかゼリーっぽいのが食べたくなりませんか？ということで、プルプルしたものを作ってみたくなりました。
今回はこちらの情報を参考にさせて頂きました。
学べること
・UIImageViewの画像をプルプルさせる
はじめましょう！
プロジェクトの新規作成
まずはプロジェクトを新規作成します。名前は「PurrupuruSample」としておきましょう。テンプレートは「Single View Application」を選択してください。Core Dataのチェックも不要です。手順の詳細は以下をご参照ください。
オブジェクトの作成
先にビューの背景を変更
オブジェクトを作る前に、真っ白なビューの色をきな粉っぽい色にしておきましょう。設定はAttributes InspectorのBackgroundで行います。
ビューにビューを追加
次にビューの中にビューをもう一つ配置します。配置したらSize Inspectorで位置とサイズを調整しましょう。適当で大丈夫ですが、例ではX=50、Y=50、Width=100、Height=100にしています。
ついでに、このビューが見えないようにバックグラウンドカラーを変更します。BackgroundをDefaultにするとビューの色が透明になります。
ここまで出来上がったらこのビューをプログラムで制御できるように、アウトレット接続しておきます。アウトレット名は「viewPurupuru」としておきましょう。
アウトレット接続作成の詳細は以下をご参照ください。
イメージビューを配置
今度は、今作ったビューにぴったり重なるようにイメージビューを配置します。上に重ねればビューのサイズにぴったり収まるように自動調整してくれます。あとはずれないように真ん中に置いてください。
イメージビューを作ったら、お餅っぽい画像をXcodeの中に放り込みましょう。いい画像がないよ〜という方は下の丸い画像を使ってください（見にくくなってごめんなさい）
画像を追加したら、もう一度イメージビューを選択して、Attributes InspectorのImageで追加画像を選んでください。これで完成です。
次はコーディング
これでオブジェクトの準備ができたので、コーディングに入りましょう。vibratedとdegreesToRadiansという2つのファンクションを作成し、viewDidloadから呼ばれるようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
class ViewController: UIViewController { @IBOutlet weak var viewPurupuru: UIView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. vibrated(true, view: viewPurupuru) } func degreesToRadians(degrees: Float) -> Float { return degrees * Float(M_PI) / 180.0 } func vibrated(vibrated:Bool, view: UIView) { if vibrated { var animation: CABasicAnimation animation = CABasicAnimation(keyPath: "transform.rotation") animation.duration = 0.15 animation.fromValue = degreesToRadians(3.0) animation.toValue = degreesToRadians(-3.0) animation.repeatCount = Float.infinity animation.autoreverses = true view.layer .addAnimation(animation, forKey: "VibrateAnimationKey") } else { view.layer.removeAnimationForKey("VibrateAnimationKey") } } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } |
実行してみましょう！
これで実行してみましょう！すると画面に謎の物体が現れ、プルプルしていると思います。
最後に
ファンクションの中で指定するパラメータの数値はあまり理解できていないので説明ができませんでしたが、いろいろと動きに変化がつけられるのでご自分で試してみてください。あと、今回のキモはUIImageではなくてUIImageViewに対して設定するところです。ビューにあれば何にでも使えるので画面全体を揺らすなんてこともできますよ。
今回のサンプルはこちらにあります。