2017-12-14 7 views
4

私は愚かであるか、またはiOS(またはその両方)でキーフレームアニメーションがどのように機能するか誤解しています。以下の2つのアニメーションブロックは、異なる結果を生成するが、私は彼らが同じになるように期待:animateKeyframesを理解する相対開始時間/遅延

let duration: TimeInterval = 2 

UIView.animateKeyframes(withDuration: duration, delay: 0, animations: { 
    UIView.addKeyframe(withRelativeStartTime: 0.9, relativeDuration: 0.1, animations: { 
     self.someView.transform = CGAffineTransform(translationX: 0, y: 150) 
    }) 
}) 

UIView.animateKeyframes(withDuration: duration * 0.1, delay: duration * 0.9, animations: { 
    UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1, animations: { 
     self.someView.transform = CGAffineTransform(translationX: 0, y: 150) 
    }) 
}) 

誰もが実行されたときにこれらが異なる理由を私は理解するのに役立つことはできますか?最初のものは私が期待しているように見えますが、2番目のものは予想より早くアニメーションを実行するようです。

答えて

4

キーフレームアニメーションにデフォルトタイミングカーブの効果が見られます。最初のアニメーションは2秒のアニメーションの最後の0.2秒であり、2番目のアニメーションは0.2秒のアニメーションの全体です。デフォルトのイージーインイージーアウトは、最初のアニメーションが完全にカーブの緩和部分で行われることを意味します。

あなたが別のアニメーション内でそれらをラップし、オプションのカップルを設定することができ、両方のアニメーションの線形曲線を強制するには:私はあなたが同意すると思う

UIView.animate(withDuration: duration, delay: 0, options: [.curveLinear], animations: { 
    UIView.animateKeyframes(withDuration: duration, delay: 0, options: [.overrideInheritedDuration, .calculationModeLinear], animations: { 
     UIView.addKeyframe(withRelativeStartTime: 0.9, relativeDuration: 0.1, animations: { 
      view1.transform = CGAffineTransform(translationX: 0, y: 150) 
     }) 
    }) 

    UIView.animateKeyframes(withDuration: duration * 0.1, delay: duration * 0.9, options: [.overrideInheritedDuration, .calculationModeLinear], animations: { 
     UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1, animations: { 
      view2.transform = CGAffineTransform(translationX: 0, y: 150) 
     }) 
    }) 
}, completion: nil) 

は恐ろしい見えるコードですが、私はよこれが知的運動であると仮定して)

+1

素晴らしい答えと説明、ありがとう! –

関連する問題