一個簡單的旋轉加載動畫設計的思路

首先,肯定怎麼讓用戶看起來爽。說白了就是幀率的問題,由於通常的旋轉加載都是按照順時針360旋轉。因此作角度切分是最方便肯定幀率的方法。 動畫

肯定幀率須要考慮的因素: spa


  1. TotalAngle,旋轉的總共角度:360。
  2. MoveStep旋轉距離(最外側的圓,每幀移動的距離,就是說的動畫中每幀之間那點微小的變化。肯定這個須要考慮的因素有,須要旋轉的圖形自己的大小,使用最大圓半徑MaxR。用戶眼部到屏幕的通常距離是多少。)
  3. 旋轉方向,根據人們通常性的習慣,看鐘表的習慣,基本上會採用逆時針方向。
  4. TotalTime,作完一次完整動畫的時間。
  5. FT,人眼視覺殘留要求最低幀數16/s。通常狀況下這個值會取24/s.


則肯定公式爲  TotalTime = TotalAngle/( 2*M_PI / MoveStep)*FT 圖片


其次就是具體實現的問題了。 方法

實現這種旋轉動畫,有兩種方式。 im

一、圖片替換。按照肯定的幀數,隔固定的時間替換圖片。 移動

二、單一圖片,沿z軸順時針旋轉。 時間

相關文章
相關標籤/搜索