iOS アニメーションAnimation-4-1:CALayer_html/css_WEB-ITnose

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

まず第一に、これは一連の記事であり、このトピックの下にある他の記事を参照すると、この記事を理解するのに役立ちます。

1. CALayer の紹介

CALayer はアニメーションの主要なオブジェクトです。アニメーションを深く理解したい場合は、まず CALayer を理解する必要があります。 CALayer は、iOS と Mac OS X の両方で使用できるクロスプラットフォーム フレームワークである QuartzCore フレームワークに含まれています。 Core Animation を使用したアニメーション開発の本質は、CALayer のコンテンツをハードウェア操作用のビットマップに変換することです。

iOS の CALayer は主にコンテンツの表示とアニメーションの操作を目的として設計されており、CALayer 自体は UIKit に含まれておらず、イベントに応答することはできません。 CALayer はアニメーション操作機能を念頭に置いて設計されているため、CALayer の多くのプロパティは変更するとアニメーション効果を形成できます。このプロパティは「暗黙的アニメーション プロパティ」と呼ばれます。ただし、UIView のルート レイヤの場合、プロパティの変更はアニメーション効果を形成しません。多くの場合、ルート レイヤはコンテナとして機能するため、そのプロパティが変更されてアニメーション効果が形成されると、サブレイヤに直接影響します。さらに、UIView のルート レイヤの作成は iOS によって完全に完了され、再作成することはできませんが、ルート レイヤにサブレイヤを追加またはルート レイヤから削除することはできます。

2. CALayer の共通プロパティ

以下の表は、CALayer の共通プロパティを示しています:


1. 暗黙的な属性アニメーションの本質は、これらの属性の変更がデフォルトで暗黙的に CABasicAnimation アニメーションの実装を暗黙的に示すことです。 Xcode ヘルプのドキュメントの「アニメーション化可能なプロパティ」セクションを参照してください。

2. フレーム自体はアニメーション効果をサポートしておらず、通常は代わりに境界と位置が使用されるため、フレーム属性は CALayer ではほとんど使用されません。

3. CALayer の透明度はアルファではなく不透明度で表され、中心点は中心ではなく位置で表されます。

4.anchorPoint 属性は、レイヤーのアンカーポイントです。範囲は (0~1,0~1) で、このポイントは常に位置 (中心点) と一致します。レイヤーの中心点を固定した後、anchorPoint を調整すると、レイヤーの表示位置を調整する効果が得られます (常に位置と一致するため)

anchorPoint の役割をさらに説明するために、次のサイズのレイヤーがあると仮定します。 100*100、現在の中心点の位置は (50,50) で、そこからフレーム (0,0,100,100) を取得できます。前述したように、anchorPoint のデフォルトは (0.5, 0.5) であり、これは中心点の位置と一致します。このとき、anchorPoint をアンカーの (0,0) に変更する場合は、図 1 に示すようなグラフィック記述を使用します。ポイントはレイヤーの左上隅にありますが、中心点の位置は変更されないため、図 2 に示すようにレイヤーは右下隅に移動し、anchorPoint を (1,1,) に変更します。アンカーポイントはレイヤーの右下隅にあります。図


いくつかの属性の役割を理解するためにデモも書きました。

コード

import UIKitclass ViewController: UIViewController {    @IBOutlet weak var viewForLayer: UIView!    var myLayer: CALayer{        return viewForLayer.layer    }    override func viewDidLoad() {        super.viewDidLoad()        setUpLayer()        // Do any additional setup after loading the view, typically from a nib.    }    func setUpLayer(){        myLayer.backgroundColor = UIColor.blueColor().CGColor        myLayer.borderWidth = 100        myLayer.borderColor = UIColor.redColor().CGColor        myLayer.shadowRadius = 3        myLayer.shadowOffset = CGSize(width: 0, height: 3)        myLayer.shadowOpacity = 0.7        myLayer.contents = UIImage(named: "star")?.CGImage        myLayer.contentsGravity = kCAGravityCenter        myLayer.magnificationFilter = kCAFilterTrilinear        myLayer.geometryFlipped = false    }    @IBAction func tap(sender: AnyObject) {        myLayer.shadowOpacity = myLayer.shadowOpacity == 0.7 ? 0.0 : 0.7    }    @IBAction func pinch(sender: UIPinchGestureRecognizer) {        let offset: CGFloat = sender.scale < 1 ? 5.0 : -5.0        let oldFrame = myLayer.frame        let oldOrgin = oldFrame.origin        let newSize = CGSize(width: oldFrame.width + (offset * -2.0), height: oldFrame.height + (offset * -2.0))        let newOrgin = CGPoint(x: oldOrgin.x + offset, y: oldOrgin.y + offset)        let newFrame = CGRect(origin: newOrgin, size: newSize)        if newFrame.width >= 100.0 && newFrame.width < 300 {            myLayer.borderWidth -= offset            myLayer.cornerRadius += offset / 2.0            myLayer.frame = newFrame        }    }    override func didReceiveMemoryWarning() {        super.didReceiveMemoryWarning()        // Dispose of any resources that can be recreated.    }}
ログイン後にコピー

レンダリング

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