資訊專欄INFORMATION COLUMN
摘要：源碼常用的圖標有種一種是的菊花一種是的環今天我們用實現的環動畫下節課實現的菊花注意幀數少的原因實際動畫效果是很平滑的首先我們定義的畫布尺寸為在瀏覽器中縮放為顯示這個你可以根據實際需要調整定義環的圓心坐標為半徑為算下周長大概為后面會用
源碼: https://github.com/any86/any-...
ios/androidweb常用的loading圖標有2種, 一種是ios的"菊花", 一種是android的"環". 今天我們用svg實現android的"環"動畫, 下節課實現ios的"菊花".
注意: gif幀數少的原因, 實際動畫效果是很平滑的.
demo
xml(svg)首先我們定義svg的畫布尺寸為50x50, 在瀏覽器中縮放為36x36顯示(這個36你可以根據實際需要調整), 定義環的圓心坐標為25,25, 半徑為20(算下周長大概為125, 后面會用到), 顏色為currentColor獲取父元素的color屬性的值, 環的寬度為5像素, 看下在沒寫css前的效果:
.a-loading {
&-android {
animation: rotate 2s linear infinite;
transform-origin: center center;
>circle {
display: inline-block;
animation: dash 1500ms ease-in-out infinite;
stroke-linecap: round; // 端點是圓形
color: currentColor;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
}
50% {
stroke-dasharray: 100, 200;
stroke-dashoffset: -45;
}
100% {
stroke-dasharray: 100, 200;
stroke-dashoffset: -124;
}
}
}
}
stroke-dasharray
先解釋stroke-dasharray, 他是用來定義虛線的, 比如stroke-dasharray="50, 20"表示實線部分為50, 間隙20的虛線:
試想一下, 如果環也用虛線表示, 并且讓單位實線部分的長度在環的周長范圍內變化,這不就實現了(半環/滿環等形態), 下面分別是stroke-dasharray的值為25, 200/ 50, 200 / 100, 200:
注意: 這里的200是隨意定義的, 表示虛線的間隙, 只要值大于環的周長即可.
偏移, 值為正數的時候, 虛線逆時針回退, 負數順時針前進(左圖的stroke-dashoffset:0, 環的起點在3點方向, 右圖設置為-10以后, 環的起點被順時針偏移了一段距離):
因為動畫中, 環在增加長度的同時尾部在收縮長度, 所以需要配合stroke-dashoffset實現.
讓圓環只呈現一個點, 為了讓循環一周后動畫不突兀(你可以改成0對比下效果).
為了讓圓環呈現80%的環, 所以設置實線部分長度為100(125*0.8, 125是周長): stroke-dasharray: 100, 200;, 同時尾部在收縮, 所以設置 stroke-dashoffset: -45;.
回到一個點的狀態, 和0%狀態一致, 這樣動畫循環起來不突兀, 但是從50%到100%的動畫只是"尾部收縮", 所以我們用stroke-dashoffset:-124實現,125-124=1 正好是一個像素, 好了動畫到此就實現完畢了.
整體旋轉為了和安卓系統的動畫一致, 讓整體也進行旋轉. 這里代碼比較簡單不贅述.
animation屬性的擴展如果大家仔細看過css的animation的文檔, 會發現animation可以同時支持多個過度動畫, 比如animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite;, 用","分割多個動畫.
所以我們其實還可以對上面的動畫進行擴展, 比如旋轉的同時還有顏色變化:
&-android {
animation: rotate 2s linear infinite;
transform-origin: center center;
>circle {
display: inline-block;
// 增加顏色變化的代碼
animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite;
stroke-linecap: round;
color: currentColor;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
}
50% {
stroke-dasharray: 100, 200;
stroke-dashoffset: -45;
}
100% {
stroke-dasharray: 100, 200;
stroke-dashoffset: -124;
}
}
@keyframes color {
0%,
100% {
stroke: #6b5c5b;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
}
本文代碼參考iview, 一個vue框架.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116140.html
摘要：雖然有了十全的計劃，但如何高效率去記住上面那么多東西是一個大問題，看看我是怎么做的。 前言 前一篇文章講述了我在三月份毫無準備就去面試的后果，一開始心態真的爆炸，但是又不服氣，一想到每次回來后家人朋友問我面試結果的期待臉，越覺得必須付出的行動來證明自己了。 面經傳送門：一個1年工作經驗的PHP程序員是如何被面試官虐的？ 下面是我花費兩個星期做的準備，主要分三部分： 有計劃——計劃好...
摘要：拿到秋招的同學，如確定入職需與用人單位簽署三方協議，以保證雙方的利益不受損失。當然每個崗位所要求的側重點不同，但卻百變不離其宗。方法論要想達成某個目標都有其特定的方法論，學習技術也不例外，掌握適當的學習方法才能事半功倍。 寫在前面的話 筆者從17年的2月份開始準備春招，其中遇到不少坑，也意識到自己走過的彎路。故寫了這篇文章總結一番，本文適合主動學習的，對自己要學的課程不明確的，對面試有...
摘要：拿到秋招的同學，如確定入職需與用人單位簽署三方協議，以保證雙方的利益不受損失。當然每個崗位所要求的側重點不同，但卻百變不離其宗。方法論要想達成某個目標都有其特定的方法論，學習技術也不例外，掌握適當的學習方法才能事半功倍。 寫在前面的話 筆者從17年的2月份開始準備春招，其中遇到不少坑，也意識到自己走過的彎路。故寫了這篇文章總結一番，本文適合主動學習的，對自己要學的課程不明確的，對面試有...
摘要：整個項目簡單還具有實用價值，可作為的實戰項目學習的調試工具欄。查看文檔自動在個人首頁展示編程時長的工具。通過學習這些前沿的人工智能論文，提前了解在未來更多可能性可以將圖片和視頻轉換成漫畫風格的工具。興趣是最好的老師，HelloGitHub 讓你對編程感興趣！簡介HelloGitHub 分享 GitHub 上有趣、入門級的開源項目。https://github.com/521xueweihan...
摘要：一是如何工作的在上是這樣描述的運算符用于測試構造函數的屬性是否出現在對象原型鏈中的任何位置換句話說，如果，那么必須是一個對象，而必須是一個合法的函數。下面我們舉一個例子一步步來說明第一步每一個構造函數都有一個屬性。 在 JavaScript 中，我們通常用 typeof 判斷類型，但是在判斷引用類型的值時，常常會遇到一個問題：無論引用的是什么類型的對象，都會返回 object(當然還有...
閱讀 3093·2021-11-22 09:34
閱讀 593·2021-11-22 09:34
閱讀 2436·2021-10-08 10:18
閱讀 3372·2021-09-22 15:57
閱讀 2585·2021-09-22 15:25
閱讀 2398·2019-08-30 15:54
閱讀 2093·2019-08-30 15:44
閱讀 1799·2019-08-29 11:18
