先上结论,主要用到offset-path
和offset-distance
,这两个属性目前Safari和IE不支持,如果对兼容性要求不高的话可以使用本文介绍的这种方法。
完成动画的几种主要方法
- 使用css3的
transition
或者animation
再结合如width,height,top,left,或者translate这类的的css属性,也就是我们说的“手写动画”。 - 使用js引擎完成。如
three.js
等。
这两者相比,前者在复杂情况下做出的动画可能不够精细,而且运动轨迹基本靠盲试,后者有学习成本。所以我在项目中用到了一种新的方法:
- 给目标动画元素添加
offset-path
以设定动画轨迹,值为path(xxx),括号内为svg代码,这个在ui都是能提供svg图的(运动轨迹的svg,如模拟一个行星在椭圆轨道上运动,我们就需要一个椭圆轨道背景图的svg形式) - 然后我们需要在svg代码中提取出关键的path代码,如果svg是很"规则的形式"
如<ellipse id="path-3" cx="369.203008" cy="56.8721805" rx="369.203008" ry="56.8721805"></ellipse>
这种,我们也可以借助这个网站转换获取path代码,再将得到的path填入offset-path
的path值中 - 给目标动画元素添加
animation
,关键帧描述的属性为offset-distance
。
具体看看兼容性(截至2021.2)offset-path
![](https://i-blog.csdnimg.cn/blog_migrate/88eff9c144682b6f85b89a6ab9b99c6e.png)
offset-distance
再上我实际应用中的效果图
![](https://img-blog.csdnimg.cn/img_convert/95c2895322930585645752a8a36e859c.webp?x-oss-process=image/format,png)
两侧的黄色箭头和三个椭圆虚线上的小球都是这种动画完成的
(gif图太大可能会显示不出来,可以看下面代码自行尝试,另外打开f12我发现了两件事,一个是简书的文章页已经彻底转为了react,再就是生产环境并没有隐藏consolelog,也有可能简书用了某种插件吧)
在椭圆轨道上运动的小球css代码如下
<!-- 第一层底部曲线及两个球 -->
<div class="ellipse1"></div>
<div class="ellipse-ball ellipse1-ball ellipse-ball1"></div>
<div class="ellipse-ball ellipse1-ball ellipse-ball2"></div>
.ellipse1-ball{
position: absolute;
top: 105px;
left: 21px;
offset-path:path('M0 56.8721805a369.203008 56.8721805 0 1 0 738.406016 0a369.203008 56.8721805 0 1 0 -738.406016 0z');
}
.ellipse-ball{
width: 18px;
height: 18px;
background: url('~@/assets/imgs/index/ellipse_ball.svg');
}
.ellipse-ball1{
animation: ellipsePoint 20s linear infinite;
}
@keyframes ellipsePoint {
0% {offset-distance: 0%;}
100% {offset-distance: 100%;}
}
反着转的小球动画
@keyframes ellipsePointReverse {
0% {offset-distance: 50%;}
100% {offset-distance: -50%;}
}
可以看到这种动画的写法比之前的两种简单的不少,关键的运动轨迹交给了svg来实现,唯一的缺点就是不兼容mac电脑。不考虑苹果电脑兼容性的可以一试。
参考文章(方法是从同事那学来的,不过张鑫旭老师的文章和工具对我有更详细的指导帮助)使用CSS offset-path让元素沿着不规则路径运动
svg代码转换工具https://www.zhangxinxu.com/sp/path.html