成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css創(chuàng)建優(yōu)雅自然的打開動(dòng)畫

xuhong / 1738人閱讀

摘要：前言花了很大篇幅介紹了優(yōu)雅自然的動(dòng)畫應(yīng)該具備哪些特性。接下來，用打開一個(gè)動(dòng)畫的例子，來說說本人對的認(rèn)識。一個(gè)最簡單的打開動(dòng)畫，可能涉及移動(dòng)和放大。最后，將兩種運(yùn)動(dòng)的代碼結(jié)合在一起就能創(chuàng)建優(yōu)雅自然的打開動(dòng)畫啦。

前言

Google Material Design花了很大篇幅介紹了優(yōu)雅自然的動(dòng)畫應(yīng)該具備哪些特性。不僅僅是視覺上的觀感，還能幫助提高用戶界面的可用性，提升用戶體驗(yàn)。官方文檔講的很細(xì)致，有很多典型視頻示例，可惜缺少代碼示例。接下來，用打開一個(gè)material surface動(dòng)畫的例子，來說說本人對material motion的認(rèn)識。

一個(gè)最簡單的打開動(dòng)畫，可能涉及移動(dòng)和放大。在Material的世界中，斜向移動(dòng)是不走直線的，運(yùn)動(dòng)速率是變化的，寬和高也不是同時(shí)變化的。按照Material motion的設(shè)計(jì)思想，可以列出打開動(dòng)畫應(yīng)該具有的幾個(gè)特點(diǎn)：

動(dòng)畫持續(xù)時(shí)間(duration)與運(yùn)動(dòng)距離有關(guān)，但要在150ms-400ms之間，過快讓人感覺跟不上，過慢讓人感覺反應(yīng)遲鈍，長距離運(yùn)動(dòng)時(shí)間長些，短距離運(yùn)動(dòng)時(shí)間短些。

在Material世界中，運(yùn)動(dòng)速率曲線分為四種，對于屏幕內(nèi)的運(yùn)動(dòng)，使用標(biāo)準(zhǔn)的貝塞爾曲線。

Material元素寬高的變化是不一致的，在放大過程中，寬度變大的速度大于高度，縮小過程則相反。

Material元素移動(dòng)的路徑是凹弧線。

CSS代碼

打開（放大）過程中寬度比高度先達(dá)到目標(biāo)值，高比寬延遲開始變化；關(guān)閉過程（縮?。┲?，高度比寬度先達(dá)到目標(biāo)值，寬比高延遲開始變化。CodePen: http://codepen.io/huangbuyi/p...

// Open
transition: width 275ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,
            height 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35m；
            
// Close
transition: width 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35ms,
            height 275ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,

移動(dòng)過程中，除了水平和豎直移動(dòng)，Material元素移動(dòng)路徑是凹弧線。向頁面下方運(yùn)動(dòng)是，就像是彈珠從碗邊沿滾到碗里，向頁面上方運(yùn)動(dòng)，就像彈珠從碗里滾動(dòng)碗邊沿。不過速度是不一樣的，運(yùn)動(dòng)速率根據(jù)Material中的標(biāo)準(zhǔn)運(yùn)動(dòng)曲線，曲線是加速啟動(dòng)，減速停止的。CodePen:http://codepen.io/huangbuyi/p...

// 向頁面下方運(yùn)動(dòng)
transition: left 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35ms,
            top 305ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms;
            
// 向頁面上方運(yùn)動(dòng)
transition: left 305ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,
            top 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35ms;

需要注意的是，打開和關(guān)閉不要用同一套動(dòng)畫，向上移動(dòng)和向下移動(dòng)也不要用同一套動(dòng)畫，可以分別放在兩個(gè)類中，通過改變類名，實(shí)現(xiàn)不同動(dòng)畫效果。最后，將兩種運(yùn)動(dòng)的代碼結(jié)合在一起就能創(chuàng)建優(yōu)雅自然的打開動(dòng)畫啦。CodePen: http://codepen.io/huangbuyi/p...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115393.html

相關(guān)文章

  • CSS動(dòng)畫優(yōu)雅降級的簡單總結(jié)

    摘要：轉(zhuǎn)載自動(dòng)畫相關(guān)屬性兼容性兼容性兼容性可以看到動(dòng)畫在這里主要討論及以下完全不支持，由于只支持非優(yōu)雅降級初始化元素動(dòng)畫前樣式及加入動(dòng)畫現(xiàn)代瀏覽器下移開元素下移開元素透明元素，是元素不透明主要功臣自然是因?yàn)椴恢С肿匀粫?huì)忽略掉，所以也在 轉(zhuǎn)載自：http://waynecz.github.io/2016... CSS動(dòng)畫相關(guān)屬性 transition：兼容性??showImg(https://...

    QiShare 評論0 收藏0

  • CSS動(dòng)畫優(yōu)雅降級的簡單總結(jié)

    摘要：轉(zhuǎn)載自動(dòng)畫相關(guān)屬性兼容性兼容性兼容性可以看到動(dòng)畫在這里主要討論及以下完全不支持，由于只支持非優(yōu)雅降級初始化元素動(dòng)畫前樣式及加入動(dòng)畫現(xiàn)代瀏覽器下移開元素下移開元素透明元素，是元素不透明主要功臣自然是因?yàn)椴恢С肿匀粫?huì)忽略掉，所以也在 轉(zhuǎn)載自：http://waynecz.github.io/2016... CSS動(dòng)畫相關(guān)屬性 transition：兼容性??showImg(https://...

    archieyang 評論0 收藏0

  • 案例 - 收藏集 - 掘金

    摘要：同行這么做使用實(shí)現(xiàn)圓形進(jìn)度條前端掘金在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。實(shí)現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個(gè)老生常談的話題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶界面中項(xiàng)目的標(biāo)題。 閑話圖片上傳 - 掘金作者：孫輝，美團(tuán)金融前端團(tuán)隊(duì)成員。15年畢業(yè)加入美團(tuán)，相信技術(shù)，更相信技術(shù)只是大千世界里知識的一種，個(gè)人博客: https://sunyuhui.com ...

    張金寶 評論0 收藏0

  • 案例 - 收藏集 - 掘金

    摘要：同行這么做使用實(shí)現(xiàn)圓形進(jìn)度條前端掘金在開發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。實(shí)現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個(gè)老生常談的話題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶界面中項(xiàng)目的標(biāo)題。 閑話圖片上傳 - 掘金作者：孫輝，美團(tuán)金融前端團(tuán)隊(duì)成員。15年畢業(yè)加入美團(tuán)，相信技術(shù)，更相信技術(shù)只是大千世界里知識的一種，個(gè)人博客: https://sunyuhui.com ...

    huangjinnan 評論0 收藏0

  • 又雙叒叕是一個(gè)動(dòng)態(tài)簡歷

    摘要：標(biāo)點(diǎn)處理根據(jù)傳入的字符來判斷下一個(gè)字符出現(xiàn)的延遲時(shí)間，即方法的第二個(gè)參數(shù)。年初的時(shí)候試著重寫了這個(gè)項(xiàng)目，感覺已是沒有什么難度了，不過也是面向過程，一頓操作罷了。 先看效果 請戳這里看預(yù)覽這里是代碼 見過了？別走，這是與眾不同的地方 針對移動(dòng)端優(yōu)化了體驗(yàn) 支持動(dòng)畫跳過 支持多段動(dòng)畫 標(biāo)點(diǎn)字符特殊處理，停留時(shí)間略長于字符時(shí)間 typescript 編寫 對功能進(jìn)行了封裝處理，可以直接引入...

    firim 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<