CALayerアニメーション実践①：アプリケーションをもっと柔軟に！ _html/css_WEB-ITnose

この記事では、2 つの読み込みアニメーションを通して CALayer アニメーションを紹介します。オブジェクト指向の考え方によれば、Layer は実際にはモデル クラスであり、Java の POJO クラスと同様に、いくつかの属性が含まれており、これらの属性が Layer に表示されるコンテンツに影響を与えるメソッドはありません。まず、UIView と CALayer の違いと関係を見てみましょう。

• 連絡先: レイヤーはビューの後ろにいる女性です。各 UIView の背後には、対応する CALayer があります。UIView に表示されるコンテンツは、実際には CALayer 内にあります。

• の違い:

• View には、さまざまな組み合わせによる複雑なレイアウト メカニズムがあります。レイヤーは非常にシンプルなレイアウトのみです。

• View はユーザーの操作に応答できます。レイヤーはユーザーの操作に応答できません。

• View の描画ロジックは CPU によって実行されます。 Layer でのペイントは GPU によって直接実行されます。

• View には豊富で強力なサブクラスがあります。 Layer にはサブクラスがいくつかしかありません。

• View にはアニメーション属性が少なく、制限が増えています。 Layer は下位レベルであり、より多くのアニメーション属性を持っているため、より柔軟で豊かなアニメーションを実現できます。

初めての CALayer アニメーション

レイヤーアニメーションシリーズの記事では、簡単な知識から複雑な知識まで体系的な説明は用意しません。サンプルで使用される知識のポイントについて、さまざまな実践例を使用して説明します。

最初のアニメーションでは、Google Chrome ブラウザーの読み込み時にタブに待機アニメーションを実装しましょう:

新しいプロジェクト GoogleLoading、Main.storyboard を開き、UIView を ViewController にドラッグし、制約を追加し、 ViewController と UIView の背景色を自分で設定します。 ここでは、UIView の背景色を無色に設定します。

次に、ViewController に View の Outlet を追加します。この UIView は、読み込みアニメーションを表示する View です。 cpp]

plaincopy を表示

@IBOutletweak varloadingView: UIView!

1. ViewController.swift を開いて定数属性 ovalShapleLayer を宣言します:

[cpp]

plain copy を表示

let ovalShapeLayer: CAShapeLayer = CAShapeLayer()

1. ovalShapleLayer のタイプは CAShapleLayer で、CALayer の数少ないサブクラスの 1 つです。その機能は、単純な円や四角形、複雑な五芒星、不規則なグラフィックなど、さまざまな形状を画面上に描画することです。 CAShapeLayer には次の主な属性があります:

ストロークカラー: ストロークの色。

• ストローク開始: ストロークの開始位置。

• ストロークEnd: ストロークの終了位置。

• fillColor: グラフィックの塗りつぶしの色。

• lineWidth: ストロークの幅、つまりストロークの太さ。

• lineDashPattern: 破線パターン。

• path: グラフィックのパス。

• lineCap: ストロークの閉じられていない位置の形状。

• CAShapeLayer を宣言する理由は、それを使用して画面上に円を描画したいためです。次のコードを viewDidLoad() メソッドに追加します:

[cpp]

view plaincopy

ovalShapeLayer.strokingColor = UIColor.whiteColor().CGColor

1. ovalShapeLayer.fillColor =色() .CGColor

2. ovalShapeLayer.lineWidth = 7

3. これらの 3 行のコードの意味は、描画する円形のストロークの色が塗りつぶしの色なしの白であることです。 、ストロークの幅は7です。次に、円のサイズがビュー サイズの 80% になるように円の半径を宣言します。

ovalShapeLayer.path = UIBezierPath(ovalInRect: CGRect(x:loadingView.frame.size.width/2 - ovalRadius、y:loadingView.frame.size.height/2 - ovalRadius、幅:ovalRadius * 2、高さ: ovalRadius * 2)).CGPath

ここに新しい顔、UIBezierPath が登場します。これはベクトルベースのパスを作成でき、Core Graphics フレームワークによるパスのカプセル化です。 UIBezierPath は、楕円、長方形、または複数の直線と曲線セグメントで構成される形状などの単純な形状パスを定義できます。ここでは、初期化メソッド init(ovalInRect rect: CGRect) を使用して、完全な円のパスを定義する必要があります。パスを設定した後、ovalShapeLayerをloadingViewビューのLayerに追加すると、設定されたパスに従ってloadingViewにグラフィックを描画できます:

[cpp] view plaincopy

1. loadingView.layer( ovalShapeLayer)

コンパイルして実行して効果を確認します:

完全な円。次に行う必要があるのは、この円の一部のみを表示するようにすることです。これは、Google の読み込みアニメーションには円形の輪郭の約 5 分の 2 しか含まれていないためです。引き続き viewDidLoad() メソッドに注目し、loadingView.layer.addSublayer(ovalShapeLayer) コード行の上に別のコード行を追加します。 0.4

上記のコードは、ovalShapeLayer のストロークEnd プロパティを 0.4 に設定します。これは、円を描画するときに、ovalShapeLayer は円全体の 5 分の 2 のみを描画します。つまり、ストロークは円全体の 5 分の 1 で終了することを意味します。円の輪郭が 2 か所あります。コンパイルして実行して効果を確認します。

これは希望どおりの効果のようですが、改善する必要がある詳細が 1 つあります。Google の読み込みアニメーションを見てください。円形の輪郭の青い部分が丸くなっています。丸い輪郭の両端は四角形です。この問題は簡単に解決できます。次のコード行を、loadingView.layer.addSublayer(ovalShapeLayer) 行の上に追加します。

このコード行は、ストロークの両端の形状を円に設定することを意味します。対応する 2 つの定数 kCALineCapButt と kCALineCapSquare も試してみることができます。もう一度コンパイルして実行して、効果を確認します。

ここまで、CALayer を使用してアニメーションの本体を描画しました。次に、それを動かす必要があります。 ViewController.swift に beginSimpleAnimate() メソッドを追加します。

[cpp] view plaincopy

1. func beginSimpleAnimation() {

2. letrotate = CABas icAnimation(keyPath: " ")
   

rotate.duration = 1.5

rotate.fromValue = 0

rotate.toValue = 2 * M_PI

rotate.re petoCount = HUGE

1. loadingView.layer.addAnimation(rotate, forKey: nil)

2. }

3. このメソッドでは、新しいフェイス CABasicAnimation が表示されます。このクラスは、animationWithKeyPath: 初期化メソッドを通じて、CAPropertyAnimation に基づいてさまざまなアニメーションを作成します。実例。一般的に使用される keyPath には次のものがあります:

4. transform.rotation: 回転アニメーション。

5. transform.ratation.x: アニメーションを x 軸で回転します。

6. transform.ratation.y: アニメーションを y 軸で回転します。

7. transform.ratation.z: アニメーションを Z 軸で回転します。

8. transform.scale: アニメーションを比例的に拡大および縮小します。

transform.scale.x: アニメーションを x 軸に比例してスケールします。

• transform.scale.y: アニメーションを Y 軸に比例して拡大および縮小します。

• transform.scale.z: アニメーションを Z 軸に比例してスケールします。

• position: 位置を移動するアニメーション。

• 不透明度: 透明度のアニメーション。

• 上記は、一般的に使用されるアニメーション キーパスのほんの一部です。実際のアプリケーションでさらに詳しく調べていただければ幸いです。 beginSimpleAnimation() メソッドでは、transform.rotation を使用して回転アニメーションのインスタンスを作成し、アニメーションの 4 つのプロパティを設定します:

• duration: アニメーションの継続時間。

• fromValue: アニメーションの開始値。

• toValue: アニメーション終了値。

• repeatCount: 繰り返しの数。

このメソッドでこれらの属性を設定する意味は、アニメーション本体を連続的に回転させることであり、1 回転の時間は 1.5 秒です。上記の概念は UIView アニメーションにも存在しており、誰もがよく知っているはずです。次に、Layer の addAnimation(anim: CAAnimation, forKey key: String?) メソッドを使用して、回転アニメーション インスタンスをターゲット Layer に追加します。このメソッドのキーは、後で再利用するときに簡単に取得できるように、追加されたアニメーションをマークするために使用されます。値 nil を渡す必要はありません。最後に、beginSimpleAnimation() メソッドが viewWillAppear メソッド内で呼び出されます。

[cpp] view plaincopy

1. override func viewWillAppear(animated: Bool) {

2. beginSimpleAnimation ()

3. }

コンパイルして実行して効果を確認します。

これで、最初の単純な CALayer アニメーションが完成しました。次のセクションでは、新しいアニメーション タイプとアニメーションの組み合わせを紹介するために、より興味深い読み込みアニメーションを実装します。

ストローク アニメーションとアニメーション グループ

最初に達成される効果を見てみましょう:

この種の読み込みアニメーションは、NetEase News や Win バージョンの Google Chrome など、多くのアプリケーションに登場しています。まず、Main.storyboard を開き、新しい UIView を追加し、ViewController.swift に Outlet を追加します。次に、新しい CAShapeLayer を定義します。 anotherOvalShapeLayer: CAShapeLayer = CAShapeLayer()

それを viewDidLoad() メソッドに設定し、先ほど作成した complexLoadingView に追加します:

[cpp] プレーン コピーを表示

1. an otherOvalShapeLayer.ストロークカラー = UIColor.whiteColor().CGColor

anotherOvalShapeLayer.fillColor = UIColor.clearColor().CGColor

anotherOvalLayer.line width = 7

1. anotherOvalRadius = complexLoadingView.frame.size にします.height/2 * 0.8

2. anotherOvalShapeLayer.path = UIBezierPath(ovalInRect: CGRect(x: complexLoadingView.frame.size.width/2 - anotherOvalRadius, y: complexLoadingView.frame.size.height/2 - anotherOvalRadius, width: anotherOvalRadius * 2、高さ: anotherOvalRadius * 2)).CGPath

3. anotherOvalShapeLayer.lineCap = kCALineCapRound

5. complexLoadingView.layer.addSublayer(anotherOvalShapeLayer)

6. これらの操作は、前のアニメーションがすでにすでに行われているので、ここでは説明しません。コンパイルして実行し、別の円が画面に表示されるかどうかを確認します。

7. 次に、ViewController.swift にメソッド beginComplexAnimation() を追加します。

8. [cpp]

   view plaincopy

let ストロークStartAnimate = CABasicAnimation( keyPath: "ストローク開始")

ストロークStartAnimate.fromValue = -0.5

ストロークStartAnimate.toValue = 1

1. let ストロークEndAnimate = CABasicAnimation(keyPath: "ストロークエンド")

2. ストロークEndAnimate.fromValue = 0.0

3. ストロークEndAnimate.toValue = 1

5. let ストロークAnimateGroup = CAAnimationGroup()

6. ストロークAnimateGroup.duration = 1.5

7. ストロークAnimateGroup.repeatCount = 巨大です

8. ストロークAnimateGroup.animations = [ストロークStartAnimate, ストロークEndAnimate]

9. anotherOvalShapeLayer.addAnimation(ストロークAnimateGroup, forKey: nil)

10. ここではストローク開始アニメーションとストローク終了アニメーションという2つの新しいアニメーションタイプがありますが、CAShapeレイヤー描画を使用していますが、円が描画されます。 、ストロークの開始位置とストロークの終了位置もありますが、それらは同じ位置にあります。ストローク アニメーションの位置の値は 0 ～ 1 であり、0 は描画パスの開始位置を表し、1 は描画パスの位置を表します。描画されたパスの終了位置。

    したがって、ストロークの開始位置を –0.5 から開始するストロークの開始位置を –0.5 から開始するストロークの開始位置をアニメーションに設定します。つまり、ストロークの描画が開始されるまで待機することです。描画。ストロークEndAnimateアニメーションでは、ストロークの終了位置を0から1まで通常通り円を描くことができます。このようにストロークの両端の描画時間が異なり、時間差が生じることで、連続的に円を描いたり消したりする効果が得られます。

    ストロークStartAnimate とストロークEndAnimate は 2 つのアニメーションであり、レイヤー上でどのように動作しますか?このとき、CAAnimationGroup を使用します。名前のとおり、複数のアニメーションを 1 つのグループにまとめ、サブアニメーションを同時に実行します。アニメーション グループでは、アニメーションの継続時間、繰り返しの数、およびサブアニメーションの配列を設定できます。最後に、アニメーション グループをレイヤーに追加します。

    最後に、viewWillAppear() メソッドで beginComplexAnimation() メソッドを呼び出します:

    [cpp] view plaincopy

    1. override func viewWillAppear(animated: Bool) {

    2. beginS impleAnimation()

    3. beginComplexAnimation()

    4. }

    コンパイルして実行して効果を確認します:

    概要

    CALayer アニメーションは、UIView アニメーションよりもリッチで、低レベルで、より効率的なアニメーションを実現できます。ただし、実際のアプリケーション開発では、UIView アニメーションが使用できる場合は、CALayer アニメーションは必要ありません。この記事は、CALayer アニメーションの概要を説明するものであり、CALayer アニメーションについての予備的な理解を提供します。後で、この記事でさらに多くの例を使用して、CALayer アニメーションをより深く理解し、それによって独自のアプリケーションのユーザー エクスペリエンスを向上させます。