用code打造自己的過渡動畫

tinysun1234 發布于2019-08-30 15:52 / 1433人閱讀

摘要：起源自己的過渡動畫，為什么要這個東西呢不是說好的么。所以本喵決定打造自己的過渡動畫。給出的示例屬性指定了模式到路徑開始的距離通過修改這兩個屬性，動畫的邊界就相應的動起來了。

起源

自己的過渡動畫，為什么要這個東西呢？不是說好的Simple is beautiful么。的確我也是非常欣賞簡潔的東西，但是對于掛載在Github上的本博客，在國內訪問總是不那么流暢，而Next主題的文字下落動畫恰恰使博客訪問體驗變的非常糟糕（感覺訪問變得更慢了）。所以本喵決定打造自己的過渡動畫。

借鑒

在兩三個月前記得訪問過一個個人博客，過渡動畫非常驚艷，但當時并沒有時間詳細琢磨實現細節。如今正好借鑒一番，經過一番Google，還是本喵找到了（但是作者的博客好像沒有維護了，無法訪問），好在也是依托Github pages 掛載的博客，直接把源碼下載下來進行研究。

地址： https://github.com/ceoimon/ce...

實現細節

動畫并非純css實現而是使用了SVG + CSS

可縮放矢量圖形（英語：Scalable Vector Graphics，SVG）是一種基于可擴展標記語言（XML），用于描述二維矢量圖形的圖形格式。 SVG由W3C制定，是一個開放標準。
既然是矢量圖，它的縮放就不會失真，因為表示方法是基于數學的表示，而不是像素點。動畫中的筆畫即是基于SVG中path標簽中的數據先后順序。

#mySVG path {
  stroke: #000;
  stroke-width: 2px;
  stroke-dasharray: 11434;
  stroke-dashoffset: 11456;
  -webkit-animation: dash 5s linear infinite;
  animation: dash 5s linear infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
/*   -webkit-transition:fill 0.5s 1s linear;
  transition:fill 0.5s 1s linear;*/
}
@-webkit-keyframes dash {
  10% {
    stroke-dashoffset: 11456;
  }
  70% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  80% {
    stroke-dashoffset: 0;
    fill: #000;
  }
  95% {
    stroke-dashoffset: 11456;
    fill: #000;
  }
  100% {
    stroke-dashoffset: 11456;
    fill: transparent;
  }
}

不過當我理解了這svg兩個屬性(stroke-dasharray，stroke-dashoffset)后，還是非常震驚于這個動畫的實現原理。

stroke-dasharray屬性可控制用來描邊的點劃線的圖案范式。

MDN給出的示例：

stroke-dashoffset屬性指定了dash模式到路徑開始的距離

通過CSS修改這兩個屬性，動畫的邊界就相應的動起來了。

我的實現

我的素材：

使用 AI 得到 SVG，最終效果：

GeekCat體驗

GPU云服務器云服務器翻轉過渡動畫 squid打造自己的cdn 打造自己的云服務器 ios過渡動畫

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

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

CSS 小結筆記之變形、過渡與動畫

摘要：變形變形移動移動可以指定像素值也可以指定百分比，注意指定百分比是自身大小的百分比，因此可以用于設置盒子定位時的居中對齊在設置后再移動自身的即可。方向上的移動在現實生活中是距離變遠，距離變近。1、過渡transition 過渡屬性用法： transition :ransition-property transition-durationtransition-timing-functiontra...

番茄西紅柿 2019-04-23 13:22 評論0 收藏0
SVG

摘要：目前只提供了一些基礎功能。中與的區別開發者第一次接觸手寫那種，雖然很多情況都有設計師使用來完成這項工作，但還是不排除需要利用到的每個元素。輕量級，具備靈活的來自團隊，全球非常出名的可視化團隊。于是筆者嘗試著把移植到中。使用SVG + CSS實現動態霓虹燈文字效果早上無意間進入一個網站，看到他們的LOGO效果略屌，如圖：剛開始以為是gif動畫之類的，審查元素發現居然是用SVG + ...

104828720 2019-08-29 14:00 評論0 收藏0
「碼個蛋」2017年200篇精選干貨集合

摘要：讓你收獲滿滿碼個蛋從年月日推送第篇文章一年過去了已累積推文近篇文章，本文為年度精選，共計篇，按照類別整理便于讀者主題閱讀。本篇文章是今年的最后一篇技術文章，為了讓大家在家也能好好學習，特此花了幾個小時整理了這些文章。 showImg(https://segmentfault.com/img/remote/1460000013241596); 讓你收獲滿滿！碼個蛋從2017年02月20...

wangtdgoodluck 2019-07-30 15:40 評論0 收藏0
匠心打造Vue側滑菜單組件

摘要：本文介紹一個簡單的類似的布局組件的實現，基于。介紹的內容已經制作成組件。即當不可以拖出抽屜時，應觸發默認事件，比如垂直方向的滾動等等。這種優化可以將一部分復雜的計算工作提前準備好，使頁面的反應更為快速靈敏。本文介紹一個簡單的DrawerLayout（類似Android的DrawerLayout）布局組件的實現，基于Vue.js。介紹的內容已經制作成 vue-drawer-layout...

sutaking 2019-08-22 11:20 評論0 收藏0