CSS的motion-path属性

发布于 大漠

motion-path是CSS新增的一个属性,主要用来定义元素的动画路径。下面的示例是SVG中的路径使用语法:

.thing-that-moves {
  	motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
}

这个属性自身不会让元素动的,其主要是用来定义动画的路径。使用motion-offset属性就可以让元素动起来。这里有一个简单的示例,在@keyframes中使用了motion-offset:

.thing-that-moves {
  	motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  	animation: move 3s linear infinite;
}

@keyframes move {
  	100% { motion-offset: 100%;}
}

在这个示例中,橙色的圆圈正在沿着用CSS的motion-path绘制的路径运动(沿白色的圈旋转)。绘制的路径与SVG中的path()相同,但这不是必要的运动。

这样说,我们可以通过一些SVG的编辑软件,可以画一个时髦的路径:

motion-path

可以得到一个路径:

<path d="M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z" />

d属性后面的值就是我们需要的路径,可以直接将它作为CSS的motion-path值。

注意,在path语法中的值是不带单位。如果在SVG中使用CSS,这些坐标值将使用SVG的viewBox坐标系统。如果将运动(mition)应用到其他一些HTML元素,这些值是像素值。

还需要注意,使用一个手型的手指指向显示方向,并且它是自动旋转的,所以还需要一个方向值,那么可以使用motion-rotation来控制方向:

.mover {
  	motion-rotation: auto; /* default, faces forward */
  	motion-rotation: reverse; /* faces backward */
  	motion-rotation: 30deg; /* set angle */
  	motion-rotation: auto 30deg; /* combine auto behavior with a set rotation */
}

属性值

尽我所知,path()的值是motion-path能正常工作的唯一值。

motion-path属性应该接下以下属性值:

  • path(): 在SVG坐标系统中指定的一个路径(path())
  • url: 引用SVG中定义了ID名称的Path元素,作为一个运动路径
  • basic-shape: 根据CSS Shapes规范绘制图形当作运动路径,比如circle()ellipse()inset()polygon()Clippy是一个用来获取绘制图形值的一个很优秀的工具。
  • none: 不指定任何运动路径

这里有一些测试结果:

这里有一个示例,用事实再次证明,使用url()来访问SVG中定义path路径作为motion-path一样不会有动画效果。

使用Web Animations API

Dan Wilson探讨了一些CSS Motion Paths在未来将被使用的特性。可以通过JavaScript的Web动画API访问同样的东西。比如,假设你已定义了CSS的motion-path,仍然可以通过JavaScript的Web动画API来控制:

var ms = document.querySelectorAll('.mover');

var defaultTiming = {
  	duration: 10000,
  	iterations: Infinity,
  	fill: 'both',
  	easing: 'ease-in-out'
};

if (ms[0].style.motionOffset !== undefined) {
  	var easing = 'cubic-bezier(.645,.045,0.355,1)';
  	ms[0].animate([
  		{ motionOffset: 0, motionRotation: 'auto' },
    	{ motionOffset: '100%', motionRotation: 'auto' }
  	], defaultTiming);
} else {
  	document.documentElement.className = 'no-motionpath'
}

一些案例

浏览器兼容性

motion-path属性到写这篇文章时都还只是CSS的一个实验性的功能。如果因为浏览器对motion-path属性缺乏支持而犹豫是否在自己的项目中使用这个属性,那么你可以考虑使用GSAP这个库。Sarah也在它的教程中为你介绍了如何让浏览器支持这个属性。

Caniuse中也报道,motion-path在W3C规范中还不是正式规范,而仅仅是一份草案

有另外的实现方法吗?

Sarah Drasner写了一个SMIL,SVG原生动画效果,如何使用animateMotion让动画元素沿着SVG路径运动。它看起来像这样:

<animateMotion 
  xlink:href="#lil-guy" 
  dur="3s" 
  repeatCount="indefinite" 
  fill="freeze" 
  path="M 25,50 C 37.5,25 37.5,25 50,0 75,50 75,50 100,100 50,100 50,100 0,100 12.5,75 12.5,75 25,50 Z" />

**但SMIL已经被弃用了!**所以不推荐使用这种方法。

不过,GreenSock是另外一种被推荐使用的方式。Sarah在他的分享主题《GSAP + SVG for Power Users: Motion Along A Path》中写了一个示例:

扩展阅读

本文根据@GEOFF GRAHAM的《motion-path》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://css-tricks.com/almanac/properties/m/motion-path/

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:https://www.fedev.cn/css3/motion-path.htmlOff White X Max 90