構(gòu)建Jakub Antalik的音樂(lè)播放器
Jakub是斯洛伐克的一名出色的設(shè)計(jì)師诊沪，已經(jīng)設(shè)計(jì)了一些經(jīng)常發(fā)布到Dtibbble去的非常有創(chuàng)造力的界面忧吟。其中一個(gè)作品非常打動(dòng)我砌函，那是一個(gè)很有趣的例子，證明了界面上每次操作一個(gè)元素的斷斷續(xù)續(xù)的動(dòng)畫是如何抓住用戶的眼球的溜族。在本指南的早期我展示了一個(gè)他設(shè)計(jì)的音樂(lè)播放器讹俊，含有一些很酷的內(nèi)置動(dòng)畫，這里我們?cè)倏匆幌隆?/p>
所以這里他明顯使用到的技術(shù)是什么煌抒？他操縱了動(dòng)畫的開(kāi)始時(shí)間仍劈。通過(guò)讓每個(gè)元素比另一個(gè)元素慢一點(diǎn)動(dòng)畫到屏幕上的位置，并按照行的順序操作屏幕上的每一個(gè)元素寡壮，就形成了一個(gè)非常整齊的波浪效果贩疙，感覺(jué)就像每個(gè)元素都被前一個(gè)元素用橡皮筋帶動(dòng)的一樣讹弯。
讓我們重建他音樂(lè)播放器概念的第二個(gè)屏幕：歌曲列表。
首先这溅，我們需要重建設(shè)計(jì)來(lái)切片元素并且盡可能整齊地分開(kāi)動(dòng)畫它們组民。我拉出我選擇的設(shè)計(jì)工具：Photoshop，然后開(kāi)始工作悲靴。musicplayer.psd文件是放置該設(shè)計(jì)文件的地方臭胜，如果你喜歡的話可以打開(kāi)來(lái)檢出它。我不會(huì)詳細(xì)說(shuō)明如何用Photoshop創(chuàng)建這個(gè)設(shè)計(jì)癞尚，但文件和設(shè)計(jì)都足夠簡(jiǎn)單和直接耸三。
這里是我重建的第二個(gè)屏幕的歌曲列表。
