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でソースに結び付けておきます。また一緒に、付ける制約をプロパティとして宣言しておきます。

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

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

swift
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つ目のアイテムの場所、係数、定数のように引数をいれます。詳しくはこちらを参考

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

swift
// 制約を外す
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が下に移動するはずです。
もとに戻したいときは、外す制約と付ける制約を入れ替えてあげればよいです。

最後に

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

参考