這里只是做簡要介紹，屬于知識的拓展。每種方案的更詳細的使用方式需要各位自行了解。
大體上技術(shù)方案分為：CSS 動畫、SVG 動畫、CSS + SVG、JS 控制的逐幀動畫、GIF 圖。
CSS 動畫
CSS 實現(xiàn)動畫有兩種方式，一種是使用 trasition；另一種是使用 animation。
transition
默認情況下，當 CSS 中的屬性值發(fā)生變化時沒有動畫效果，新值直接生效（有些會有系統(tǒng)自帶的默認效果，這里不談）。
而 transition 的作用是，規(guī)定哪些屬性變化時有動效，duration、控制曲線等。
所以，它是一次性動效。如果想實現(xiàn)循環(huán)效果的動效，需要 JS 配合。
其語法為 transition: <property> <duration> <timing-function> <delay>;。當有多個屬性需要動效時，不同屬性設(shè)置用 , 分隔。
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000ff;
transition:
width 2s,
height 2s,
background-color 2s,
rotate 2s;
}
.box:hover {
background-color: #ffcccc;
width: 200px;
height: 200px;
rotate: 180deg;
}
<body>
<p>
下面的盒子包含 width、height、background-color 和 rotate
的過渡效果。鼠標停留在盒子上以觀察這些屬性是如何變化的。
</p>
<div class="box">示例</div>
</body>
animation
animation 屬性用來設(shè)置動畫的基本參數(shù)，如：duration、delay、重復次數(shù)等。
具體的動畫序列的定義通過 @keyframes 實現(xiàn)，二者配合可以實現(xiàn)自動循環(huán)的動效。
p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
<p>
The Caterpillar and Alice looked at each other for some time in silence: at
last the Caterpillar took the hookah out of its mouth, and addressed her in a
languid, sleepy voice.
</p>
SVG 動畫
下面的代碼自己體會。
<svg id="box" width="800" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="" y="" width="100" height="100" fill="rgb(255,0,0);" stroke="" stroke-width="">
<set attributeName="x" attributeType="XML" to="100" begin="4s"/>
<animate attributeName="x" attributeType="XML" begin="0s" dur="4s" from="0" to="300"/>
<animate attributeName="y" attributeType="XML" begin="0s" dur="4s" from="0" to="0"/>
<animateTransform attributeName="transform" begin="0s" dur="4s" type="scale" from="1" to="2" repeatCount="1" />
<animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="4s" repeatCount="1" />
</rect>
</svg>
需要注意的是，動效的可見范圍不會超過其 width 和 height 規(guī)定的范圍。
CSS + SVG
術(shù)業(yè)有專攻，有些動畫用 CSS 實現(xiàn)起來很復雜甚至實現(xiàn)不了（如：文字描邊動畫）。SVG 自身的動畫脫離不了自己的范圍，因此動畫需要預留很大的空間。
把這兩個結(jié)合起來就可以實現(xiàn)很多絢麗效果。
需要注意一個前提，此時 SVG 需要以標簽的形式嵌入 dom 樹中。
方式一
第一種實現(xiàn)方式很簡單，就是利用 CSS 中的 transition 和 animation。
ect{
width: 100px;
height: 100px;
fill: gold;
transition: fill 1s linear;
}
rect:hover{
fill: greenyellow;
}
<html>
<body>
<svg>
<rect />
</svg>
</body>
</html>
.beat{
transform-origin: bottom; //將變換參考點設(shè)置成`<svg>元素`的底部
animation: beat-scale 1.4s linear infinite;
}
@keyframes beat-scale{
25%{
transform: scaleY(0.3);
}
50%{
transform: scaleY(1);
}
75%{
transform: scaleY(0.3);
}
}
<html>
<body>
<svg height="100" width="100" viewBox="0 0 100 100">
<line class="beat" x1="15" y1="40" x2="15" y2="100" stroke="lightblue" stroke-width="10" stroke-linecap="round"></line>
<line class="beat" x1="50" y1="40" x2="50" y2="100" stroke="lightblue" stroke-width="10" stroke-linecap="round"></line>
<line class="beat" x1="85" y1="40" x2="85" y2="100" stroke="lightblue" stroke-width="10" stroke-linecap="round"></line>
</svg>
</body>
</html>
時鐘效果
.fast-hand{
animation: clock-rotate 2s linear infinite; /*動畫時間設(shè)置不同*/
}
.slow-hand{
animation: clock-rotate 15s linear infinite; /*動畫時間設(shè)置不同*/
}
@keyframes clock-rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
<svg height="0" width="0">
<symbol id="clock" viewBox="-52 -52 104 104">
<circle fill="none" stroke="currentColor" stroke-width="6" stroke-miterlimit="10" cx="0" cy="0" r="48"/>
<line class="fast-hand" fill="none" stroke-linecap="round" stroke="currentColor" stroke-width="6" stroke-miterlimit="10" x1="0" y1="0" x2="35" y2="0.5"></line>
<line class="slow-hand" fill="none" stroke-linecap="round" stroke="currentColor" stroke-width="6" stroke-miterlimit="10" x1="0" y1="0" x2="-0.5" y2="-24"></line>
</symbol>
</svg>
<div style="color:#fa8919; font-size: 16px;" >
<svg height="26" width="26" style="vertical-align: top; margin-top: -2px;margin-right:3px;">
<use href="#clock"></use>
</svg>
<span>等待中</span>
</div>
方式二：描邊動畫
原理介紹
描邊動畫的核心是 SVG 的兩個顯示屬性，分別是 stroke-dasharray 和 stroke-dashoffset。
stroke-dasharray 用于創(chuàng)建虛線。它的值是一個序列，可以傳入多個值，分別指定虛線中線段和間隔的長度。
stroke-dashoffset 描述相對于起始點的偏移。它的值是一個數(shù)值 X，X>0 時，相當于往左移動了 X 個長度單位; X<0 時，相當于往右移動了 X 個長度單位。
stroke-dashoffset 只有在設(shè)置了 stroke-dasharray 的情況下，才生效，非虛線的話，是無法看出偏移的。
對于一條線 line，如果設(shè)置 stroke-dasharray = 'line.length'，那么顯示出來的就只有線段，沒有間隔，相當于實線效果。而此時如果 stroke-dashoffset='line.length'，那線 line 就往左移動了 line.length 個長度單位，顯示出來的就只有間隔，沒有線段，相當于空白的效果。
如果 stroke-dashoffset 的值從 line.length --> 0，線段就會逐漸顯示出來。從而產(chǎn)生描邊的效果。
SVG 的形狀元素都有一個 getTotalLength 的方法，可以獲取該形狀的路徑總長度，對于規(guī)則和不規(guī)則的形狀都適用。
案例
<body>
<svg width="500" height="106" viewBox="0 0 249 53" fill="none">
<path d="M35.9334 13.232C35.9334 13.552 35.4854 13.712 34.5894 13.712C33.6934 13.712 33.2454 13.52 33.2454 13.136C32.3494 10.192 31.4854 8.528 30.6534 8.144C27.9654 7.184 23.9974 6.70399 18.7494 6.70399C17.8534 6.768 17.2454 7.024 16.9254 7.472C16.6054 7.92 16.4454 8.72 16.4454 9.872V25.616C24.3174 25.36 28.6374 25.008 29.4054 24.56L30.0774 20.528C30.2054 20.208 30.6534 20.048 31.4214 20.048C32.2534 20.048 32.6694 20.272 32.6694 20.72C32.4134 22.576 32.2854 24.656 32.2854 26.96C32.2854 29.2 32.4134 31.248 32.6694 33.104C32.6694 33.488 32.2214 33.68 31.3254 33.68C30.4934 33.68 30.0774 33.552 30.0774 33.296L29.3094 29.168C28.5414 28.72 24.2534 28.368 16.4454 28.112V39.728C16.4454 44.592 17.0854 47.024 18.3654 47.024H23.1654C23.6774 47.024 23.9334 47.536 23.9334 48.56C23.9334 49.52 23.7414 50 23.3574 50L12.2214 49.904L2.62137 50.192C2.17337 50.192 1.94937 49.712 1.94937 48.752C1.94937 47.792 2.14137 47.312 2.52537 47.312H6.84537C7.54937 47.312 7.96537 47.184 8.09337 46.928C8.22137 46.608 8.28537 45.808 8.28537 44.528V14.288C8.28537 9.168 7.64537 6.608 6.36537 6.608H2.90937C2.14137 6.608 1.75737 6.128 1.75737 5.168C1.75737 4.144 2.10937 3.632 2.81337 3.632L12.6054 3.824H32.6694V2.288C32.6694 1.904 33.0854 1.712 33.9174 1.712C34.8134 1.712 35.2614 1.904 35.2614 2.288L35.9334 13.232Z"/>
<path d="M43.5031 50L35.9191 50.192C35.4711 50.192 35.2471 49.776 35.2471 48.944C35.2471 48.112 35.4711 47.696 35.9191 47.696H38.9911C39.6951 47.696 40.2071 47.408 40.5271 46.832C41.9991 44.4 44.9431 37.936 49.3591 27.44C53.7751 16.88 56.9431 8.88 58.8631 3.44C59.1191 2.864 59.7271 2.576 60.6871 2.576C61.7111 2.576 62.3511 2.896 62.6071 3.536C63.3751 6.736 65.6151 12.784 69.3271 21.68C73.1031 30.576 76.3991 38 79.2151 43.952C79.9831 45.488 80.6871 46.48 81.3271 46.928C81.9671 47.376 82.9591 47.6 84.3031 47.6C84.6871 47.6 84.8791 48.048 84.8791 48.944C84.8791 49.776 84.7191 50.192 84.3991 50.192L75.1831 50L64.8151 50.192C64.4311 50.192 64.2391 49.776 64.2391 48.944C64.2391 48.112 64.4311 47.696 64.8151 47.696H69.4231C70.1271 47.696 70.4791 47.408 70.4791 46.832C70.4791 46.768 68.6871 41.84 65.1031 32.048H51.7591C48.6231 39.792 47.0551 44.336 47.0551 45.68C47.0551 46.96 47.4391 47.6 48.2071 47.6H52.1431C52.6551 47.6 52.9111 48.048 52.9111 48.944C52.9111 49.776 52.7191 50.192 52.3351 50.192L43.5031 50ZM63.8551 28.784C63.6631 28.208 61.9991 23.344 58.8631 14.192H58.5751C57.0391 18.608 55.2151 23.472 53.1031 28.784H63.8551Z"/>
<path d="M132.826 3.824L141.658 3.632C142.042 3.632 142.234 4.112 142.234 5.072C142.234 5.968 142.042 6.416 141.658 6.416H138.298C137.402 6.416 136.826 6.64 136.57 7.088C135.418 9.072 134.842 23.472 134.842 50.288C134.842 50.928 134.298 51.248 133.21 51.248C132.186 51.248 131.45 51.024 131.002 50.576C118.202 35.344 107.898 22.992 100.09 13.52H99.8019C99.9939 24.848 100.186 34.32 100.378 41.936C100.378 45.264 100.858 46.928 101.818 46.928H105.658C106.042 46.928 106.234 47.44 106.234 48.464C106.234 49.424 106.042 49.904 105.658 49.904H97.6899L88.9539 50.096C88.6339 50.096 88.4739 49.648 88.4739 48.752C88.4739 47.792 88.6339 47.312 88.9539 47.312H91.2579C93.2419 47.312 94.2659 46.672 94.3299 45.392C95.2899 35.024 95.7699 22.896 95.7699 9.008C94.7459 7.792 93.8819 7.088 93.1779 6.896C92.4739 6.704 91.1619 6.608 89.2419 6.608C88.8579 6.608 88.6659 6.128 88.6659 5.168C88.6659 4.144 88.8579 3.632 89.2419 3.632L102.778 3.824C118.33 23.536 127.482 35.216 130.234 38.864H130.426C130.17 22.096 129.946 12.528 129.754 10.16C129.562 7.792 129.05 6.608 128.218 6.608H124.858C124.41 6.608 124.186 6.128 124.186 5.168C124.186 4.144 124.41 3.632 124.858 3.632L132.826 3.824Z" />
<path d="M174.709 51.248C166.901 51.248 160.437 49.168 155.317 45.008C150.197 40.848 147.637 35.152 147.637 27.92C147.637 20.624 150.389 14.576 155.893 9.776C161.397 4.976 167.957 2.576 175.573 2.576C179.285 2.576 182.933 3.504 186.517 5.36V3.728C186.517 3.28 186.901 3.056 187.669 3.056C188.501 3.056 188.917 3.28 188.917 3.728C188.917 7.76 189.237 11.952 189.877 16.304C189.941 16.496 189.813 16.688 189.493 16.88C189.237 17.008 188.821 17.072 188.245 17.072C187.669 17.072 187.317 16.816 187.189 16.304L186.421 11.216C182.837 7.824 178.709 6.128 174.037 6.128C169.429 6.128 165.461 8.112 162.133 12.08C158.869 16.048 157.237 21.008 157.237 26.96C157.237 32.912 158.965 37.872 162.421 41.84C165.877 45.744 169.941 47.696 174.613 47.696C179.285 47.696 183.701 46.32 187.861 43.568L188.341 38.096C188.341 37.584 188.789 37.328 189.685 37.328C190.581 37.328 191.029 37.552 191.029 38L190.453 50.192C190.453 50.576 190.005 50.768 189.109 50.768C188.277 50.768 187.861 50.576 187.861 50.192V48.56C183.445 50.352 179.061 51.248 174.709 51.248Z"/>
<path d="M219.962 49.904L210.362 50.192C209.914 50.192 209.69 49.712 209.69 48.752C209.69 47.792 209.882 47.312 210.266 47.312H214.586C215.29 47.312 215.706 47.184 215.834 46.928C215.962 46.608 216.026 45.808 216.026 44.528V29.264H215.93C215.994 27.344 211.482 21.168 202.394 10.736C199.898 7.792 197.978 6.32 196.634 6.32H194.426C193.914 6.32 193.658 5.904 193.658 5.072C193.658 4.176 193.85 3.728 194.234 3.728L203.354 3.824L213.338 3.728C213.722 3.728 213.914 4.144 213.914 4.976C213.914 5.808 213.754 6.224 213.434 6.224H208.634C208.634 6.352 209.434 7.376 211.034 9.296C216.346 15.632 219.802 20.432 221.402 23.696H221.69C222.65 22.096 224.602 19.44 227.546 15.728C230.49 12.016 232.154 9.776 232.538 9.008C232.986 8.176 233.21 7.536 233.21 7.088C233.21 6.576 232.954 6.32 232.442 6.32H229.754C229.434 6.32 229.274 5.904 229.274 5.072C229.274 4.176 229.498 3.728 229.946 3.728L238.874 3.824L246.458 3.728C246.906 3.728 247.13 4.144 247.13 4.976C247.13 5.808 246.874 6.224 246.362 6.224H244.634C243.482 6.224 242.49 6.576 241.658 7.28C238.522 9.904 234.938 13.488 230.906 18.032C226.938 22.512 224.698 25.648 224.186 27.44V39.728C224.186 44.592 224.826 47.024 226.106 47.024H230.906C231.418 47.024 231.674 47.536 231.674 48.56C231.674 49.52 231.482 50 231.098 50L219.962 49.904Z"/>
</svg>
</body>
body{
background: #2e4057;
display: flex;
justify-content: center;
align-items: center;
}
svg{
stroke: hsl(189, 68%, 75%);
stroke-width:1px;
fill:hsl(189, 68%, 75%, 0%);
animation: color-change 1s ease-in forwards 3.8s;
}
//每個字母的描邊動畫執(zhí)行時間和開始時間不同
path:nth-child(1){
stroke-dasharray: 246;
stroke-dashoffset: 246;
animation: show 1s linear forwards;
}
path:nth-child(2){
stroke-dasharray: 253;
stroke-dashoffset: 253;
animation: show 1.2s linear forwards .5s;
}
path:nth-child(3){
stroke-dasharray: 334;
stroke-dashoffset: 334;
animation: show 1.4s linear forwards 1s;
}
path:nth-child(4){
stroke-dasharray: 246;
stroke-dashoffset: 246;
animation: show 1.6s linear forwards 1.5s;
}
path:nth-child(5){
stroke-dasharray: 240;
stroke-dashoffset: 240;
animation: show 1.8s linear forwards 2s;
}
@keyframes show{
to{
stroke-dashoffset: 0;
}
}
@keyframes color-change{
to{
stroke: transparent;
fill:hsl(189, 68%, 75%)
}
}
js 動畫
這個就不詳細敘述了，可以使用 setTimeout 設(shè)置定時，也可以使用 requestAnimationFrame
gif
慎用。效果一般，文件不小
三方庫
lottie
Lottie 是一個適用于 Android、iOS、Web 和 Windows 的庫，它使用 Bodymovin 解析導出為 JSON 的 Adobe After Effects 動畫，并在移動設(shè)備和 Web 上原生渲染它們！可以實現(xiàn)非常炫酷的效果（看設(shè)計師的能力了）
npm i lottie-web
這個方案依賴 AE 來制作動畫效果，并且不支持使用第三方特效。
Anime.js
Anime.js 是一個輕量的JavaScript 動畫庫， 擁有簡單而強大的API?？蓪?CSS 屬性、 SVG、 DOM 和JavaScript 對象進行動畫。它很輕便，gzip壓縮完只有9kb左右。
https://github.com/juliangarnier/anime/
Typed.js
typed.js是一個類型化庫，效果是用打字機的方式顯示一段話，可以自定義任何字符串、指定顯示速度、指定是否循環(huán)等。
https://github.com/mattboldt/typed.js/
Hover.css
Hover.css 是一套基于 CSS3 的鼠標懸停效果和動畫，這些可以非常輕松的被應用到按鈕、LOGO 以及圖片等元素。所有這些效果都是只需要單一的標簽，必要的時候使用 before 和 after 偽元素。因為使用了 CSS3 過渡、轉(zhuǎn)換和動畫效果，因此只支持 Chrome、Firefox 和 Safari 等現(xiàn)代瀏覽器。
https://github.com/IanLunn/Hover
galacean
galacean 是螞蟻金服開發(fā)的視覺特效庫。需要配合專用的 IDE 和 SDK 使用。類似一個輕量級的 2D 和 3D 引擎。
個人感覺，這個工具和騰訊開發(fā)的 libPAG 類似。兩個分別應用于移動端 native 和 web 端。
theatre
動畫編輯器，有自己的 IDE，也支持用代碼編輯動畫。https://www.theatrejs.com
文章來源：http://www.zghlxwxcb.cn/news/detail-855642.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-855642.html
到了這里，關(guān)于前端實現(xiàn)動畫的幾種方式簡介的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
