内容简介:我们首先需要理解一下我们先设置一个宽高和viewBox的尺寸是相同的,明显显示正常。当我们同比例放大或缩小时,画布上的内容也是同比例放大或缩小。
我们首先需要理解一下 viewBox
(画布上可以显示的区域)和 width/height
的关系。在canvas中我们若改变宽高,那么图像是可能发生扭曲的,但是svg不会,还是会以正常比例显示。
1、当宽高与尺寸比例相同
我们先设置一个宽高和viewBox的尺寸是相同的,明显显示正常。
<svg viewBox="0 0 200 100" width="200" height="100"> <rect width="100" height="50" fill="#7dc5ff"></rect> </svg> 复制代码
当我们同比例放大或缩小时,画布上的内容也是同比例放大或缩小。
2、当宽度比例不够时的表现
缩小宽度,这时候发现 rect
这个元素变小了,其实是画布以原始布局居中在 svg
中,其余的空间直接补充画布区域。
<svg viewBox="0 0 200 100" width="100" height="100"> <rect width="100" height="50" fill="#7dc5ff"></rect> </svg> 复制代码
3、当高度比例不够时的表现
当高度不够时也是同理。居中,补充画布区域。
<svg viewBox="0 0 200 100" width="200" height="50"> <rect width="100" height="50" fill="#7dc5ff"></rect> </svg> 复制代码
这时候,比如要做一个固定在底部的宽度100%的波浪,我们只需要将 width
设置为 100vw
,而 height
则为同比例,即1/5的宽度即可。
<svg viewBox="0 0 1000 200"></svg> 复制代码
svg{ position: absolute; bottom: 0; left: 0; width: 100vw; height: 20vw; } 复制代码
听说SVG动画被CSS动画所代替?
虽然svg元素看起来属性非常多,且复杂,但是其实都比较好理解,且目前大部分都可以放到css中定义。
rect{ width: 200px; height: 200px; x: 50px; y: 50px; fill: #000; stroke: red; } path{ d:path('M 0 0 L 100 100 Z'); } 复制代码
实践中发现d:path在css中定义时,IE版本均无法支持。
既然这些属性都可以在css中定义,那么动画做起来就so easy啦, transform
和 animation
大法用起来。
咦,听说svg自己也有做动画的属性呀,是的是的,但是SMIL已经被chrome弃用了(虽然说弃用了,但是用还是能用),chrome爸爸鼓励大家用css动画的方式来处理svg原来的动画方案。
当然,也不是说替代就替代的,我们一一看下,css动画是否可以代替原来的SMIL方案。
第一种,变动一个元素的数字属性
<svg width="300px" height="100px"> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" /> </circle> </svg> 复制代码
上面的 animate
元素的作用,翻译过来就是改变 circle
的 cx
这个属性,从0到100,动画时间5s,重复次数无限次。
翻译成css就是下面的代码,完美无误。
circle{ animation: circleMove 5s infinite; } @keyframes circleMove{ 0%{ cx: 0; } 100%{ cx: 100px; } } 复制代码
第二种,变形属性
transform
也是css的拿手好戏,想怎么变就怎么变。
<svg width="300px" height="100px"> <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation"> <animateTransform attributeName="transform" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360 100 60" repeatCount="indefinite" /> </rect> </svg> 复制代码
rect{ animation: rectMove 20s infinite; } @keyframes rectMove{ 0%{ transform: rotate(0); } 100%{ transform: rotate(360deg); } } 复制代码
第三种,颜色属性
css大哥表示太简单了,不讲了。
第四种,运动路径动画
尽管chrome46和opera33开始支持 css motion path
了,但是这一大片触目惊心的红,溜了溜了,还是先抱住SVG大哥的大腿。
svg的动画大戏
上述的几个svg动画虽然有svg的好处,但是很多情况下纯css也可以实现,但是下列这三种动画就是svg动画的拿手好戏了,需要这几个的时候祭出svg妥妥的。示例
- 描边动画
- 改变形状路径动画
- 沿着路径运动
描边动画
svg描边动画主要运用了svg特有的两个属性, stroke-dasharray
和 stroke-dashoffset
。
stroke-dasharray
: 该属性用于创建虚线:
stroke-dashoffset
:指定每个实线线段的起始偏移量。正数从路径起始点向前偏移,负数则向后。
也就是说,获取到svg元素或者path的总长度之后,我们就可以做出一个描边绘制的动画。
<svg viewBox="0 0 300 300" width="300" height="300"> <rect width="100" height="100" x="50" y="50"></rect> </svg> 复制代码
rect{ fill: transparent; stroke: #000; stroke-width: 4px; stroke-dasharray: 400 400; stroke-dashoffset: -400px; animation: strokeMove 2s infinite linear; } @keyframes strokeMove { 0%{ stroke-dashoffset: -400px; } 50%{ stroke-dashoffset: 0; } 100%{ stroke-dashoffset: 400px; } } 复制代码
stroke-dasharray: 400 400;
:描边的是一段400实线+400透明的样式。如上,我们设置的是一个周长为400的长方形,那么前面400的实线段刚好填充了整个长方形。
stroke-dashoffset: -400px;
:实线段往前偏移-400,也就是现在用来填充长方形的刚好是后面400的透明线段。改变该值就能实现一个简单的描边动画了。
描边动画其实应用很广,只要能把svg导出比较正常的路径,都可以通过 getTotalLength()
获取到长度,然后运用上面的原理,就能实现看起来很酷炫的描边效果了,比如描个logo、字形、科技效果都可以。
改变形状路径动画
svg形状都可以用path来写,例如下面的 rect
和 path
结果出来都是一个宽100高100,左上角位于(50,50)坐标点的正方形。
<svg viewBox="0 0 300 300" width="300" height="300"> <rect width="100" height="100" x="50" y="50"></rect> <path d="M 50 50 L 150 50 L 150 150 L 50 150 Z"></path> </svg> 复制代码
既然path可以在css中定义(除IE),那么就可以更改path来改变svg图片的形状,从而实现改变形状路径的动画。但是要注意一点,path的点改变前后要一致,不能多了或者少了。
<svg viewBox="0 0 300 300" width="300" height="300"> <path class="path-change"></path> </svg> 复制代码
.path-change{ fill: rgba(74,152,255,0.8); animation: pathChange 4s infinite; } @keyframes pathChange{ 0%{ d:path('M -100 100 C 200,-50 400,300 800,100 L 800 200 L -200 200 Z'); } 50%{ d:path('M -100 100 C 200,180 450,0 800,100 L 800 200 L -200 200 Z'); } 100%{ d:path('M -100 100 C 200,-50 400,300 800,100 L 800 200 L -200 200 Z'); } } 复制代码
沿着路径运动
这里的 animateMotion
定义的就是 text
中元素的动画的属性。
begin dur repeatCount path
这样我们就能实现一个元素沿着特定路径运动的动画。
<svg viewBox="0 0 300 300" width="300" height="300"> <text font-size="40" x="0" y="0" fill="pink">人 <animateMotion path="M100 50 A 20 20 0 0 1 100 200 A 20 20 0 0 1 100 50" begin="0s" dur="3s" repeatCount="indefinite"/> </text> <path d="M100 50 A 20 20 0 0 1 100 200 A 20 20 0 0 1 100 50" fill="none" stroke="#000" stroke-width="4"/> </svg> 复制代码
我们可以看到上图的人字一直是正立的状态,那么如果想要各自然地有种沿着地球转动的感觉呢,我们就需要实时改变该元素的旋转角度,这个很容易实现,只需要加上一个属性:
-
rotate
:auto;表示自动跟随路径旋转
<svg viewBox="0 0 300 300" width="300" height="300"> <text font-size="40" x="0" y="0" fill="pink">人 <animateMotion path="M100 50 A 20 20 0 0 1 100 200 A 20 20 0 0 1 100 50" begin="0s" dur="3s" repeatCount="indefinite" rotate="auto"/> </text> <path d="M100 50 A 20 20 0 0 1 100 200 A 20 20 0 0 1 100 50" fill="none" stroke="#000" stroke-width="4"/> </svg> 复制代码
小结
- 当svg的宽高比例与原画布比例不相同时,会保持 原比例居中 显示并补充空白处;
- SMIL动画 虽然已经被部分浏览器弃用,但目前还属于可使用状态,但建议如简单的属性变化,动画部分建议用css动画替代,但是 沿着特定路径动画 依然需要使用
animateMotion
,如果是简单的svg形状甚至可以直接用html+css
代替; - 描边动画 、 形状改变动画 、 沿着特定路径动画 都是目前css比较难以直接替代的一些动画操作,这几种类型的动画svg都是一把好手。
参考链接
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 【Android 动画】动画详解之属性动画(三)
- 【Android 动画】动画详解之属性动画(五)
- Flutter 动画全解析(动画四要素、动画组件、隐式动画组件原理等)
- 【Android 动画】动画详解之补间动画(一)
- 系统学习iOS动画之一:视图动画
- 初识属性动画——使用Animator创建动画
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
程序员面试宝典(第5版)
欧立奇、刘洋、段韬 / 电子工业出版社 / 2015-10 / 55.00
容提要 《程序员面试宝典(第5版)》是《程序员面试宝典》的第5 版,在保留第4 版的数据结构、面向对象、程序设计等主干的基础上,修正了前4 版近40 处错误,解释清楚一些读者提出的问题,并使用各大IT 公司及相关企业最新面试题(2014-2015)替换和补充原内容,以反映自第4 版以来两年多的时间内所发生的变化。 《程序员面试宝典(第5版)》取材于各大公司面试真题(笔试、口试、电话面试......一起来看看 《程序员面试宝典(第5版)》 这本书的介绍吧!