• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] 詳細解析網頁UI界面設計中的動畫原理—- 其他教程




    教學主題: 詳細解析網頁UI界面設計中的動畫原理

    大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

    今天的這個教學主題是: 詳細解析網頁UI界面設計中的動畫原理

    這教學的重點為這幾點 [ 動畫,原理,解析,網頁,詳細,我們,時間,一個,效果,應用, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    這篇文章是關於變速過渡效果的,看似簡單,但真正想讓動畫自然流暢,還需要深入了解動畫的基本原理。今天我們將會逐步學習:基本概念、探討加速減速,拆解緩衝曲線,最終學會運用到界面設計中。

    這篇文章是關於變速過渡效果的,看似簡單,但真正想讓動畫自然流暢,還需要深入了解動畫的基本原理。今天我們將會逐步學習:基本概念、探討加速減速,拆解緩衝曲線,最終學會運用到界面設計中。

    你認為這兩個球在做什麼?

    詳細解析網頁UI界面設計中的動畫原理

    綠球彈跳很明顯,但是紅球在怎樣運動?當然,它像綠球一樣上下運動,落下和彈起所用的時間和綠球一樣。然而,紅球感覺很機械,而綠球讓人感覺它確實在彈跳。為什麼我們會有這種感受上的差異呢?

    答案是變速過渡效果(Easing)。

    1、時間和空間位移(Timing and Spacing)

    首先,我們需要理解兩個重要的概念——時間和空間,二者是緊密相關、密不可分的。為了使動畫更有可讀性,他們至關重要。

    註:“可讀性”是說動畫繪製者如何定義動畫的精準度,用來清晰而容易地理解正在發生的事情。例如:不可讀=不清楚發生的事情很易讀=它非常清楚,立刻能懂

    時間

    在案例中,兩個球在同一頂端同時落下,0.5秒到達地面, 1秒回到原位。這是球的時間 - 完成一個動作所用的時間耗時。兩個球耗時相同,但是,等等……兩個球都是1秒的動畫,為什麼感覺如此不同呢?

    空間位移

    這是使兩個動畫完全不同的關鍵區別。讓我們把第一個0.5秒的動畫分解為較小的時間單位,這樣我們可以更清楚地觀察發生了什麼。如果我們把每0.1秒球的位置進行標記,我們可以得到這張圖:

    詳細解析網頁UI界面設計中的動畫原理

    看到兩個時間單元之間的距離了嘛?這就是空間位移。很容易的東西,對嗎?時間是耗時,空間是位移!

    讓我們來看紅球的間距 ,非常均勻。每經過0.1秒,它就移動完全相同的距離。在運動中完全沒有任何變化。然而,綠球每0.1秒都有不同的間隔。在第一個0.1s,它只移動非常小的間距,當它掉下來,間距變得越來越大,直到它終於打到地面。事實上,它耗費了0.4秒來完成前半程,僅用了0.1秒完成後半程!

    所以,問題來了,為什麼要用這樣的方式加長每秒的間距呢?

    觀察顯示世界

    觀察彈跳一個球時會發生什麼。自己嘗試一下或者觀察一些YouTube上的相關視頻。我發現兩個問題:慢放的彈跳球和網球彈跳球。

    彈跳背後的物理理論:

    球剛開始被放開的時候,它有一個相對緩慢的速度。在重力的作用下,球的速度持續增長,直到接觸地面的那一刻速度達到最大。地面給球反作用力,使它以幾乎相同的速度反彈回去。當球移動時,兩種力量作用正在球上 - 反彈的力、想把它拉下來的重力。反彈的力量正在慢慢釋放,這使得球隨着升高逐漸減低速度,直到它耗費掉所有的反作用力,最終到達反彈的最高點。它在頂部停留一微秒,直到重力把它拉下來,使它像之前一樣加速下降。我用言語來描述這句話是有原因的。我們試着將一種自然行為分解為具體的步驟,這樣我們就可以重新創造它。

    有些關鍵的注意事項:

    1、當球在頂部,它是緩慢的。隨着下降,它的速度隨之增加。

    2、在彈回來的時候,開始時球的速度很快。到達頂點時,速度就慢下來了。

    3、在同一時間內,當球速很快時,位移會很長,當球速變慢時,位移就少得多。

    最後那句話聽起來多餘,但這正是我們感興趣的:一個速度快的物體在一個單位時間內移動了很長的距離,而慢的物體在相同時間內覆蓋較短的距離。

    應用我們觀察到的結論

    讓我們把這個概念應用到動畫中。再看一下位移圖。在頂部間距小,每0.1s逐漸增加間距,最後,在底部達到最大間距。這正是我們在之前的研究中所看到的。我們簡單地把這一原則“複製”到綠球,返回的時候進行逆嚮應用,瞧 ,這是個 彈跳的球!

    註:不要羞於“照搬”大自然。你的觀眾會更快地與動畫關聯起來,從而更容易讀懂動畫。

    讓我們再看一次紅球,為什麼一點兒不覺得紅球在彈跳?在理解了一個彈跳球的物理原理后,這個問題就變得很清楚。每0.1秒內紅球移動了相同的距離,但是從研究中我們知道:一個跳躍的球不會像那樣移動。因為,它沒有像彈跳球一樣運動,看上去也感覺不像彈跳球。

    那麼,能有什麼會像紅球以同樣如此精準的時間、精確的間距進行運動呢?當然,機械機器人!紅球在“複製”機械機器人的間距。換句話說,因為它像機器人一樣運動,它就讓人感覺很機械。道理真的很簡單!

    小結

    聽眾會不自覺地把動畫和他們已知的東西關聯起來。如果動畫讓人聯想到周圍的世界,它會看上去很自然。如果它讓人聯想到機器人,它會感覺很機械。如果它讓人聯想不到任何東西,就意味着動畫看上去“很奇怪”。

    2、漸快與漸慢(Ease-in and Ease-out)

    現在你知道我們為什麼為跳躍的球設置不均勻的間距了。這種不均勻間距的技術術語叫做變速過渡效果。根據你將它用於動畫開始還是結束,它被稱為漸快或漸慢。

    漸快

    當球以慢速開始並積累速度時,這一過程被稱為漸快。

    詳細解析網頁UI界面設計中的動畫原理

    漸慢

    當球以快速開始並降低速度時,這一過程被稱為漸慢。

    詳細解析網頁UI界面設計中的動畫原理

    為了理解緩衝這一詞的定義,我們已經查找了大量理論!

    注意:這一術語有可能與其它術語混淆。如果你正在閱讀傳統的卡通書,例如迪斯尼的《生命的幻象》或《動畫師的生存工具》,那麼這些書會告訴你,當一個物體開始減速然後加速時,這一過程被稱為漸慢(ease-out),因為它的姿態在“緩慢輸出”。但是,在軟件產業(CSS動畫,Adobe Edge等),這一過程被稱為漸快(ease in)!我不確定這一不同之處是怎麼來的,但是不幸的是,這就是它的形成過程。所以,當你在閱讀一篇文章時,而這篇文章把它們把“漸快”稱為“漸慢”,那麼不要覺得困惑。看一眼你所在的網站你就懂了:D。

    閱讀變速過渡的曲線圖

    你會注意到,當你打開軟件包的時候,漸進的功能不會為你展示像上圖那樣線性的層次。相反,你會得到這樣的曲線:

    詳細解析網頁UI界面設計中的動畫原理

    那麼,這一曲線與我們到目前為止談論的一切事情有什麼關係呢?讓我們將曲線畫在圖表上,然後看看我們最終畫出了什麼。這只是基礎數學而已——我們(應該)在學校里已經學過了。

    這是我們的圖表——我們將要沿着x軸繪製時間,y軸繪製球的位置。為了方便起見,我們選擇了4個單位x軸,表示0.1秒,選擇1個單位y軸表示球在垂直運動中的10個像素。(圖6)

    我測量了紅球的運動,並記錄了每經過0.1秒時y的位置。這裡是記錄的值:

    時間 Y軸的位置(秒) : (像素)—————-0.0 : 00.1 : 34

    0.2 : 68

    0.3 : 102

    0.4 : 136

    0.5 : 170

    我們注意到,每經過0.1秒,紅球正好移動了34個像素。如果我們把這一過程繪製在圖表上,並連點成線,我們就會得到一條直線。我們突然發現,這就是你在大多數軟件中看到的線性漸變圖形。

    詳細解析網頁UI界面設計中的動畫原理

    現在,讓我們對綠球做相同處理。

    時間 Y軸的位置(秒) : (像素)—————-0.0 : 00.1 : 2

    0.2 : 10

    0.3 : 36

    0.4 : 87

    0.5 : 170

    我得到的值是:每0.1秒,球在垂直位置的變化量都會不同。開始時,它的變化很小(只有2個像素),然後緩慢增加。在最後0.1秒,它增加了高達83個像素。在圖表上繪製這些點,我們得到了這條曲線。

    詳細解析網頁UI界面設計中的動畫原理

    現在這幅圖看起來熟悉嗎?這就是那些圖標的由來。它們表示變化率,或者我們現在已經了解的間隔。

    注意:你會在軟件中看到更多用於設置緩衝的選項,例如二次的、三次的、四次的等等。它們只是緩和程度更高的選擇,但是概念是相同的。只需記住——緩和的程度越高,你就會得到更多的緩和度。

    3、變速過渡效果應用在UI設計中

    最後,讓我們看看這些怎麼用在UI設計中。

    並不是規則,只是工具(There are no rules. Only tools)- Glenn Vilppu

    我並不十分建議在你的app設計中應用漸慢、漸快的很多規則。但我可以提供一些它是如何被應用在當下時髦App里的常見的例子。

    在移動App中,你能看到的最常見的運用是菜單滑動。如果App沒有運用這些變速過渡的效果,就會像是一下的例子:

    詳細解析網頁UI界面設計中的動畫原理

    有些乏味,難道不是嗎?讓我們應用一些變速過渡的效果,看一看會發生什麼?

    詳細解析網頁UI界面設計中的動畫原理

    恩~好多了!屏幕向外滑動時我們應用了漸快效果,當向內滑動時我們應用了漸慢的效果。

    但是,為什麼不能在屏幕向外滑動時應用漸慢的效果呢?

    從技術上說你是可以的,但這樣你會發現:當用戶點擊一個按鈕時,固定的屏幕就會移動。

    當畫面回滾的時候,屏幕就像一輛從制動到停止前進的汽車。它開始時很快,然後減速到停止——這是一個漸慢過程。所以,如果你在解決一個特殊元素活動方面存在問題,可以嘗試將其與物理行為關聯。這樣,對於如何使用戶界面元素活動的問題就會迎刃而解。

    現在你知道了這些動態效果為什麼會感覺很自然,你可以在App中去達到同樣的感覺效果。很高興看到你把這些觀念應用到你的設計中。

    這篇文章比我最初打算的要長一些,希望它能幫助你更好的理解變速過渡效果。

    看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 詳細解析網頁UI界面設計中的動畫原理 這教學會喜歡

    文章標題: 骨子愛創意- 詳細解析網頁UI界面設計中的動畫原理–轉載請註明來源處

    本教學分類為平面理論教程中的 其他教程相關教學

    文章相關關鍵字為: 動畫,原理,解析,網頁,詳細,我們,時間,一個,效果,應用,

    本文永久連結 :詳細解析網頁UI界面設計中的動畫原理

    本文轉載自 :VIA