Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

AutoLayoutでアニメーションを設定する方法(Swift版)

More than 1 year has passed since last update.

以前書いたAutoLayoutでアニメーションを設定する方法のSwift版です。

アニメーションで動かしたいものの例

例として、mainViewの上に乗った、movableViewを下に動かすことを考えます。
autolayout.001.jpg

movableViewの制約は、superViewであるmainViewに対して、以下のような制約を持っているとします。
スクリーンショット 2015-10-28 16.23.44.png

Top Space, Trailing Space, Leading Spaceの各種の制約の値は0になっています。高さは適当です。

やってみる

基本的な考え方は、既に付いているautoLayoutの制約を外し、別の制約を付ける、ということです。今回の場合、"Top Space to SuperView = 0" の制約を外し、Top Space to mainView = 30 といった制約をつけます。

まず外す対象の制約をoutletでソースに結び付けておきます。また一緒に、付ける制約をプロパティとして宣言しておきます。

@IBOutlet weak var topConstraint: NSLayoutConstraint!
var modifiedTopConstraint : NSLayoutConstraint?
@IBOutlet weak var mainView: UIView!

次に、付ける制約について設定します。

self.modifiedTopConstraint = NSLayoutConstraint(
        item: self.mainView, 
        attribute:  NSLayoutAttribute.Top, 
        relatedBy:  NSLayoutRelation.Equal, 
        toItem:     self.movableView, 
        attribute:  NSLayoutAttribute.Top, 
        multiplier: 1.0, 
        constant:   30.0 
        )

この制約の設定は、1つ目のアイテム、1つ目のアイテムの場所、関係性、2つ目のアイテム、2つ目のアイテムの場所、係数、定数のように引数をいれます。詳しくはこちらを参考

最後に、制約を外して、つけ直します。

// 制約を外す
self.mainView.removeConstraint(self.topConstraint!)
// 制約を付け直す
self.baseView.addConstraint(self.modifiedTopConstraint!)
// 更新をかける
       UIView.animateWithDuration(
            0.5,
            delay:0.3,
            options:UIViewAnimationOptions.CurveEaseOut,
            animations: {() -> Void in
                // これが大事!
                self.view.layoutIfNeeded()
            },
            completion: nil
        );

これで上にくっついていたmovableViewが下に移動するはずです。
もとに戻したいときは、外す制約と付ける制約を入れ替えてあげればよいです。

最後に

基本的な動作のみを説明したので、あとはいろいろ応用してみてください。
横に動かしたり、複数の制約を同時に操作したり、アニメーションの速度、遅延、効果をいじったり。

参考

bohemian916
研究機関で働く研究技術員になりました。 技術だけのものはQiitaに ネタを含むものはこっちに書いてます http://bohemia.hatenablog.com/
http://bohemia.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away