iOS 10：アニメーション作成の新機能

少し前のWWDC 2016で、iOS 10でインタラクティブアニメーションを操作するための更新されたインターフェイスが発表されました。開発者は、それらを作成、管理、および変更するための柔軟なツールを手に入れました。 この記事では、発生した変更と新しいAPIについて説明します。



新しいAPIの中心的なクラスはUIViewPropertyAnimatorで、UIViewAnimatingとUIViewImplicitlyAnimatingの2つのプロトコルに基づいて機能を提供します。これについては以下で説明します。

UIViewPropertyAnimator

このクラスを使用すると、次のことができます。

• インタラクティブなアニメーションを作成します（停止、一時停止、中断、ユーザーのタッチで処理できます）。
• 既に実行中のものを変更します。
• 現在のアニメーションをいつでも巻き戻します。
• 逆順でプレイします。
• タイミング機能を構成します。

使用例：

//   let parameters = UICubicTimingParameters(animationCurve: .easeIn) //        let animator = UIViewPropertyAnimator(duration: 5.0, timingParameters: parameters) //   (    UIView.animate(withDuration:, animations:)) animator.addAnimations { view.center = CGPoint(x: 150, y: 200) view.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI_2)) view.backgroundColor = UIColor.red() } // Completion block animator.addCompletion { _ in view.backgroundColor = UIColor.orange() } //    animator.startAnimation()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのような実装は古いAPIと比較してより冗長であるように見えるかもしれませんが、今では、固体オブジェクトを持つことの残りの利点を再利用/変更/保存して楽しむことができるアニメーターがあります。



Appleは新しいプロトコルも提供しています。

UIViewAnimating

このプロトコルは、アニメータで実行できる主なアクション（開始、一時停止、停止、巻き戻し、アニメーションの現在の状態と位置の取得）を担当します。 詳細については、 ドキュメントを参照してください 。 いくつかのメソッドとプロパティについて詳しく見ていきましょう。

アニメーションの巻き戻し（スクラブ）

 var fractionComplete: CGFloat { get set } animator.fractionComplete = fraction
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このプロパティを使用すると、アニメーションを徐々に前後に移動して、選択した時点の状態を取得できます。 この機能のおかげで、ユーザーは生き生きとしたインタラクティブなものとしてインターフェイスを操作できます。

アニメーション完成

 func finishAnimation(at: UIViewAnimatingPosition)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

の入力パラメーターは、アニメーションが完了する位置を示します。

列挙UIViewAnimatingPosition値のオプション：

• 開始;
• 終わり;
• 現在（現在の位置は、アニメーションループの任意のポイントです）。

位置パラメータは、非標準の状態でアニメーションを終了する必要がある場合に非常に役立ちます。 たとえば、ループの途中または最後のフレーム。

（一時）アニメーションを停止

 func stopAnimation(_ withoutFinishing: Bool)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

withoutFinishingパラメーターを使用すると、アニメーションを完全に停止するか（finishAnimationを使用する場合）、停止状態に切り替えて、現在の位置からアニメーションを継続できます。

アニメーションの状態

• 非アクティブ
  
  初期状態-新しく作成された各アニメーターオブジェクトはそれから始まります。 アニメーション（finishAnimation）が完了すると、同じ状態に戻ります。
• アクティブ
  
  アニメーターは、startAnimation（）またはpauseAnimation（）の呼び出し後にこの状態に移行します。
• 止まった
  
  withoutFinishing == falseの場合、stopAnimationを呼び出した後のアニメーターの状態。

状態変化の視覚画像：







UIViewAnimatingのさらに興味深いプロパティ：

 //         var isInterruptible: Bool
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 //    (  false) var isManualHitTestingEnabled: Bool
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デフォルト値では、アニメーション化されたオブジェクトはすべてのユーザータッチを受け取ります。 isManualHitTestingEnabled = trueを設定すると、すべてのタチはオブジェクトを現在の状態（プレゼンテーションレイヤー）ではなく、モデルレイヤー（モデルレイヤー）、つまりアニメーションが既に終了したかのように最終状態で受け取ります。

UIViewImplicitlyAnimating

このプロトコルは、前のプロトコル（UIViewAnimating）を継承し、機能の重要な部分を提供します。ブロックを介してアニメーションを追加し、完了ブロックを作成します。



新しい機能の1つは、一時停止または停止後のアニメーションの継続と、タイミング機能の変更です。

  let newParameters = UICubicTimingParameters(animationCurve: .easeOut) animator.continueAnimation(withTimingParameters: newParameters, durationFactor: 2.0)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、ユーザーとの対話（アニメーションの停止または一時停止）後にアニメーションのペースを変更する必要がある場合に便利です。

UITimingCurveProvider

UIViewPropertyAnimatorオブジェクトを作成して、UISpringTimingParametersまたはUICubicTimingParametersを介してタイミング関数を設定するときに使用されます。

UICubicTimingParameters

現在、UIKItが提供するのは、4つの古き良き速度関数（easeInOut、easeIn、easeOut、linear）のみです。

しかし、新しいAPIには、デザイナーの想像力の範囲がありました。2つの制御ポイントで独自のタイミング関数を作成する機能です。

 let controlPoint1 = CGPoint(x: 0.2, y: 0.1) let controlPoint2 = CGPoint(x: 0.8, y: 0.8) let parameters = UICubicTimingParameters(controlPoint1: controlPoint1, controlPoint2: controlPoint2) animator = UIViewPropertyAnimator(duration: 0.5, timingParameters: parameters)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

UISpringTimingParameters

ここで興味深い点は、速度がスカラーではなくベクトルになったことです。 以前は、計算が2つの軸に沿って進む新しいAPIとは異なり、速度は線に沿って方向付けられていたため、アニメーションはより自然に見えます。



そして、Appleは使用するためのばね方程式を開きました。つまり、UISpringTimingParametersの任意の係数と設定を設定できるようになりましたが、この場合、期間は無視され、パラメータに従って計算されることに注意してください：

 // Spring equation init(mass: CGFloat, stiffness: CGFloat, damping: CGFloat, initialVelocity velocity: CGVector)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

講義といくつかのコード例を見ると、一般的な印象としては、タイミング関数を試したりアニメーションを変更したりするための多様性と可能性が追加され、APIがより冗長になりましたが柔軟になりました。 開発者が、アプリケーションにインタラクティブな機能を追加することがさらに簡単で楽しくなることを願っています。

UIKitのアニメーションと遷移の進歩の講義で例の詳細を学ぶことができます。