内容简介:实现一个购物袋的 loading 动效以一个购物袋的 loading 动效为示例,一起来熟悉上手 SVG 动画。其中旋转通过 CSS 来完成,但是旋转之后圆弧缩短变成笑脸的嘴巴需要借助 SVG 来实现。
实现一个购物袋的 loading 动效
以一个购物袋的 loading 动效为示例,一起来熟悉上手 SVG 动画。
其中旋转通过 CSS 来完成,但是旋转之后圆弧缩短变成笑脸的嘴巴需要借助 SVG 来实现。
步骤一: 声明 SVG 视窗
<svg width="100" height=“100”></svg> 复制代码
指定一个宽高都为 100 像素的区域,width="100" 和 width="100px" 是等价的,当然也可以使用其他的合法单位,例如 cm、mm、em 等。
阅读器会设置一个默认的坐标系统,见下图:左上角为原点,其中水平(x)坐标向右递增,垂直(y)坐标向下递增。在没有指定的情况下,所有数值的默认单位都是像素。如下图
步骤二: 绘制购物袋
购物袋由两个部分组成,先画下面的主体:
<path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee;" /> 复制代码
任何形状都可以使用路径元素画出,描述轮廓的数据放在它的 d 属性中。
1.样式中的 fill 用来设置填充色
2.路径数据由命令和坐标构成
指令 | 说明 |
---|---|
M 20 40 | 表示移动画笔到 (20,40) |
L 80 40 | 表示绘制一条线到 (80, 40) |
A 10 10 90 0 1 70 100 | 绘制一个椭圆弧 |
圆弧命令以字母 A 开始,后面紧跟着 7 个参数,这 7 个参数分别用来表示: 1.椭圆的 x 半径和 y 半径 2.椭圆的 x 轴旋转角度 3.圆弧的角度小于 180 度,为 0;大于或等于 180 度,则为 1 4.以负角度绘制为 0,否则为 1 5.
终点的x、y坐标
接下来绘制购物袋上面的部分:
<path d="M 35 40 A 15 15 180 1 1 65 40" style="fill: none; stroke: #e9e8ee; stroke-width: 5;” /> 复制代码
上面的部分是一个半圆弧,同样用路径来画出,当然也可以使用基础形状来完成。
样式中的 stoke 和 stroke-width 分别用来设置描边色和描边的宽度。
步骤三: 绘制眼睛
使用基础形状,画两个小圆点。四个属性分别是位置坐标、半径和填充颜色。
<circle cx=“40" cy="60" r="2.5" style="fill: #fff;" /> <circle cx="60" cy="60" r="2.5" style="fill: #fff;" /> 复制代码
步骤四: 绘制嘴巴
<circle cx="50" cy="70" r="15" style="fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round;transform: rotate(280deg); transform-origin: 50% 50%; stroke-dashoffset: -23; stroke-dasharray: 42, 95;”> 复制代码
嘴巴是一段圆弧,我绘制了一个圆,然后描边了其中的一段,并且做了一个旋转,来让它的角度处于正确的位置。
1.stroke-linecap:用来定义开放路径的终结,可选 round|butt|square
2.stroke-dasharray:用来创建虚线
3.stroke-dashoffset:设置虚线位置的起始偏移值,在下一个步骤里,它会和stroke-dasharray 一起用来实现动效...
步骤五: 给嘴巴部分添加动效
@keyframes mouth { 0% { transform: rotate(-80deg); stroke-dasharray: 60, 95; stroke-dashoffset: 0; } 40% { transform: rotate(280deg); stroke-dasharray: 60, 95; stroke-dashoffset: 0; } 70%, 100% { transform: rotate(280deg); stroke-dashoffset: -23; stroke-dasharray: 42, 95; } } 复制代码
动画分为两个部分:
1.圆弧旋转
2.旋转之后缩短变形
在一个循环里,最后留有 30% 的时间保持一个停留状态。
给眼睛添加动画
两只眼睛都是沿着圆弧运动 ,例如左眼,首先用一个路径来规定它的运动轨迹:
<path id="eyeright" d="M 40 60 A 15 15 180 0 1 60 60" style="fill: none; stroke-width: 0;" /> 复制代码
然后使用 animateMotion 来设置动画:
<circle class="eye" cx="" cy="" r="2.5" style="fill: #fff;"> <animateMotion dur="0.8s" repeatCount="indefinite" keyPoints="0;0;1;1" keyTimes="0;0.3;0.9;1" calcMode="linear"> <mpath xlink:href="#eyeleft"/> </animateMotion> </circle> 复制代码
1.dur:动画的时间
2.repeatCount:重复次数
3.keyPoints:运动路径的关键点
4.timePoints:时间的关键点
5.calcMode:控制动画的运动速率的变化,discrete | linear | paced|spline 四个属性可选
6.mpath:指定一个外部定义的路径
步骤7
将不同部位的动画组合到一起
眼睛的动画是从嘴巴旋转完成开始,到嘴巴变形完成结束,因此和嘴巴的动画一样,设置了四个对应的关键时间点。 为了让衔接更顺畅,眼睛的动画开始比嘴巴变形开始稍微提前了一点点。
小结
SVG 在网页中的角色更像是类似图片一样的媒体对象,其动画也常常和 CSS 有关联,除了微软系的浏览器不支持之外,其兼容性还是相当可观的。在平时工作过程中,矢量图标的动画、轨迹动画特别适合使用 SVG 来实现。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 【Android 动画】动画详解之属性动画(三)
- 【Android 动画】动画详解之属性动画(五)
- Flutter 动画全解析(动画四要素、动画组件、隐式动画组件原理等)
- 【Android 动画】动画详解之补间动画(一)
- 系统学习iOS动画之一:视图动画
- 初识属性动画——使用Animator创建动画
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。