現(xiàn)代CSS：純 CSS 實(shí)現(xiàn)路徑動(dòng)畫(huà)

日常開(kāi)發(fā)中，Loading 動(dòng)畫(huà)及加載進(jìn)度應(yīng)該是使用最廣泛的。實(shí)現(xiàn)它們的方案很多，包括Gif圖、CSS動(dòng)畫(huà)、APNG、Lottie等。本文將介紹一種使用 CSS 自定義屬性 @property、conic-gradient()、offset-path 以及表情符號(hào)實(shí)現(xiàn)的路徑動(dòng)畫(huà)。

1.核心知識(shí)點(diǎn)介紹

1.1.@property

引用 MDN 的定義：

@property CSS at-rule是CSS Houdini API 的一部分，它允許開(kāi)發(fā)者顯式地定義他們的CSS 自定義屬性, 允許進(jìn)行屬性類(lèi)型檢查、設(shè)定默認(rèn)值以及定義該自定義屬性是否可以被繼承。
@property 規(guī)則提供了一個(gè)直接在樣式表中注冊(cè)自定義屬性的方式，而無(wú)需運(yùn)行任何 JS 代碼。有效的 @property 規(guī)則會(huì)注冊(cè)一個(gè)自定義屬性，就像 CSS.registerProperty (en-US) 函數(shù)被使用同樣的參數(shù)調(diào)用了一樣。

基礎(chǔ)語(yǔ)法：

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

瀏覽器兼容性：

1.2.conic-gradient()

conic-gradient() 創(chuàng)建一個(gè)由漸變組成的圖像，漸變的顏色圍繞一個(gè)中心點(diǎn)旋轉(zhuǎn)（而不是從中心輻射）進(jìn)行過(guò)渡。錐形漸變的例子包括餅圖和色輪 (en-US)

conic-gradient() 即錐形漸變，它由起始角度、中心位置、角漸變斷點(diǎn)三個(gè)部分組成，其中起始角度和中心位置都是可以省略的。

基礎(chǔ)語(yǔ)法：

conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

瀏覽器兼容性：

conic-gradient() 已經(jīng)被所有現(xiàn)代瀏覽器所支持。

1.3.offset-path

offset 常見(jiàn)屬性：

offset-distance：指定元素沿 offset-path 路徑運(yùn)動(dòng)的距離，可以是數(shù)值或者百分比單位，100% 則表示把所有的路徑都跑完了。
offset-position：定義元素的 offset-path 初始位置，類(lèi)似于屬性 background-position。
offset-anchor：指定 offset-path 路徑框內(nèi)的原點(diǎn)，其屬性值和 transform-origin 類(lèi)似。
offset-rotate：定義元素沿 offset-path 路徑的角度，默認(rèn)是 auto，表示自動(dòng)計(jì)算當(dāng)前路徑的切線方向，并朝著這個(gè)方向前進(jìn)。

path 的路徑參數(shù):

M=moveto
L=lineto
H=horizontal lineto
V=vertical lineto
C=curveto
S=smooth curveto
Q=quadratic Bézier curve
T=smooth quadratic Bézier curveto
A=elliptical Arc
Z=closepath

瀏覽器兼容性：

offset: path() 也已被所有現(xiàn)代瀏覽器所支持。

2.實(shí)現(xiàn)方案

2.1.創(chuàng)建頁(yè)面框架

使用 html:5 和 div.circle>div.indicator 快速創(chuàng)建頁(yè)面框架。

2.2.增加基礎(chǔ)樣式

使用 conic-gradient() 增加背景色，使用偽元素 ::before 增加了圓環(huán)效果，同時(shí)給 .indicator 元素增加了 offset 路徑，并設(shè)置 --size: min-content 以適應(yīng)內(nèi)容大小。

:root {
  --size: 200px; 
  --p: 10%;
}
@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
body {
  display: grid;
  place-items: center;
}
.circle {
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient( red calc(-60% + var(--p)), rgb(224, 187, 77) var(--p), #eee 0); 
  cursor: progress;

  .indicator {
    --size: min-content;
    width: var(--size); 
    aspect-ratio: 1;
    offset: path("M 100,0 a 100 100 0 1 1 -.1 0 z");
    offset-distance: var(--p);
    font: 43pt serif;
    transform: rotateY(180deg) translateX(-6px);
  }

  &::before {
    position: absolute;
    inset: 20px; 
    content: '::before';
    text-align: center;
    line-height: 160px;
    border-radius: inherit;
    background: #fff;
  }
}

效果如下：

2.3.增加動(dòng)畫(huà)樣式

動(dòng)畫(huà)實(shí)現(xiàn)主要依賴(lài) --p 屬性的變化，記得使用 @property 來(lái)定義。

.circle {
  animation: offsetDis 2s linear infinite;

  .indicator {
    animation: offsetDis 2s linear infinite;
  }
}

3.效果預(yù)覽

載

Video.js (當(dāng)前版本 v7.18.1)提供了下列的一些使用方法，但是你應(yīng)該選擇最適合你使用的方式去使用。

Video.js CDN

我們?cè)?span style="color: #333333; --tt-darkmode-color: #333333;">Fastly上提供了video.js所需必須的足夠多的文件，通過(guò)引用這些托管文件可能是使用video.js最簡(jiǎn)單的方法，你只需要在你的頁(yè)面按照下列方式使用即可。

<head>
  <link href="https://vjs.zencdn.net/7.18.1/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.18.1/video.min.js"></script>
</body>

通過(guò)NPM安裝

對(duì)于更高級(jí)的工程可以使用NPM進(jìn)行安裝

$ npm install --save-dev video.js

對(duì)IE瀏覽器的支持

由于IE瀏覽器已經(jīng)基本被市場(chǎng)淘汰，所以這塊內(nèi)容不做翻譯，如果真的遇到IE瀏覽器的問(wèn)題，建議大家訪問(wèn)官網(wǎng)（https://videojs.com/getting-started/#internet-explorer-support）解決

谷歌分析（Google Analytics）

我們內(nèi)置了一個(gè)精簡(jiǎn)的谷歌分析器，用于通過(guò)跟蹤和分析用戶(hù)從CDN加載的隨機(jī)百分比來(lái)了解當(dāng)前使用的瀏覽器，以及一些其他有用的指標(biāo)屬性，如系統(tǒng)和設(shè)備。如果你想禁用分析，你可以通過(guò)設(shè)置下面的全局屬性即可。

window.HELP_IMPROVE_VIDEOJS=false;

注意：v7不會(huì)發(fā)送任何數(shù)據(jù)，而v6.8及以上版本尊重瀏覽器的不跟蹤標(biāo)志。

下載的包是什么？

如果您已經(jīng)下載了其中的一個(gè)版本，或者通過(guò)包管理器安裝了它，您可能會(huì)注意到其中的內(nèi)容與Github上提供的源代碼略有不同。前者只包含使用Video.js所需的編譯文件，而后者包含用于創(chuàng)建這些文件的源代碼。

結(jié)構(gòu)目錄

如果你下載了了一個(gè)發(fā)行版或者通過(guò)包管理工具安裝了一個(gè)video.js，就會(huì)發(fā)現(xiàn)下面的目錄結(jié)構(gòu)：

Video.js/
├── alt
│   ├── video.core.js
│   ├── video.core.min.js
│   ├── video.core.novtt.js
│   ├── video.core.novtt.min.js
│   ├── video.novtt.js
│   └── video.novtt.min.js
├── examples/
├── font
│   ├── VideoJS.svg
│   ├── VideoJS.ttf
│   └── VideoJS.woff
├── lang/
├── video-js-<span class="vjs-version">$LATEST_VERSION$</span>.zip
├── video-js.css
├── video-js.min.css
├── video.cjs.js
├── Video.es.js
├── Video.js
└── video.min.js

該包包含了Video.js在生產(chǎn)站點(diǎn)上使用所需的所有內(nèi)容。默認(rèn)情況下，我們將Video.js與Mozilla的VTT.js捆綁在一起。如果你不需要VTT.js功能，你可以使用Video.js的一個(gè)副本，它不包括VTT.js。它們的名稱(chēng)中有novtt，可以在alt/目錄中找到。font/包含了Videojs font項(xiàng)目中生成的所有圖標(biāo)字體文件。Lang /包含所有生成的翻譯文件。

源碼

你可以在git倉(cāng)庫(kù)中中發(fā)現(xiàn)video.js的所有源碼。它包含了所有用以構(gòu)建video.js生產(chǎn)版本，以及開(kāi)發(fā)工具和案例所必須的工具和源文件。

因?yàn)樵诨ヂ?lián)網(wǎng)上，很多包管理都是使用項(xiàng)目根目錄下的JSON配置文件。大多重要的東西都在src/和build目錄下。src/目錄下包含了所有的用戶(hù)的js源文件和一些基礎(chǔ)樣式。build目錄包含了所有grunt.js構(gòu)建工具，構(gòu)建任務(wù)的源文件

構(gòu)建工具

使用前你需要先安裝Node.js,詳情可以查看CONTRIBUTING.md（https://github.com/videojs/video.js/blob/main/CONTRIBUTING.md#contributing-code）

客制化

直接使用Video.js是可以的，但是如果你想做更好播放器，那么你也可以客制化更好的客制化你的插件和樣式。

皮膚

播放器皮膚完全由HTML和CSS構(gòu)建，包括使用Flash和YouTube等其他播放器時(shí)。

皮膚的改變可以簡(jiǎn)單到將播放按鈕置于中心(你可以將“vjs-big-play-centered”類(lèi)添加到你的視頻標(biāo)簽中)，也可以復(fù)雜到創(chuàng)建全新的布局。我們已經(jīng)建立了一個(gè)代碼依賴(lài)的項(xiàng)目，在那里你可以探索不同的變化。

主頁(yè)主題

主頁(yè)中的主題來(lái)自Videojs主題庫(kù)。要在您的播放器中使用它們，請(qǐng)導(dǎo)入CSS，然后將相關(guān)的類(lèi)添加到您的視頻標(biāo)簽。例如，如果你想使用City主題，你可以這樣設(shè)置你的HTML:

<!-- In the head of your document with your other CSS includes... -->
<!-- Video.js base CSS -->
<link
  href="https://unpkg.com/video.js@7/dist/video-js.min.css"
  rel="stylesheet"
/>

<!-- City -->
<link
  href="https://unpkg.com/@videojs/themes@1/dist/city/index.css"
  rel="stylesheet"
/>

<!-- Then, in the player -->
<video class="video-js vjs-theme-city" ...></video>

你的設(shè)計(jì)

很好的開(kāi)始是設(shè)計(jì)你自己的video.js皮膚，我們建議使用CSS的級(jí)聯(lián)方面來(lái)簡(jiǎn)單地覆蓋你想定制的設(shè)計(jì)部分。

插件

Video.js本身非常簡(jiǎn)單。它支持基本的視頻和音頻播放特性，并確保它們?cè)诓煌牟シ偶夹g(shù)(“techhs”)之間工作相同。任何更高級(jí)的功能都是作為插件構(gòu)建的，包括播放列表、分析、廣告，以及對(duì)HLS和DASH等高級(jí)格式的支持。查看插件頁(yè)面，看看有什么可用的。

插件庫(kù)：https://videojs.com/plugins/

用JavaScript實(shí)現(xiàn)文字逐步展現(xiàn)的動(dòng)畫(huà)效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript文字動(dòng)畫(huà)</title>
</head>
<body>
<div class="container"></div>
</body>
<script>
const containerEI=document.querySelector(".container");
const careers=["跟著我","每天學(xué)習(xí)一點(diǎn)點(diǎn)","讓你不再枯燥","不再孤單"];
let careerIndex=0;
let characterIndex=0;
updateText();
function updateText() {
characterIndex++;
containerEI.innerHTML=`
<h1>JavaScript文字動(dòng)畫(huà)${careers[careerIndex].slice(0,characterIndex)}</h1>
`;
if(characterIndex===careers[careerIndex].length){
careerIndex++;
characterIndex=0;
}
if(careerIndex===careers.length){
careerIndex=0;
}
setTimeout(updateText,400);
}
</script>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
background-color: #fd946a;
font-family: "Permanent Marker", cursive;
}
</style>
</html>

總結(jié)思考

學(xué)習(xí)點(diǎn)：
1、document.querySelector()返回container元素的信息
2、innerHTML：更改html元素的內(nèi)容，可以設(shè)置或返回表格行的開(kāi)始和結(jié)束標(biāo)簽之間的HTML
3、slice(參數(shù)1，參數(shù)2) :從已有的數(shù)組中返回選定的元素
參數(shù)1：從何處開(kāi)始選取
參數(shù)2：從何處結(jié)束選取
4、setTimeout()：定時(shí)執(zhí)行一個(gè)函數(shù)或指定的一段代碼

使用JavaScript完成文字的逐步展現(xiàn)，可以做一個(gè)簡(jiǎn)短的動(dòng)畫(huà)，讓界面更加生動(dòng)有趣。

在線咨詢(xún)

上一篇：3分鐘，10行代碼教你寫(xiě)Python爬蟲(chóng)
下一篇：國(guó)內(nèi)外主流數(shù)字孿生解決方案巡禮

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

現(xiàn)代CSS：純 CSS 實(shí)現(xiàn)路徑動(dòng)畫(huà)

1.核心知識(shí)點(diǎn)介紹

2.實(shí)現(xiàn)方案

3.效果預(yù)覽

載

Video.js CDN

通過(guò)NPM安裝

對(duì)IE瀏覽器的支持

谷歌分析（Google Analytics）

下載的包是什么？

結(jié)構(gòu)目錄

源碼

構(gòu)建工具

客制化

主頁(yè)主題

你的設(shè)計(jì)

插件

總結(jié)思考

您的項(xiàng)目需求

下載的包是什么？