终于有UI出来了
页面中有一个轨迹运动的动画
虽然在之前的公司，有同事写过，但是没有具体学习和研究过，只知道好像是用SVG实现
不复杂的也可以使用transform组合实现，但是效果有限

svg中的path

path用来定义路径 

<path d="M0,80 q440,-130  750,120" stroke="gray" stroke-width="2" fill="none" />

M 移动到(moveTo) x,y 路径起始点坐标
Q 二次贝塞尔曲线到 (x1 y1 x y)+

svg中的animateMotion

animateMotion用来定义动画 

<animateMotion path="M0,80 q440,-140  750,140" begin="0s" dur="30s" repeatCount="indefinite"/>

效果

小球移动
代码,此次需要用到的内容

1
2
3
4
5
6
<svg width="750" height="200" xmlns="http://www.w3.org/2000/svg">
    <path d="M0,80 q440,-130  750,120" stroke="gray" stroke-width="2" fill="none" />
    <circle cx="0" cy="0" r="40" stroke="black" stroke-width="2" fill="red">
    <animateMotion path="M0,80 q440,-140  750,140" begin="0s" dur="30s" repeatCount="indefinite"/>
    </circle>
</svg>

参考链接:http://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

本文地址： http://gehaiqing.com/2016/08/31/css-svg-animate-path/