iOS Core Animation詳解（四）AutoLayout中的動畫

標籤：ios   autolayout   動畫   anmation   

原創blog，轉載請註明出處
blog.csdn.net/hello_hwc
歡迎關注我的iOS SDK詳解專欄
http://blog.csdn.net/column/details/huangwenchen-ios-sdk.html

前言：AutoLayout定義了View的位置，也就是說，在Auto Layout的工程裡，如果不修改約束本身，在視圖重新繪製的時候，還會回到最開始的位置。AutoLayout中的動畫與視圖的位置和大小有關。

先看看效果

實現過程

在Storyboard上拖拽一個UIImageview。設定約束為：水平垂直正中心，大小很定100＊100

拖拽Imageview以及Constraint為Outlet

注意拖拽Y相關的約束，也就是這個

對應代碼

 @IBOutlet weak var imageview: UIImageView! @IBOutlet weak var yConstraints: NSLayoutConstraint!

在viewDidload中設定imageview的初始狀態

 yConstraints.constant = yConstraints.constant - CGRectGetHeight(UIScreen.mainScreen().bounds)/2 self.imageview.alpha = 0.0; self.imageview.transform = CGAffineTransformMakeScale(0.1, 0.1) self.view.layoutIfNeeded();

ViewWillAppear中建立動畫

 yConstraints.constant = yConstraints.constant + CGRectGetHeight(UIScreen.mainScreen().bounds)/2 UIView.animateWithDuration(1.0, animations: { () -> Void in        self.imageview.alpha = 1.0        self.imageview.transform = CGAffineTransformIdentity        self.view.layoutIfNeeded() })

原理

原理比較簡單，就是利用修改約束NSLayoutConstraint中的屬性constant，然後調用layoutIfNeeded來實現動畫。注意，屬性multiplier目前（iOS 8.4）還是唯讀,不能修改。但是可以通過關係view1.property = view2.property * multiplier + constant進行轉換。

純程式碼的AutoLayout動畫

上述動畫用純程式碼實現

class ViewController: UIViewController {    var imageview:UIImageView?    weak var yConstraint:NSLayoutConstraint?    override func viewDidLoad() {        super.viewDidLoad()        //添加Imageview        let image = UIImage(named: "1_hello_hwc.jpg")        imageview = UIImageView(image: image)        self.imageview?.setTranslatesAutoresizingMaskIntoConstraints(false)        self.view.addSubview(self.imageview!)        //建立約束，定義最開始的位置        let hC = NSLayoutConstraint(item:self.view, attribute:NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self.imageview, attribute: NSLayoutAttribute.CenterX, multiplier: 1.0, constant: 0.0)        let vC = NSLayoutConstraint(item:self.view, attribute:NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: self.imageview, attribute: NSLayoutAttribute.CenterY, multiplier: 1.0, constant: 0.0)        yConstraint = vC;        yConstraint!.constant = yConstraint!.constant - CGRectGetHeight(UIScreen.mainScreen().bounds)/2        let widthC = NSLayoutConstraint(item:self.imageview!, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem:nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 100)        let widthH = NSLayoutConstraint(item:self.imageview!, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem:nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 100)        self.view.addConstraints([hC,vC,widthC,widthH])        //定義最開始的狀態        self.imageview?.alpha = 0.0;        self.imageview?.transform = CGAffineTransformMakeScale(0.1, 0.1);        self.view.layoutIfNeeded()    }    override func viewWillAppear(animated: Bool) {        yConstraint!.constant = yConstraint!.constant + CGRectGetHeight(UIScreen.mainScreen().bounds)/2        UIView.animateWithDuration(1.0, animations: { () -> Void in            self.imageview!.alpha = 1.0            self.imageview!.transform = CGAffineTransformIdentity            self.view.layoutIfNeeded()        })    }}

定位Constraints

設定屬性identifier

yConstraint.identifier ＝ "identifier"

然後在過濾，定義到這個Constraints,

 let constraint =  filter(self.view.constraints() as! [NSLayoutConstraint], { (constraint:NSLayoutConstraint) -> Bool in            return constraint.identifier == "identifier"        }).first

著作權聲明：本文為博主原創文章，如需轉載請註明出處

iOS Core Animation詳解（四）AutoLayout中的動畫