css創建優雅自然的打開動畫

xuhong 發布于2019-08-30 13:13 / 1724人閱讀

摘要：前言花了很大篇幅介紹了優雅自然的動畫應該具備哪些特性。接下來，用打開一個動畫的例子，來說說本人對的認識。一個最簡單的打開動畫，可能涉及移動和放大。最后，將兩種運動的代碼結合在一起就能創建優雅自然的打開動畫啦。

前言

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

一個最簡單的打開動畫，可能涉及移動和放大。在Material的世界中，斜向移動是不走直線的，運動速率是變化的，寬和高也不是同時變化的。按照Material motion的設計思想，可以列出打開動畫應該具有的幾個特點：

動畫持續時間(duration)與運動距離有關，但要在150ms-400ms之間，過快讓人感覺跟不上，過慢讓人感覺反應遲鈍，長距離運動時間長些，短距離運動時間短些。

在Material世界中，運動速率曲線分為四種，對于屏幕內的運動，使用標準的貝塞爾曲線。

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

Material元素移動的路徑是凹弧線。

CSS代碼

打開（放大）過程中寬度比高度先達到目標值，高比寬延遲開始變化；關閉過程（縮?。┲?，高度比寬度先達到目標值，寬比高延遲開始變化。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,

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

// 向頁面下方運動
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;
            
// 向頁面上方運動
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;

需要注意的是，打開和關閉不要用同一套動畫，向上移動和向下移動也不要用同一套動畫，可以分別放在兩個類中，通過改變類名，實現不同動畫效果。最后，將兩種運動的代碼結合在一起就能創建優雅自然的打開動畫啦。CodePen: http://codepen.io/huangbuyi/p...

云服務器 GPU云服務器動畫打開解決寶塔面板安裝后創建的網站打開500錯 css3動畫高性能css3動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115393.html

CSS動畫優雅降級的簡單總結

摘要：轉載自動畫相關屬性兼容性兼容性兼容性可以看到動畫在這里主要討論及以下完全不支持，由于只支持非優雅降級初始化元素動畫前樣式及加入動畫現代瀏覽器下移開元素下移開元素透明元素，是元素不透明主要功臣自然是因為不支持自然會忽略掉，所以也在轉載自：http://waynecz.github.io/2016... CSS動畫相關屬性 transition：兼容性??showImg(https://...

QiShare 2019-08-23 17:07 評論0 收藏0
CSS動畫優雅降級的簡單總結

摘要：轉載自動畫相關屬性兼容性兼容性兼容性可以看到動畫在這里主要討論及以下完全不支持，由于只支持非優雅降級初始化元素動畫前樣式及加入動畫現代瀏覽器下移開元素下移開元素透明元素，是元素不透明主要功臣自然是因為不支持自然會忽略掉，所以也在轉載自：http://waynecz.github.io/2016... CSS動畫相關屬性 transition：兼容性??showImg(https://...

archieyang 2019-08-29 18:41 評論0 收藏0
案例 - 收藏集 - 掘金

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

張金寶 2019-08-20 17:44 評論0 收藏0
案例 - 收藏集 - 掘金

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

huangjinnan 2019-08-29 12:54 評論0 收藏0
又雙叒叕是一個動態簡歷

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

firim 2019-08-30 15:54 評論0 收藏0