2022-06-24 分類: 網(wǎng)站建設(shè)
動(dòng)效是元素的位移、姿態(tài)、大小和可見度等隨時(shí)間的變化。這里我們以位移為例來學(xué)習(xí)下動(dòng)效。為什么需要?jiǎng)有兀勘热邕@里,我希望讓方塊到右邊的位置上,如果沒有動(dòng)效,我可以把它“傳送”過去,就像這樣:
顯然,這樣的技術(shù)在現(xiàn)實(shí)生活中是不存在的(也許有一天能實(shí)現(xiàn)),所以看起來會(huì)很不自然。這就需要有一個(gè)運(yùn)動(dòng)的過程,動(dòng)效設(shè)計(jì)就是在設(shè)計(jì)這個(gè)過程:
這樣就好多了。但這樣的動(dòng)效該如何表達(dá)呢?做過開發(fā)的同學(xué)都知道,可以用公式,絕大部分的動(dòng)效用牛頓運(yùn)動(dòng)方程都是可以表達(dá)的。當(dāng)然運(yùn)動(dòng)方程也可以做成圖表,這里我們就用圖表的方式來表達(dá)運(yùn)動(dòng),這就是運(yùn)動(dòng)曲線。最常用的曲線是“位移 – 時(shí)間”曲線:橫軸表示時(shí)間,縱軸表示在一個(gè)方向上的位移。(出于簡化考慮,這里我們只考慮在一個(gè)維度上的運(yùn)動(dòng),在三維空間中的運(yùn)動(dòng)可以分解成單個(gè)維度)。 我們先看最簡單的運(yùn)動(dòng),勻速直線運(yùn)動(dòng):
它的運(yùn)動(dòng)曲線其實(shí)就是條直線,線的斜率(目標(biāo)位置 / 運(yùn)動(dòng)時(shí)間)就是它的運(yùn)動(dòng)速度:
在現(xiàn)實(shí)生活中,如果物體在傳送帶上,我們就可以看成是勻速直線運(yùn)動(dòng):
不過這樣的例子并不多,物體很少會(huì)自己突然獲得速度,運(yùn)動(dòng)一段距離后又突然停止。在靜止和運(yùn)動(dòng)兩種狀態(tài)之間,物體的速度往往會(huì)發(fā)生變化。這就是緩動(dòng)(Easing)。
在緩動(dòng)過程中,物體的運(yùn)動(dòng)速度會(huì)由于外力而發(fā)生變化。常見的緩動(dòng)有三種:減速運(yùn)動(dòng)、加速運(yùn)動(dòng)、先加速后減速。我們先看減速運(yùn)動(dòng):
減速運(yùn)動(dòng)的曲線是:
我們發(fā)現(xiàn),物體有一個(gè)初始速度,隨著時(shí)間的推移,它的速度,也就是曲線的斜率在由大變小到0。什么樣的物體會(huì)這樣運(yùn)動(dòng)呢?比如這樣:
加速運(yùn)動(dòng)和減速運(yùn)動(dòng)的速度變化相反:
曲線也是對稱的:
加速運(yùn)動(dòng)可以看作這樣:
在界面設(shè)計(jì)中,減速和加速動(dòng)效往往是成對使用的。通常元素飛入時(shí)用減速運(yùn)動(dòng),飛出時(shí)用加速運(yùn)動(dòng)。例如iPhone App Store中的分類列表:
可能大部分物體是這樣運(yùn)動(dòng)的:
從曲線中,我們看到,物體的速度(曲線的斜率)由0開始增加,在中點(diǎn)達(dá)到大值,然后又減小到0:
我們可以看成這個(gè)物體在依靠自己的動(dòng)力運(yùn)動(dòng):
很多起點(diǎn)和終點(diǎn)都在界面內(nèi)的運(yùn)動(dòng)都使用這種緩動(dòng)形式,比如iOS天氣App的城市切換動(dòng)畫:
將上面三種最基本的緩動(dòng)形式組合,可以表現(xiàn)出更多的運(yùn)動(dòng)形式,例如:
這就像用一個(gè)彈弓把物體彈射出去:
它運(yùn)動(dòng)曲線分為兩段,物體先向反方向運(yùn)動(dòng),再在正向以很高的速度開始減速運(yùn)動(dòng):
采用不同的緩動(dòng)形式不僅能幫助用戶建立方向感,還能表現(xiàn)出物體的材質(zhì)和“性格”,比如iOS的鎖屏界面落下時(shí):
這體現(xiàn)出鎖屏界面本身是一種彈性材質(zhì),而下方的相機(jī)是堅(jiān)硬的材質(zhì)。它會(huì)讓用戶感覺到鎖屏很“輕盈”、易使用。如果我們希望下落的物體感覺起來很重,就可以這樣:
或者是個(gè)很高科技的方塊:
或者是個(gè)UFO?
如果是個(gè)給小朋友用的app,也可以很有趣:
感興趣的同學(xué)可以畫下上面這些動(dòng)效的運(yùn)動(dòng)曲線創(chuàng)新互聯(lián),手機(jī)建站,企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站。
新聞標(biāo)題:動(dòng)效設(shè)計(jì)基礎(chǔ),運(yùn)動(dòng)曲線與緩動(dòng)
當(dāng)前路徑:http://m.rwnh.cn/news35/171085.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、域名注冊、網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、網(wǎng)站收錄、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容