亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

【譯】響應(yīng)式CSS動(dòng)畫

系統(tǒng) 2308 0

原文標(biāo)題:Responsive CSS Keyframe Animations
原文作者:Joni Trythall
原文地址: http://designmodo.com/responsive-animation/

譯文作者:@靜逸秋水(蒲歡)

?

==============================

?

我知道對(duì)于CSS動(dòng)畫的的喜好并非自己一人。同時(shí)我也認(rèn)為還有諸多人同我一樣熱衷移動(dòng)開(kāi)發(fā)。然而,使用帶有動(dòng)畫網(wǎng)站的愉悅體驗(yàn)往往卻在移動(dòng)端戛然止步。如果我們的目標(biāo)是創(chuàng)造最好的用戶體驗(yàn),我們承認(rèn),動(dòng)畫無(wú)疑會(huì)豐富這方面的體驗(yàn),我們需要確保我們交付不管正在使用的設(shè)備。


由于移動(dòng)端受到屏幕尺寸限制,再加上我們當(dāng)中不少人還有一個(gè)很大的拇指,這很有可能遮擋住動(dòng)畫。這樣一想,似乎會(huì)覺(jué)得在移動(dòng)端實(shí)現(xiàn)動(dòng)畫有些讓人沮喪。但我 們依舊不能把所有的注意力花在創(chuàng)建桌面動(dòng)畫上,而不是僅僅讓移動(dòng)端用戶駐足觀看。而那樣做,將會(huì)犧牲掉很大比例的用戶體驗(yàn)。

?

通過(guò)動(dòng)畫實(shí)現(xiàn)交流
我們也可以通過(guò)這些動(dòng)畫跨越簡(jiǎn)單的顏色和大小過(guò)渡。它并不必須和最終事件相關(guān)。我們可以用有趣的動(dòng)畫作為與用戶溝通的工具。用戶可以僅此一樂(lè),或者帶有目的性的去觀賞。既然我們已經(jīng)得到了他們的注意力,現(xiàn)在我們想要做些什么?

?

移動(dòng)端,動(dòng)畫第一
就像我們?cè)诮ㄔO(shè)一個(gè)網(wǎng)站,我們首先需要開(kāi)發(fā)手機(jī)端的動(dòng)畫。這迫使我們縮小范圍并專注于我們上面所要表達(dá)的意思。創(chuàng)建響應(yīng)的動(dòng)畫將使我們能夠更好的適應(yīng)不同 設(shè)備的限制,從而構(gòu)建不同的用戶體驗(yàn)。即使存在這些差異,但動(dòng)畫還是不得不表達(dá)同樣的事情。每個(gè)屏幕都為我們提供了限制(是的,甚至是桌面),響應(yīng)式設(shè)計(jì) 將克服這些局限性。

?

按鈕草圖和DEMO
這是關(guān)于消息,適應(yīng)局限以及樂(lè)趣。為了證明這個(gè)理念,我們將會(huì)為一個(gè)提交按鈕創(chuàng)建動(dòng)畫。我們的移動(dòng)動(dòng)畫將保持按鈕的邊界內(nèi)。我們的桌面動(dòng)畫將超出按鈕的邊界,并利用外面的一些空間。先看下草圖吧!

a

?

按鈕草圖
我們?cè)谶@里向用戶傳達(dá)了三個(gè)階段的消息:激活,提交和完成。通過(guò)這些動(dòng)畫,我們完成了與用戶溝通的整個(gè)過(guò)程。盡管兩者存在區(qū)別,但傳達(dá)卻是同一個(gè)意思。我們的信息是一致的,我們的圖片風(fēng)格是一致的,而現(xiàn)在我們應(yīng)該能夠理解它所帶來(lái)的樂(lè)趣,無(wú)需顧忌屏幕大小。


讓我們來(lái)看看我們的按鈕的演示(見(jiàn)文章最后),我們潛水(公頃)進(jìn)入前的@keyframe。我們的按鈕有一組動(dòng)畫的適應(yīng)于屏幕比800px小的,另一組動(dòng)畫適應(yīng)于比800px大的屏幕。當(dāng)你改變?yōu)g覽器窗口大小時(shí)將重設(shè),以便展現(xiàn)不同的動(dòng)畫
a

?

移動(dòng)端的@keyframe
我們?cè)趥鬟_(dá)一個(gè)“提交”或“處理”信息,當(dāng)按鈕點(diǎn)擊后,通過(guò)讓水面出現(xiàn),然后讓潛艇移動(dòng)到另一側(cè)。同樣文本也會(huì)隨著動(dòng)畫改變。我們會(huì)告訴用戶“嘿,感謝點(diǎn)擊,我們?cè)谔峤荒男畔ⅰ薄?
要做到這一切,我們將設(shè)立三個(gè)不同的@keyframe。

        @keyframes submerge {
to {
transform: translateY(-50px);
}
}

@keyframes drive {
to {
transform: translateX(140px);
}
}

@keyframes sent {
to {
opacity: 1;
}
}
      
?

?

在上面的@keyframe的命令,我們已經(jīng)把我們的水位上升,潛艇在按鈕中移動(dòng),最后,讓我們的“已發(fā)送”的文字出現(xiàn),傳達(dá)完成信號(hào)。

?

移動(dòng)限制
當(dāng)我們賦予這些動(dòng)畫,我們需要考慮其他因素,或許受限的不是手機(jī)屏幕大小,而是我們的大拇指。當(dāng)用戶用手指點(diǎn)擊按鈕后,那馬上開(kāi)始動(dòng)畫,無(wú)意動(dòng)畫可能被錯(cuò) 過(guò)。牢記這一點(diǎn),我們的動(dòng)畫任務(wù)中定時(shí)功能將是重要的。我們聲明延遲和設(shè)置完成時(shí)間都是為了考慮到拇指的影響如同需要正在處理的動(dòng)畫一樣。


動(dòng)畫是微妙的,如果不能如此微妙,或許我們意圖可能已經(jīng)失去,比如,如果用戶是步行,他很有可能錯(cuò)過(guò)動(dòng)畫,也就無(wú)法激起用戶的關(guān)注。我們已經(jīng)成功地展示給用戶激活,提交,并完成狀態(tài),并且無(wú)需使用額外的空間。這樣做會(huì)不會(huì)很有趣,至少是一個(gè)不錯(cuò)的開(kāi)始。

?

桌面關(guān)鍵幀
現(xiàn)在,到了我們的桌面動(dòng)畫。這次我們將它做得更炫一點(diǎn)。我們希望潛艇能夠飛出按鈕,并帶有水花,移動(dòng)到右邊,然后再回到按鈕嗎,再次出現(xiàn)水花。然后潛艇停 留在右邊。與移動(dòng)端一致,這些動(dòng)畫都將在4秒內(nèi)完成。我們按鈕的整體外觀看起來(lái)很好玩。讓我們來(lái)看看每個(gè)@keyframe。


潛艇被定位在左邊,我們希望它上下移動(dòng),翻轉(zhuǎn),然后下來(lái)。它會(huì)跳出水面,因此我們將調(diào)用此

        @keyframe。

@keyframes jump {
25% {
transform: translateY(-90px) rotate(-40deg);
}
75% {
transform: translateY(-90px) translateX(150px) rotate(40deg);
}
100% {
transform: translateY(0) translateX(150px);
}
}
      

?

為了實(shí)現(xiàn)賤入效果,我們希望水滴從隱藏到短暫出現(xiàn),需要如下@keyframe

        @keyframes water-splash {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
      

?
在動(dòng)畫的中途,水滴將完全可見(jiàn)的,但隨后在動(dòng)畫完成后消失。我們不希望這些家伙一直參與其中,只是做一個(gè)簡(jiǎn)單的外觀。我們將針對(duì)我們的第二飛濺提供一個(gè)額外的類,向右移動(dòng),然后添加2秒潛艇去那邊的動(dòng)畫延遲。然后,我們的“已發(fā)送”的文字會(huì)出現(xiàn),標(biāo)示完成的狀態(tài)。

?

桌面的限制
我們?cè)谶@里的主要限制還是在創(chuàng)建移動(dòng)端的動(dòng)畫時(shí)的消息。我們已經(jīng)在使用我們的動(dòng)畫來(lái)傳達(dá)提交過(guò)程中的不同狀態(tài),因此桌面動(dòng)畫也需如此。主要的區(qū)別是在我們 如何使用空間,以及我們?nèi)绾未_定移動(dòng)的速度。我們讓潛艇舒展了下他的螺旋槳,相信它和用戶的眼球都應(yīng)該會(huì)為此而感謝我們。

?

提交完成
我們已成功地使用兩種不同的方式傳達(dá)同樣一件事情。消息和體驗(yàn)在不同分辨率表現(xiàn)出一致性。這一概念,當(dāng)然,并不局限于移動(dòng)一個(gè)可愛(ài)的潛水艇。我們?cè)谖覀兙W(wǎng) 站上創(chuàng)建的每個(gè)動(dòng)畫需要先開(kāi)發(fā)移動(dòng)。從較小的屏幕省略動(dòng)畫,或有一個(gè)是否適用不同屏幕大小的動(dòng)畫,都將會(huì)影響傳遞的消息,品牌,和用戶的體驗(yàn)。


我們動(dòng)畫都是響應(yīng)式,我們所有的用戶現(xiàn)在極其瘋狂地提交數(shù)據(jù)來(lái)觀看我們的潛艇的舞蹈。只是,你知道,在這種情況下沒(méi)有實(shí)際的數(shù)據(jù)。我們還成功地使用CSS動(dòng)畫作為一種交流形式,而不只是一個(gè)華而不實(shí)的效果。


是不是覺(jué)得這樣的提交很贊?

?

=============

?

DEMO: http://designmodo.com/demo/cssresponsivebutton/
Download: https://dl.dropboxusercontent.com/u/21385868/designmodo/cssresponsivebutton.zip

轉(zhuǎn)自: http://www.75team.com/archives/688

【譯】響應(yīng)式CSS動(dòng)畫


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系: 360901061

您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】

您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長(zhǎng)會(huì)非常 感謝您的哦!!!

發(fā)表我的評(píng)論
最新評(píng)論 總共0條評(píng)論
主站蜘蛛池模板: 亚洲久久久久 | 国产欧美成人免费观看视频 | 免费高清在线影片一区 | 四虎影院免费 | 欧美顶级xxxxbbbb | 成人国产精品一区二区网站 | 久久精品视频3 | 精品国产免费久久久久久婷婷 | 日韩中文字幕在线免费观看 | 激情综合五月婷婷 | 波多野结衣在线一区 | 五月婷婷久久综合 | 日日噜噜夜夜狠狠久久丁香 | 国产在线观看91精品不卡 | 久久视频免费在线观看 | 日本一级α一片免费视频 | 国产精品视频全国免费观看 | 神马影院在线观看我不卡 | 狠狠r| 日韩亚州 | 在线播放五十路乱中文 | 日产精品久久久一区二区 | 橘子视频在线观看 | 久久婷婷五综合一区二区 | 久久女人天堂 | 久久成年人 | 五月狠狠亚洲小说专区 | 久久精品一区二区影院 | 久久这里只有精品首页 | 久久日本精品99久久久久 | 久久国产国内精品对话对白 | 成人国产精品免费视频不卡 | 国产一级一片免费播放i | 亚洲另在线日韩综合色 | jiz欧美高清| 牛牛影视在线 | 久久精彩 | 99j久久精品久久久久久 | 亚洲一区二区三区高清网 | 国产尤物在线播放 | 久久综合精品国产一区二区三区 |