鍍金池/ 問答/HTML5  HTML/ 移動(dòng)端提示用戶點(diǎn)擊的閃爍動(dòng)畫

移動(dòng)端提示用戶點(diǎn)擊的閃爍動(dòng)畫

在移動(dòng)端中,要制作一個(gè)提示用戶點(diǎn)擊的動(dòng)畫,想要實(shí)現(xiàn)的效果是一個(gè)圓不斷的放大縮小,以引起用戶的注意,起到提示用戶點(diǎn)擊的作用。類似于下圖中紅框內(nèi)的圓,不斷的放大縮小,但是我用scale結(jié)合animation寫的動(dòng)畫總感覺不好看,有沒有做過類似這樣效果,還請(qǐng)貼個(gè)鏈接或說下思路。
clipboard.png

回答
編輯回答
帥到炸

沒給代碼,簡(jiǎn)單說下我的思路??唇貓D是兩個(gè)圓,我個(gè)人更傾向用三個(gè)圓吧。一般動(dòng)畫幀就是放大+淡出,可以在dom上寫個(gè)初值,然后@keyframe里直接寫to就好(加from可能會(huì)有跳動(dòng)感)。主要的效果點(diǎn),一個(gè)是延時(shí)時(shí)機(jī),另一個(gè)是曲線。延時(shí)上后兩個(gè)延時(shí)要保持一致,這樣圓間距相等才會(huì)好看,另外間距通過延時(shí)控制松緊,過緊過松都不好,這個(gè)自己調(diào)吧。曲線(timing-function)上拿不準(zhǔn)就用線性(linear),或者也可以試試其它幾個(gè)預(yù)制的,或者也可以上網(wǎng)搜下有些現(xiàn)成的cubic-bezier。我記得我第一次寫翻頁(yè),就搜到一個(gè)據(jù)說是錘子手機(jī)用過的cubic-bezier,用了以后感覺效果還不錯(cuò),所以你也可以試試。

2018年6月5日 22:56