老司機干貨!4個技巧讓你玩轉(zhuǎn)輕量級動效

MG 全稱是 Motion Graphic(動態(tài)圖形),是一種現(xiàn)在非常流行的動畫分支。它更像是介于平面設(shè)計與動畫片之間的一種產(chǎn)物。動態(tài)圖形在視覺表現(xiàn)上使用的是基于平面設(shè)計的規(guī)則,而在技術(shù)上使用的是動畫制作手段。簡單來說,這類動畫往往都以簡約的幾何圖形來描述物理特性,但表現(xiàn)力極強。輕簡的特性也成為 UI設(shè)計中的一個點睛環(huán)節(jié)。

那如何制作一個有趣又有生命力且符合邏輯的動效呢?在我看來需要著重了解以下這4個物理特性,就能解決所有基本問題。

四大心法:阻力、慣性、透視、焦距。

一、阻力

大家在做動畫的時候很容易考慮到慣性,慣性往往是物體自身的特性。阻力則是外界事物對物體產(chǎn)生的影響。但當(dāng)我們看不見這個外界事物的時候,就會忽略這點。

小車運動中,它上面的旗幟看上去是不是很奇怪?這就是忽略了阻力對對象帶來的影響。

老司機干貨!4個技巧讓你玩轉(zhuǎn)輕量級動效

材質(zhì)相對較輕的旗幟會比車子更容易受到空氣阻力的影響,這樣看上去才比較符合現(xiàn)實。

老司機干貨!4個技巧讓你玩轉(zhuǎn)輕量級動效

二、慣性

慣性是動畫中最常見的動態(tài)規(guī)律。也是最容易出效果的參數(shù)。我們調(diào)整物體的緩入緩出的幅度來表現(xiàn)不同質(zhì)量的物體運動。

動畫上方的小球是勻速接近磁鐵,下方的小球是勻加速接近磁鐵。哪個看上去更符合現(xiàn)實呢?你答對了!下方的小球表現(xiàn)出物體本身的慣性。當(dāng)有外力突然吸引時,物體由于本身質(zhì)量的影響,逐漸失去靜止的狀態(tài),而不是瞬間。

老司機干貨!4個技巧讓你玩轉(zhuǎn)輕量級動效

動畫下方表達的是柔軟的小球,在當(dāng)外力影響時,整個球體慣性分布不均勻,球體左側(cè)和右側(cè)產(chǎn)生了慣性先后速度差,產(chǎn)生了形變。當(dāng)最終觸碰磁鐵后,慣性差導(dǎo)致球體左側(cè)結(jié)束比右側(cè)晚,產(chǎn)生了回彈。

老司機干貨!4個技巧讓你玩轉(zhuǎn)輕量級動效

三、透視

在二維動畫中,透視是一個相對較難表現(xiàn)形式。我們往往需要利用參照物來體現(xiàn)二維物體之間的空間關(guān)系。

我們在坐高鐵的時候觀察窗外,風(fēng)景是這樣移動的嗎?樹林、遠山和更遠的云層。三者由于透視的關(guān)系,是不會以相同的速度移動的。

老司機干貨!4個技巧讓你玩轉(zhuǎn)輕量級動效

「近中遠」分別對應(yīng)「快中慢」,利用不同速度來表現(xiàn)前后關(guān)系。我們利用參照物的差速動畫,就能做出具有很好空間感的效果。

老司機干貨!4個技巧讓你玩轉(zhuǎn)輕量級動效

四、焦距

同樣和透視一樣,二維的世界很難表現(xiàn)焦距這個概念。但我們可以利用色彩和虛實的手段來模擬。

左邊的小人在前?或著右邊的小人在前?或者他們只是并排站立?由于二維的限制性,人們只能通過自己的想象來彌補三維空間的缺失。不同人會得出不同的結(jié)論。在這里我們可以通過顏色來做到簡易的前后關(guān)系。顏色暗淡或明亮的可能由于光源關(guān)系,顯得離我們比較遠或比較近。(結(jié)合實際場景)

老司機干貨!4個技巧讓你玩轉(zhuǎn)輕量級動效

利用模糊,我們能表現(xiàn)出更好的空間效果和鏡頭感。這是利用繪畫設(shè)計和平面設(shè)計中的虛實關(guān)系。

老司機干貨!4個技巧讓你玩轉(zhuǎn)輕量級動效

接下來放幾個小編在實際設(shè)計中應(yīng)用的案例,大家感受一下(來自開課啦APP):

老司機干貨!4個技巧讓你玩轉(zhuǎn)輕量級動效

△ 品牌形象蜜蜂上升動畫

老司機干貨!4個技巧讓你玩轉(zhuǎn)輕量級動效

△ 下拉刷新的品牌動畫

老司機干貨!4個技巧讓你玩轉(zhuǎn)輕量級動效

△ 開課啦心理魔法院

最后

掌握和清楚這四點心法,能夠讓你在設(shè)計動態(tài)影像時如魚得水。但其實想做出一個優(yōu)秀的動效并不只有這些。需要你有一顆善于觀察的心,善于發(fā)現(xiàn)你身邊的那些自然規(guī)律。

歡迎關(guān)注作者的微信公眾號:「開課啦UED」

老司機干貨!4個技巧讓你玩轉(zhuǎn)輕量級動效

動效設(shè)計精選」

收藏 30
點贊 1

復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。