加入购物车—— SVG轻松实现路径动画

·  阅读 1432
加入购物车—— SVG轻松实现路径动画

SVG轻松实现路径动画

前言

最近在学习SVG相关的内容,感叹SVG真的是太强大了。内容之多,根本不是一两篇文章能够涵盖的。所以决定还是找几个小点慢慢学习吧。

很多电商网站里,在加入购物车时都会有一个形象的动画,让宝贝以类似抛物线的轨迹飞进购物车,就像不要钱一样😂 。 像这样:

实现这种效果可能有很多方法,但是用SVG可以快速简单的实现。今天我们一块学习一下这个方法。

SVG路径

SVG中最强大的元素莫过于path了,它可以描绘机会任意的2D图形。

一个简单的路径是这样婶儿的:

<path d="M10 10 L75 10 L75 75 Z" />
复制代码

还有稍微复杂的路径:

<path d="M199.428,125.107C159.17,32.871,44.736,54.392,43.983,161.445c-0.417,58.8,54.491,80.773,91.049,104.277,35.45,22.8,60.68,53.978,64.634,67.252,3.385-13.006,31.486-45.071,64.3-67.889,35.88-24.951,91.466-45.485,91.049-104.279C354.26,53.487,237.835,36.55,199.428,125.107Z"/>
复制代码

这是一个心形,下面会用到这个路径。当然这种路径不是手动写出来的,而是用专门的软件导出的。这个就是我用PS导出来的。

path有以下这些指令:

指令 参数 描述
M(Move to) x y 起始点坐标x y
L(Line to) x y 从当前点的坐标画直线到指定点的 x y坐标
H(Horizontal line to) x 从当前点的坐标画水平直线到指定的x轴坐标
V(Vertical line to) y 从当前点的座标画垂直直线到指定的y轴坐标
C(Curve) x1 y1 x2 y2 x y 从当前点的坐标画条贝塞风线到指定点的x, y坐标,其中 x1 y1及x2, y2为控制点
S(Smooth curve) x2 y2 x y 从当前点的坐标画条反射的贝塞曲线到指定点的x, y坐标,其中x2, y2为反射的控制点
Q(Quadratic Bézier curve) x1 y1 x y 从当前点的坐标画条反射二次贝塞曲线到指定点的x, y坐标,其中x1 y1为控制点
T(Smooth Quadratic Bézier curve) x y 从当前点的坐标画条反射二次贝塞曲线到指定点的x, y坐标,以前一个坐标为反射控制点
A(Arc) rx ry x-axis-rotation large-arc-flag sweep-flag x y 从当前点的坐标画个椭圆形到指定点的x, y坐标,其中rx, ry为椭圆形的x轴及y轴的半径,x-axis-rotation是弧线与x轴的旋转角度,large-arc-flag则设定1最大角度的弧线或是0最小角度的弧线,sweep-flag设定方向为1顺时针方向或0逆时针方向
Z(Closepath) 关闭路径,将当前点坐标与第一个点的坐标连接起来

offset-path、offset-distance

两个都是CSS属性。

offset-path表示元素的运动路径;

offset-distance定义了元素在路径上运动的距离,单位是数值或百分比。

可想而知,用这两个属性就能实现路径动画了,只需改变offset-distance的值即可。

举一个栗子:

demo 🌰

See the Pen &amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;quot;https://codepen.io/_tianxia/pen/VBmBGY/&amp;amp;amp;amp;amp;quot; data-v-ba9b4902&amp;amp;amp;amp;amp;gt;SVG-二次贝塞尔曲线&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt; by Denzel (&amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;quot;https://codepen.io/_tianxia&amp;amp;amp;amp;amp;quot; data-v-ba9b4902&amp;amp;amp;amp;amp;gt;@_tianxia&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;quot;https://codepen.io&amp;amp;amp;amp;amp;quot; data-v-ba9b4902&amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;. show in codepen 点击展开

如果是心形的呢,我们让它40s之内转10圈,再来一个栗子:

demo 🌰🌰

See the Pen &amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;quot;https://codepen.io/_tianxia/pen/PBbwXd/&amp;amp;amp;amp;amp;quot; data-v-ba9b4902&amp;amp;amp;amp;amp;gt;SVG &amp;amp;amp;amp;amp;amp; CSS path&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt; by Denzel (&amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;quot;https://codepen.io/_tianxia&amp;amp;amp;amp;amp;quot; data-v-ba9b4902&amp;amp;amp;amp;amp;gt;@_tianxia&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;quot;https://codepen.io&amp;amp;amp;amp;amp;quot; data-v-ba9b4902&amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;. show in codepen 点击展开

贝塞尔曲线

那怎么模拟出抛物线的形状呢?这里想到了贝塞尔曲线,因为path可以很轻松的绘制贝塞尔曲线。 对于贝塞尔曲线其实我不是太了解,只是看着这种曲线就觉得很“性感”,而且貌似阶数越高越是性感😊。

如下面俩图:

small demosmall demo

同学们可以自行感受下,

点击展开 挂了?!那就点击这里自行前往。

于是我们可以用一个二阶贝塞尔曲线来模拟抛物线的轨迹:我们暂定三个点分别在左下角上中间左中间

这样:

只要在页面上获取到这三个点,就可以了。

又一个栗子:

demo 🌰🌰🌰

See the Pen &amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;quot;https://codepen.io/_tianxia/pen/MBbqGM/&amp;amp;amp;amp;amp;quot; data-v-ba9b4902&amp;amp;amp;amp;amp;gt;SVG-动态贝塞尔曲线&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt; by Denzel (&amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;quot;https://codepen.io/_tianxia&amp;amp;amp;amp;amp;quot; data-v-ba9b4902&amp;amp;amp;amp;amp;gt;@_tianxia&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;quot;https://codepen.io&amp;amp;amp;amp;amp;quot; data-v-ba9b4902&amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;. show in codepen 点击展开

继续添加上按钮,加点图片,就是这样的:

demo 🌰🌰🌰🌰

See the Pen &amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;quot;https://codepen.io/_tianxia/pen/djOwyY/&amp;amp;amp;amp;amp;quot; data-v-ba9b4902&amp;amp;amp;amp;amp;gt;SVG-路径动画&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt; by Denzel (&amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;quot;https://codepen.io/_tianxia&amp;amp;amp;amp;amp;quot; data-v-ba9b4902&amp;amp;amp;amp;amp;gt;@_tianxia&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;quot;https://codepen.io&amp;amp;amp;amp;amp;quot; data-v-ba9b4902&amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;. show in codepen 点击展开

总结

遗憾的是,目前只有Chrome和部分移动端浏览器(如安卓版UC和三星)支持offset-path属性😰。

除此之外,还有三个相关属性:offset-ancoroffset-rotateoffset-position 分别表示锚定的中心点、运动的角度和路径的初始位置,感兴趣的同学可自行前往学习。

参考资料

分类:
前端
标签: