乐趣区

关于html:使用offsetpath实现自定义路径动画

jiezi

很多时候美工提供的效果图，对某个点的静止轨迹并不是一个惯例直线，这时候能够应用 offset-path 实现点的静止轨迹。

例如这张图里，要实现绿色点沿着红色曲线运动。

html 局部

<div class="move-box">
   <div class="dot"></div>
</div>

css 局部

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

.move-box{
    width: 80%;
    height: 1000px;
    margin: 50px auto;
    border: 1px solid black;
    position: relative;
    /* 背景图只是用来演示静止轨迹是否正确 */
    background: url(files/leaf.png) no-repeat left top;
}
.dot{
    position: absolute;
    left: 38px;
    top: 104px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: green;
    box-shadow: 0 0 20px green;
    offset-path: path("M44.500,162.500 C44.500,162.500 89.756,180.432 135.500,145.500 C181.244,110.568 188.925,108.900 199.500,73.500 C210.075,38.100 204.689,3.134 270.500,17.500 C336.311,31.866 405.804,-10.398 429.500,4.500 C453.196,19.398 510.841,47.341 531.500,73.500 C552.159,99.659 529.723,58.407 602.500,31.500 C675.277,4.593 692.423,6.276 704.500,40.500 C716.577,74.724 710.319,92.353 711.500,122.500 C712.681,152.647 689.619,223.416 680.500,260.500 C671.381,297.584 529.438,204.141 559.500,324.500 C589.562,444.859 503.852,697.103 614.500,521.500 C725.148,345.897 681.020,258.038 717.500,319.500 C753.980,380.962 779.594,527.618 702.500,596.500 C625.406,665.382 412.897,742.971 378.500,639.500 C344.103,536.029 401.155,541.987 422.500,415.500 C443.845,289.013 370.529,186.899 485.500,172.500 C600.471,158.101 688.010,121.886 634.500,113.500 C580.990,105.114 610.507,137.029 492.500,112.500 C374.493,87.971 364.275,43.495 312.500,119.500 C260.725,195.505 225.342,182.297 165.500,301.500 C105.658,420.703 110.850,569.542 61.500,548.500 C12.150,527.458 44.798,372.481 12.500,317.500 C-19.798,262.519 26.643,163.161 44.500,162.500 Z");
    animation: move 30s linear infinite;
}

这里须要留神的是：

  1. .dot的 left 和top的值，是以后点的地位绝对于静止轨迹 最左侧 和最顶部 的地位；
  2. 无论 .dot 的尺寸如何，它的静止绝对地位是 物体的中心点 ，所以不须要对.dot 做居中的偏移。
  3. offset-path的值的获取有多种办法，思考到各种 ps 版本的问题，比拟靠谱的方法是：用钢笔工具勾出门路，而后“文件 – 导出 – 门路到 Illustrator”，存为 .ai 格局，在 illustrator 里保留为 svg，记事本关上这个svg 文件。offset-path的值即为 svg 里path的值。当然，这个交给美工来做就能够了，他们比拟纯熟。
退出移动版