轉載請标明出處:http://blog.csdn.net/zhaoyanjun6/article/details/118963313
本文出自【趙彥軍的部落格】
文章目錄
- KeyFrame
- 實戰
KeyFrame
KeyFrame
主要用于自定義控制動畫速率,
KeyFrame
直譯過來就是關鍵幀。
而關鍵幀這個概念是從動畫裡學來的,一個關鍵幀必須包含兩個原素,第一時間點,第二位置。是以這個關鍵幀是表示的是某個物體在哪個時間點應該在哪個位置上。
比如我們要讓一個球在 30 秒時間内,從(0,0)點運動到(300,200)點,那 flash 是怎麼來做的呢,在 flash 中,我們隻需要定義兩個關鍵幀,在動畫開始時定義一個,把球的位置放在(0,0)點;在 30 秒後,再定義一個關鍵幀,把球的位置放在(300,200)點。在動畫 開始時,球初始在是(0,0)點,30 秒時間内就 adobe flash 就會自動填充,把球平滑移動到第二個關鍵幀的位置(300,200)點;
KeyFrame 使用流程如下:
Keyframe frame0 = Keyframe.ofFloat(0f, 0);
Keyframe frame1 = Keyframe.ofFloat(0.1f, -20f);
Keyframe frame2 = Keyframe.ofFloat(1, 0);
PropertyValuesHolder frameHolder = PropertyValuesHolder.ofKeyframe("rotation",frame0,frame1,frame2);
Animator animator = ObjectAnimator.ofPropertyValuesHolder(mImage,frameHolder);
animator.setDuration(1000);
animator.start();
Keyframe 使用其實很簡單,隻需要三步:
第一步,生成
Keyframe
對象;
第二步,利用
PropertyValuesHolder.ofKeyframe()
生成
PropertyValuesHolder
對象
第三步,
ObjectAnimator.ofPropertyValuesHolder()
生成對應的
Animator
注意:在設定ObjectAnimator.ofPropertyValuesHolder()時
- 如果去掉第 0 幀【Keyframe.ofFloat(0f, 0); 】,将以傳入的第一個關鍵幀為起始位置
- 如果去掉結束幀【Keyframe.ofFloat(1f,0);】,将以傳入最後一個關鍵幀為結束位置
- 使用 Keyframe 來建構動畫,至少要有兩個或兩個以上幀。
實戰
val key1 = Keyframe.ofFloat(0f, 0f)
val key2 = Keyframe.ofFloat(0.2f, 600f)
val key3 = Keyframe.ofFloat(0.5f, 50f)
val key4 = Keyframe.ofFloat(1f, 300f)
val holder = PropertyValuesHolder.ofKeyframe("translationX", key1, key2, key3, key4)
var rotation = ObjectAnimator.ofPropertyValuesHolder(myView, holder)
rotation.duration = 3000
rotation.start()
- key1: (0,0) 第一個關鍵幀,也就是動畫開始的位置
- key2:(0.2,600f) 第二個關鍵幀,也就是在時間的進行到 20% 的時候,要在 600 的位置
- key3:(0.5,50) 第三個關鍵幀,在時間進行到一半的時候,在 50 的位置
- key4:(1,300) 第四個關鍵幀,也是最後一個關鍵幀,就是動畫結束的時候,在 300 的位置
效果如下: