什麼是CSS motion path模組?這篇文章和大家一起詳細了解下CSS motion path模組,談談它的用法,介紹一下使用該模組如何製作簡單和複雜的路徑動畫。
CSS 中有一個很有趣的模組 -- CSS Motion Path Module Level 1,翻譯過來也就是運動路徑。本文將對motion path 一探究竟,透過本文,你可以了解到:
什麼是 CSS Motion Path 運動路徑?利用這個規範規定的屬性,我們可以控制元素按照特定的路徑進行位置變換的動畫。並且,這個路徑可以是非常複雜的一條路徑。
在進一步介紹 CSS Motion Path 之前,我們先來看看使用傳統的 CSS 的能力,我們要如何實現路徑動畫。
在之前,我們希望將物件從A 點直線運動到B 點,通常而言可以使用 transform: translate()
、top | left | bottom | right
或是margin
之類的可以改變物體位置的屬性。
簡單的一個Demo:
<div></div>
div { width: 60px; height: 60px; background: #000; animation: move infinite 1s alternate linear; } @keyframes move { 100% { transform: translate(100px, 100px); } }
對於簡單的從A 點直線運動到B 點的效果如下:
transform-origin,讓父元素進行了一個
transform: rotate() 的運動帶動了子元素的小球:
<div class="g-container"> <div class="g-ball"></div> </div>
.g-container { position: relative; width: 10vmin; height: 70vmin; transform-origin: center 0; animation: rotate 1.5s infinite alternate; } .g-ball { position: absolute; width: 10vmin; height: 10vmin; border-radius: 50%; background: radial-gradient(circle, #fff, #000); bottom: 0; left: 0; } @keyframes rotate { 100% { transform: rotate(90deg); } }
CSS Motion Path。
:接收一個SVG 路徑(與SVG 的path、CSS 中的clip-path 類似),指定運動的幾何路徑
:控制目前元素基於
offset-path 運動的距離
:指定
offset-path 的初始位置
:定義沿著
offset-path 定位的元素的錨點。這個也算好理解,運動的元素可能不是一個點,那麼就需要指定元素中的哪個點附著在路徑上進行運動
:定義沿
offset-path 定位時元素的方向,說人話就是運動過程中元素的角度朝向
<div></div>
div { width: 60px; height: 60px; background: linear-gradient(#fc0, #f0c); offset-path: path("M 0 0 L 100 100"); offset-rotate: 0deg; animation: move 2000ms infinite alternate ease-in-out; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
offset-path 接收一個SVG 的path 路徑,這裡我們的路徑內容是一條自訂路徑
path("M 0 0 L 100 100") ,翻譯過來就是從
0 0 點運動到
100px 100px 點。
offset-path 接收一個 SVG 路徑,指定運動的幾何路徑。與SVG 的path、CSS 中的clip-path 類似,對於這個SVG Path 還不太了解的可以戳這裡先了解下SVG 路徑內容:SVG 路徑
我們會得到如下結果:透過控制元素的offset-distance 從
0% 變化到
100% 進行元素的路徑動畫。
div { // 只改变运动路径,其他保持一致 offset-path: path("M 0 0 L 100 0 L 200 0 L 300 100 L 400 0 L 500 100 L 600 0 L 700 100 L 800 0"); animation: move 2000ms infinite alternate linear; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
这里最主要还是运用了 path 中的 L
指令,得到了如下图这样一条直线路径:
最终的效果如下,与利用 transform: translate()
添加多个关键帧类似:
完整的 Demo :CodePen Demo -- CSS Motion Path Demo
地址:https://codepen.io/Chokcoco/pen/gOgqoem
上面的运动轨迹都是由直线构成,下面我们看看如何使用 CSS Motion Path 实现曲线路径动画。
其实原理还是一模一样,只需要在 offset-path: path()
中添加曲线相关的路径即可。
在 SVG 的 Path 中,我们取其中一种绘制曲线的方法 -- 贝塞尔曲线,譬如下述这条 path,其中的 path 为 d="M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80"
:
<svg width="400" style="max-width:90%" xmlns="http://www.w3.org/2000/svg"> <path d="M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80" stroke="black" fill="transparent"/> </svg>
对应这样一条连续的贝塞尔曲线:
将对应的路径应用在 offset-path: path
中:
<div></div>
div:nth-child(2) { width: 40px; height: 40px; background: linear-gradient(#fc0, #f0c); offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80'); } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
可以得到如下运动效果:
可以看到,元素是沿着贝塞尔曲线的路径进行运动的,并且,由于这次没有限制死 offset-rotate
,元素的朝向也是跟随路径的朝向一直变化的。(可以联想成开车的时候,车头一直跟随道路会进行变化的,带动整个车身的角度变化)
完整的 Demo :CodePen Demo -- CSS Motion Path Demo
地址:https://codepen.io/Chokcoco/pen/gOgqoem
OK,那么接下来,我们再看看 offset-anchor
如何理解。
还是上述的 DEMO,我们把小正方形替换成一个三角形,并且把运动的曲线给画到页面上,像是这样:
其中,三角形是通过 clip-path
实现的:
width: 40px; height: 40px; clip-path: polygon(0 0, 100% 50%, 0 100%); background: linear-gradient(#fc0, #f0c);
通常而言,沿着曲线运动的是物体的中心点(类比 transform-origin
),在这里,我们可以通过 offset-anchor
改变运动的锚点,譬如,我们希望三角形的最下方沿着曲线运动:
.ball { width: 40px; height: 40px; clip-path: polygon(0 0, 100% 50%, 0 100%); offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80'); offset-anchor: 0 100%; background: linear-gradient(#fc0, #f0c); animation: move 3000ms infinite alternate linear; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
经过实测,Can i use 上写着 offset-anchor
属性的兼容性在为 Chrome 79+、Firefox 72+,但是实际只有 Firefox 支持,Chrome 下暂时无法生效~
完整的 Demo :CodePen Demo -- CSS Motion Path offset-anthor Demo
地址:https://codepen.io/Chokcoco/pen/poRGZeE
OK,上面我们基本把原理给过了一遍,下面我们就看看,运用 Motion Path,可以在实践中如何运用。
利用运动路径,我们可以制作一些简单的按钮点击效果。在之前,我在 CodePen 上见到过这样一种按钮点击效果:
其原理是运用了 background-radial
去生成每一个小圆点,通过控制 background-position
控制小圆点的位移
详细的 Demo 代码:CodePen Demo -- Bubbly button (Design by Gal Shir)
地址:https://codepen.io/Chokcoco/pen/bGGMLdd
但是小圆点的运动路径基本上都是直线,运用本文的 Motion Path,我们也可以实现一些类似的效果,核心代码如下,HTML 这里我们使用了 Pug
模板,CSS 使用了 SASS
:
.btn -for(var i=0; i<60; i++) span.dot
.btn { position: relative; padding: 1.5rem 4.5rem; } .btn .dot { position: absolute; width: 4px; height: 4px; @for $i from 1 through $count { &:nth-child(#{$i}) { top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0) rotate(#{360 / $count * $i}deg); } } &::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 4px; border-radius: 50%; offset-path: path("M0 1c7.1 0 10.7 2 14.3 4s7.1 4 14.3 4 10.7-2 14.3-4 7.2-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4 10.7-2 14.3-4 7.1-4 14.3-4 10.7 2 14.3 4 7.1 4 14.3 4"); offset-distance: 0; } } .btn.is-animating:active .dot:nth-child(4n+1)::before { animation: dot var(--animation-time) var(--animation-timging-function); } .btn.is-animating:active .dot:nth-child(4n+2)::before { border: 1px solid var(--color-primary); background: transparent; animation: dot var(--animation-time) var(--animation-timging-function) 0.1s; } .btn.is-animating:active .dot:nth-child(4n+3)::before { animation: dot var(--animation-time) var(--animation-timging-function) 0.2s; } .btn.is-animating:active .dot:nth-child(4n)::before { border: 1px solid var(--color-primary); background: transparent; animation: dot var(--animation-time) var(--animation-timging-function) 0.3s; } @keyframes dot { 0% { offset-distance: 0%; opacity: 1; } 90% { offset-distance: 60%; opacity: .5; } 100% { offset-distance: 100%; opacity: 0; } }
别看代码多有一点点复杂,但是不难理解,本质就是给每个子元素小点点设置同样的 offset-path: path()
,给不同分组下的子元素设定不同的旋转角度,并且利用了动画延迟 animation-delay
设定了 4 组同时出发的动画。
这里我们的轨迹 path 不是直线,效果如下:
完整的程式碼:CodePen Demo -- Button Animation with CSS Offset Paths
位址:https://codepen.io/Chokcoco/pen/xxgMPzJ
這個也是非常實用的,現在我們可以完全利用CSS Motion-Path 實作地圖上的尋路動畫:
該Demo 源自Ahmad Emran,完整的程式碼:CodePen Demo -- CodePen Home Animation with offset-path | Only Using CSS & HTML
網址:https://codepen.io/ahmadbassamemran/pen/bXByBv
#又或者,我們利用Path 能繪製任意路徑的特性,實現各種我們想要的路徑,譬如加入購物車的拋物線,或者各類運動軌跡,都不在話下,這裡再提供一個Demo:
CodePen Demo -- CSS Motion Path offset-path animation
#「網址:https://codepen.io/Chokcoco/pen/dyNaZea
來看看Motion-Path 目前的相容性如何?截止至 2021-04-27。
Can i Use - Motion-Path:
目前而言,除去IE 瀏覽器,就等待Safari 何時能夠相容了,具體是否使用,也需要根據目標群體瀏覽器使用情況進行取捨。
好了,本文到此結束,介紹了運動路徑動畫Motion Path,並且利用它實現了一些以往無法簡單實現的路徑動畫效果,希望對你有幫助:)
本文轉載自:https://segmentfault.com/a/1190000039916159
作者:chokcoco
#更多程式相關知識,請造訪:程式設計影片! !
以上是什麼是CSS motion path模組?如何製作運動路徑動畫?的詳細內容。更多資訊請關注PHP中文網其他相關文章!