ホームページ > ウェブフロントエンド > htmlチュートリアル > iOS Core アニメーションの詳細解説 (4) AutoLayout_html/css_WEB-ITnose のアニメーション

iOS Core アニメーションの詳細解説 (4) AutoLayout_html/css_WEB-ITnose のアニメーション

WBOY
リリース: 2016-06-24 11:39:21
オリジナル
1254 人が閲覧しました

前書き: AutoLayout はビューの位置を定義します。つまり、Auto Layout プロジェクトでは、制約自体が変更されていない場合、ビューが再描画されると元の位置に戻ります。 AutoLayout のアニメーションは、ビューの位置とサイズに関連しています。

まずはエフェクトを見てみましょう

実装プロセス

UIImageviewをストーリーボードにドラッグアンドドロップします。制約を次のように設定します: 水平方向と垂直方向の中心、サイズは 100*100 に固定されます

Imageview と Constraint をアウトレットにドラッグします

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 の定数属性を使用して変更し、layoutIfNeeded を呼び出してアニメーションを実装します。プロパティ乗数は現在 (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()        })    }}
ログイン後にコピー

位置決め制約

属性識別子を設定します

yConstraint.identifier = "identifier"
ログイン後にコピー

次にこの制約をフィルターして定義します

 let constraint =  filter(self.view.constraints() as! [NSLayoutConstraint], { (constraint:NSLayoutConstraint) -> Bool in return constraint.identifier == "identifier" }).first
ログイン後にコピー

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート