let newButtonWidth: CGFloat = 60UIView.animate(withDuration: 2.0) { //1 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) //2 self.button.center = self.view.center //3}

Width = 0, Height = 0

Width = Height = newButtonWidth

そして、ここではアニメーションがどのように見えるかです:

animateWithDuration

このメソッドは、animateメソッドの拡張のようなもので、ビューアニメーションに追加された物理ビヘイビアを使用して、以前のAPIで実行できるすべてのことを行うことができます。

たとえば、上で行ったアニメーションで春の減衰効果を実現したい場合、コードは次のようになります。

let newButtonWidth: CGFloat = 60UIView.animate(withDuration: 1.0, //1 delay: 0.0, //2 usingSpringWithDamping: 0.3, //3 initialSpringVelocity: 1, //4 options: UIView.AnimationOptions.curveEaseInOut, //5 animations: ({ //6 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center}), completion: nil)

使用するパラメータのセッ:

1. duration
   コードブロックの実行時間を決定するアニメーションの期間を表します。
2. delay
   アニメーションの開始前に必要な初期遅延を表します。
3. SpringWithDamping
   ビューを動作させたい弾力のある効果の値を表します。 値は0から1の間である必要があります。 値が低いほど、ばねの振動が高くなります。
4. velocity
   アニメーションを開始する速度を表します。
5. options
   ビューアニメーションに適用するアニメーションカーブのタイプ。
6. 最後に、アニメーション化する必要があるボタンのフレームを設定するコードブロック。 前回の動画と同じです。

そして、上記のアニメーション設定でアニメーションがどのように見えるかは次のとおりです:

UIViewPropertyAnimator

アニメーションをもう少し制御するには、UIViewPropertyAnimatorアニメーションを一時停止して再開する….. あなたは、カスタムタイミングを持っており、インタラクティブでinterruptibleであるためにあ これは、ユーザーアクションと対話可能なアニメーションを実行するときに非常に便利です。

古典的な”ロックを解除するスライド”ジェスチャーとプレイヤービューは、（音楽アプリで）アニメーションを却下/展開し、インタラクティブで中断可能なアニメーシ 指でビューの移動を開始し、それを離すと、ビューは元の位置に戻ります。 また、アニメーション中にビューをキャッチし、指でドラッグし続けることもできます。以下は、UIViewPropertyAnimatorを使用してアニメーションを実現する方法の簡単な例です。

let newButtonWidth: CGFloat = 60let animator = UIViewPropertyAnimator(duration:0.3, curve: .linear) { //1 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center}animator.startAnimation() //2

ここで私たちがやっていることです:

1. 持続時間とアニメーションカーブを渡すことでUIViewPropertyAPIを呼び出します。
2. 上記のUIViewとは異なります。animate APIの場合、アニメーションは自分で指定しない限り、つまりアニメーションプロセス/フローを完全に制御していない限り開始されません。

ここで、アニメーションをさらに制御したいとしましょう。 たとえば、アニメーション内のすべてのフレームをデザインして制御するとします。 そのための別のAPI、animateKeyframesがあります。 しかし、我々はそれを掘り下げる前に、すぐにアニメーションで、フレームが何であるかを見てみましょう。p>

とは何ですかframe?

開始状態から最終状態へのビューのフレームの変更/遷移のコレクションは、animationframeと呼ばれます。

animateKeyframes

このAPIは、異なるタイミングと遷移を持つ複数のアニメーションを定義できるようにアニメーションを設計する方法を提供します。 これを投稿すると、APIはすべてのアニメーションをシームレスな体験に統合するだけです。

画面上のボタンをランダムに移動したいとしましょう。 これを行うためにkeyframe animation APIを使用する方法を見てみましょう。ここでは内訳です：

1. duration
   アニメーションの期間を渡してAPIを呼び出します。
2. delay
   アニメーションの初期遅延時間。
3. options
   ビューアニメーションに適用するアニメーションカーブのタイプ。
4. animations
   開発者/ユーザーによって設計されたすべてのキーフレームアニメーションを取るブロック。
5. addKeyFrame
   APIを呼び出して、すべてのアニメーションを設計します。 私たちの場合、ボタンの各移動を定義しました。 必要な数のアニメーションをブロックに追加することができます。
6. relativeStartTime
   アニメーションブロックのコレクション内のアニメーションの開始時刻を定義します。
7. relativeDuration
   この特定のアニメーションの全体的な持続時間を定義します。
8. center
   この場合、ボタンのcenterプロパティを変更して、ボタンを画面の周りに移動します。そして、これは最終的なアニメーションがどのように見えるかです：

   

   CoreAnimation

   任意のUIKitベースのアニ したがって、コアアニメーションフレームワークは、任意のUIKitアニメーションのバッキングレイヤーまたはバックボーンとして機能します。 したがって、すべてのUIKit animation Apiは、簡単に消費可能または便利な方法でコアanimation Apiのカプセル化されたレイヤーに過ぎません。

   UIKit animation Apiは、主にビューのアニメーション可能なプロパティに使用されるため、ビュー上で実行されたアニメーションをあまり制御できません。 したがって、このような場合、アニメーションのすべてのフレームを制御する場合は、基礎となるコアアニメーションApiを直接使用する方がよいでしょう。 また、UIViewアニメーションとコアアニメーションの両方を組み合わせて使用することもできます。UIViewとCore Animation Apiを使用してタイミング曲線を指定するとともに、同じボタン変更アニメーションを再作成する方法を見てみましょう。

   アニメーションカーブを指定して制御できるCATransactionのタイミング関数を使用できます。

   CATransactionのタイミング関数とUIViewアニメーションの組み合わせを使用したコーナー半径を持つボタンサイズ変更アニメーションの例を見てみましょう。

   let oldValue = button.frame.width/2let newButtonWidth: CGFloat = 60/* Do Animations */CATransaction.begin() //1CATransaction.setAnimationDuration(2.0) //2CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)) //3// View animations //4UIView.animate(withDuration: 1.0) { self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center}// Layer animationslet cornerAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.cornerRadius)) //5cornerAnimation.fromValue = oldValue //6cornerAnimation.toValue = newButtonWidth/2 //7button.layer.cornerRadius = newButtonWidth/2 //8button.layer.add(cornerAnimation, forKey: #keyPath(CALayer.cornerRadius)) //9CATransaction.commit() //10

   :

   1. begin
      アニメーションコードブロックの開始を表します。
   2. duration
      全体のアニメーション期間。
   3. curve
      アニメーションに適用する必要があるタイミング曲線を表します。
   4. UIView.animate
      私たちの最初のアニメーションは、ボタンのフレームを変更します。
   5. CABasicAnimation
      ボタンのcornerRadiusCABasicAnimationCAKeyframeAnimationクラスを使用できます。
   6. fromValue
      アニメーションの開始値、つまりアニメーションを開始する必要があるボタンの最初のcornerRadius値を表します。
   7. toValue
      アニメーションの最終値、つまりアニメーションを終了する必要がありますボタンの最終値を表します。cornerRadius
   8. cornerRadius
      ボタンのcornerRadiusプロパティをアニメーションの最終値で設定する必要があります。
   9. addAnimation
      アニメーションを実行する必要があるキーパスを表すことによって、アニメーションプロセス全体の構成を含むアニメーションオブ
   10. commit
       アニメーションコードブロックの終わりを表し、アニメーションを開始します。

   これは、最終的なアニメーションがどのように見えるかです：

   

   このブログは、より高度なアニメーショUIKit DynamicsはUIKitの物理エンジンで、衝突、重力、プッシュ、スナップなどの物理動作をUIKitコントロールに追加できます。

   UIKitDynamicAnimator

   これは、任意のUIコントロールによってトリガーされるすべてのアニメーションを規制するUIKit Dynamicsフレームワークのadminクラスです。

   UIKitDynamicBehavior

   任意の物理動作をアニメーターに追加して、それに接続されたビューで実行できるようにします。

   UIKitDynamicsのさまざまな種類の動作には、次のものがあります:li>

9. UICollisionBehavior
10. UIFieldBehavior
11. UIGravityBehavior
12. UIGravityBehavior
13. UICollisionBehavior
14. UICollisionBehavior
15. UIFieldBehavior
16. UIGravityBehavior
17. UIGravityBehavior

ikitdynamicsのアーキテクチャは次のようになります。 項目1から5は、単一のビューに置き換えることができます。

ボタンに物理的な動作を適用しましょう。 実際のオブジェクトを扱う感覚を与えるように、ボタンに重力を適用する方法を見ていきます。p>

var dynamicAnimator : UIDynamicAnimator!var gravityBehavior : UIGravityBehavior!dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1gravityBehavior = UIGravityBehavior(items: ) //2dynamicAnimator.addBehavior(gravityBehavior) //3

ここでの内訳は次のとおりです:

1. UIKitDynamicAnimator
   アニメーションを実行するためのオーケストレータとして機能するUIKitDynamicAnimatorオブジェクトを作成しました。 また、ボタンのスーパービューを参照ビューとして渡しました。
2. UIGravityBehavior
UIGravityBehaviorオブジェクトを作成し、このビヘイビアが注入される配列要素にボタンを渡しました。
3. addBehavior
   アニメーターに重力オブジェクトを追加しました。
   以下のようにアニメーションを作成する必要があります:

   

   UICollisionBehaviorが画像になる場所です。

   var dynamicAnimator : UIDynamicAnimator!var gravityBehavior : UIGravityBehavior!var collisionBehavior : UICollisionBehavior!dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1gravityBehavior = UIGravityBehavior(items: ) //2dynamicAnimator.addBehavior(gravityBehavior) //3collisionBehavior = UICollisionBehavior(items: ) //4collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5dynamicAnimator.addBehavior(collisionBehavior) //6

4. UICollisionBehavior
UICollisionBehavior
   オブジェクトを作成し、ボタンに沿って渡され、ビヘイビアが要素に追加されます。
5. translatesReferenceBoundsIntoBoundary
   このプロパティを有効にすると、アニメーターは参照ビューの境界を最後として、これは私たちの場合は画面の下部です。
6. addBehavior
   ここでは、アニメーターに衝突動作を追加しました。
   今、私たちのボタンは地面に当たって、以下に示すように静止する必要があります：

   

   それはかなり
   ここでは、オブジェクトがよりリアルに感じるようにバウンス効果を追加してみましょう。 これを行うには、UIDynamicItemBehaviorクラスを使用します。

   var dynamicAnimator : UIDynamicAnimator!var gravityBehavior : UIGravityBehavior!var collisionBehavior : UICollisionBehavior!var bouncingBehavior : UIDynamicItemBehavior!dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1gravityBehavior = UIGravityBehavior(items: ) //2dynamicAnimator.addBehavior(gravityBehavior) //3collisionBehavior = UICollisionBehavior(items: ) //4collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5dynamicAnimator.addBehavior(collisionBehavior) //6//Adding the bounce effectbouncingBehavior = UIDynamicItemBehavior(items: ) //7bouncingBehavior.elasticity = 0.75 //8dynamicAnimator.addBehavior(bouncingBehavior) //9

7. UIDynamicItemBehavior
UIDynamicItemBehaviorオブジェクトを作成し、ボタンに沿って渡して、動作が要素に追加されます。
8. elasticity
   値は0-1の間でなければならず、弾力性、すなわちオブジェクトがヒットしたときに地面を跳ね返さなければならない回数を表 このプロパティを微調整することで、ボール、ボトル、ハードオブジェクトなどのさまざまな種類のオブジェクトを区別することができます。
9. addBehavior
   ここでは、アニメーターに衝突動作を追加しました。ここで、ボタンが地面に当たったときに、以下に示すようにバウンスする必要があります。

   

   このレポは非常に役立ち、すべてのUIKitDynamicsの動作を示しています。 また、各動作で遊ぶためのソースコードも提供します。 それは、私の意見では、ビューでiOSアニメーションを実行する方法の広範なリストとして役立つはずです！

   次のセクションでは、アニメーションのパフォーマンスを測定するのに役立つツールを簡単に見ていきます。 また、Xcodeビルドを最適化する方法を検討することをお勧めします。

   パフォーマンスチューニング

   このセクションでは、iOSアニメーションのパフォーマンスを測定し、調整する方法を見ていきます。 IOS開発者としては、アプリ全体のパフォーマンスを測定するために、メモリリークや割り当てなどのXcode計測器をすでに使用している可能性があります。 同様に、アニメーションのパフォーマンスを測定するために使用できる楽器があります。

   Core Animationインストゥルメント

   試してみてくださいCore Animationインストゥルメントと、あなたはあなたのアプリの画面が提供するFPSを見ることができるはずです。 これは、iOSアプリでレンダリングされたアニメーションのパフォーマンス/速度を測定するのに最適な方法です。

   描画

   FPSは大幅に影のような効果を持つ画像のような重いコンテンツを表示するアプリで低下しています。 このような場合、画像をUIImageViewのimageプロパティに直接割り当てる代わりに、Core Graphics Apiを使用してコンテキスト内で画像を個別に描画し これにより、メインスレッドではなく別のスレッドで画像解凍ロジックを非同期に実行することで、画像表示時間が過度に短縮されます。

   ラスタライズ

   ラスタライズは、複雑なレイヤー情報をキャッシュするために使用されるプロセスで、レンダリングされるたびにこれらのビ ビューの再描画はFPSの削減の主な原因であるため、数回再利用されるビューにラスタライズを適用することをお勧めします。

   ラップアップ

   最後に、iOSアニメーションに役立つリソースのリストもまとめました。 IOSアニメーションで作業するときには、これは非常に便利なことがあります。 さらに、この一連のデザインツールは、アニメーションを掘り下げる前の（デザイン）ステップとして役立つこともあります。