UIImageViewを操って画像をプルプルさせてみた【Swift低空飛行ガイド】

2015年7月7日

f_f_business_31_s128_f_business_31_2bg
夏が近づいてくると、わらび餅とかゼリーっぽいのが食べたくなりませんか?ということで、プルプルしたものを作ってみたくなりました。

今回はこちらの情報を参考にさせて頂きました。

[iOS] UIView をプルプルさせる

スポンサーリンク

学べること

・UIImageViewの画像をプルプルさせる

 

はじめましょう!

プロジェクトの新規作成

まずはプロジェクトを新規作成します。名前は「PurrupuruSample」としておきましょう。テンプレートは「Single View Application」を選択してください。Core Dataのチェックも不要です。手順の詳細は以下をご参照ください。

「基礎手順:プロジェクトの新規作成」

 

オブジェクトの作成

先にビューの背景を変更

post-615_01

オブジェクトを作る前に、真っ白なビューの色をきな粉っぽい色にしておきましょう。設定はAttributes InspectorのBackgroundで行います。

 

 

 

ビューにビューを追加

post-615_03

次にビューの中にビューをもう一つ配置します。配置したらSize Inspectorで位置とサイズを調整しましょう。適当で大丈夫ですが、例ではX=50、Y=50、Width=100、Height=100にしています。

 

 

post-615_05ついでに、このビューが見えないようにバックグラウンドカラーを変更します。BackgroundをDefaultにするとビューの色が透明になります。

ここまで出来上がったらこのビューをプログラムで制御できるように、アウトレット接続しておきます。アウトレット名は「viewPurupuru」としておきましょう。

アウトレット接続作成の詳細は以下をご参照ください。

「基礎手順:アウトレット接続」

 

イメージビューを配置

post-615_03今度は、今作ったビューにぴったり重なるようにイメージビューを配置します。上に重ねればビューのサイズにぴったり収まるように自動調整してくれます。あとはずれないように真ん中に置いてください。

 

 

post-615_06

イメージビューを作ったら、お餅っぽい画像をXcodeの中に放り込みましょう。いい画像がないよ〜という方は下の丸い画像を使ってください(見にくくなってごめんなさい)mochi

 

post-615_07画像を追加したら、もう一度イメージビューを選択して、Attributes InspectorのImageで追加画像を選んでください。これで完成です。

 

 

次はコーディング

これでオブジェクトの準備ができたので、コーディングに入りましょう。vibratedとdegreesToRadiansという2つのファンクションを作成し、viewDidloadから呼ばれるようにします。

 

実行してみましょう!

スクリーンショット 2015-07-07 18.13.36これで実行してみましょう!すると画面に謎の物体が現れ、プルプルしていると思います。

 

 

 

 

 

 

最後に

ファンクションの中で指定するパラメータの数値はあまり理解できていないので説明ができませんでしたが、いろいろと動きに変化がつけられるのでご自分で試してみてください。あと、今回のキモはUIImageではなくてUIImageViewに対して設定するところです。ビューにあれば何にでも使えるので画面全体を揺らすなんてこともできますよ。

今回のサンプルはこちらにあります。

スポンサーリンク