SVG交互设计—路径动画

首页 / SVG交互🎠 / 正文

案例演示

1.在Ai中绘制一个多边形和一条曲线

2.导出svg代码

3.删除空白编组,给多边形添加一个编组后添加animateMotion动画

<animateMotion path="路径参数" begin="click" dur="3s" free="freeze"></animateMotion>

4.保存html文件后打开浏览器会发现多边形并没有按我们预期的效果进行移动,这是因为svg移动的中心点是Ai画板中矩形的左上角,因此为了让多边形按照我们预设的轨迹移动,可以将矩形的中心点放置在Ai画板左上角,然后给矩形做一个遮罩;或者同时将线条的上端与多边形中心点和Ai画板左上角重合,这样就能完美实现按轨迹移动。

5.如果按照第二种方法来做,接下来就按照需要利用 transform="translate" 来对移动中心点进行移动(移动中心可以在Ai中画一个矩形确当)

6.同时为了让多边形看起来不是十分生硬的移动,我们还可以用 rotate="auto" 给多边形设置自动角度变化,

SVG
打赏
评论区
头像
    头像
    taniscda
      

    66666