<animate attributeName=“r” from=“200” to=“50”
begin=“4s” dur=“2s” repeatCount=“2”>
1.3、animateColor
控制颜色动画,animate也可以实现这个效果,所以该属性目前已被废弃。
1.4、animateTransform
实现transform变换动画效果,与css3的transform变换类似。实现平移、旋转、缩放等效果。
使用语法:
<animateTransform attributeName=“transform” type=“scale”
from=“1.5” to=“0”
begin=“2s” dur=“3s”
repeatCount=“indefinite”>
-
repeatCount:重复次数,设置为 indefinite 表示无限循环,一直执行。
-
type:添加 transform 变换类型。
-
eg:绘制一个半径为200的圆,4秒之后开始缩放,在2秒内从1.5缩小到0倍。
<animateTransform attributeName=“transform” begin=“4s”
dur=“2s” type=“scale” from=“1.5” to=“0”
repeatCount=“indefinite”>
1.5、animateMotion
可以定义动画路径,让SVG各个图形,沿着指定路径运动。
使用语法:
<animateMotion
path=“M 0 0 L 320 320”
begin=“4s” dur=“2s”>
-
path:定义路径,使用语法与《HTML5(八)——SVG 之 path 详解》path的d属性一致。
-
begin:延迟时间。
-
dur:动画执行时间。
eg:绘制一个半径为10的圆,延迟4秒从左上角运动的右下角。
<animateMotion
path=“M 0 0 L 320 320”
begin=“4s” dur=“2s”
实际制作动画的时候,动画太单一不酷,需要同时改变多个属性时,上边的四种元素可以互相组合,同类型的动画也能组合。以上这些元素虽然能够实现动画,但是无法动态地添加事件,所以接下来我们就看看 js 如何制作动画。
二、JavaScript 控制
===============
上篇文章我们介绍js可以操作path,同样也可以操作SVG的内置形状元素,还可以给任意元素添加事件。
给SVG元素添加事件方法与普通元素一样,可以只用on+事件名 或者addEventListener添加。
eg:使用SVG绘制地一条线,点击线条地时候改变 x1 ,实现旋转效果。
<line id=“line” x1=“100” y1=“100”
x2=“400” y2=“300”
stroke=“black” stroke-width=“5”>
js制作的SVG动画,主要利用 requestAnimationFrame 来实现一帧一帧的改变。
我们上述制作的 SVG 图形、动画等,运行在低版本IE中,发现SVG只有IE9以上才支持,低版本的并不能支持,为了兼容低版本浏览器,可以使用 VML ,VML需要添加额外东西,每个元素需要添加 v:元素,样式中还需要添加 behavier ,经常用于绘制地图。由于使用太麻烦,所以我们借助 Raphael.js 库。
三、Raphaël.js (拉斐尔)
==================
Raphael.js是通过SVG/VML+js实现跨浏览器的矢量图形,在IE浏览器中使用VML,非IE浏览器使用SVG,类似于jquery,本质还是一个javascript库,使用简单,容易上手。
使用之前需要先引入Raphael.js库文件。cdn的地址为:
https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js
3.1、创建画布
Rapheal有两种创建画布的方式:
第一种:浏览器窗口上创建画布
创建语法:
var paper = Raphael(x,y,width,height)
x,y是画布左上角的坐标,此时画布的位置是绝对定位,有可能会与其他html元素重叠。width、height是画布的宽高。
第二种:在一个元素中创建画布
创建语法:
var paper = Raphael(element, width, height);
_element是_元素节点本身或ID width、height是画布的宽度和高度。
3.2、绘制图形
画布创建好之后,该对象自带SVG内置图形有矩形、圆形、椭圆形。他们的方法分别为:
paper.circle(cx, cy, r); // (cx , cy)圆心坐标 r 半径
paper.rect(x, y, width, height, r); // (x,y)左上角坐标 width宽度 height高度 r圆角半径(可选)
paper. ellipse(cx, cy, rx, ry); // (cx , cy)圆心坐标 rx水平半径 ry垂直半径
eg:在div中绘制一个圆形,一个椭圆、一个矩形。
运行结果如下:
除了简单图形之外,还可以绘制复杂图形,如三角形、心型,这时就使用path方法。
使用语法:paper.path(pathString)
pathString是由一个或多个命令组成,每个命令以字母开始,多个参数是由逗号分隔。
eg:绘制一个三角形。
let sj = paper.path(“M 0,0 L100,100 L100,0 ‘Z’”)
还可以绘制文字,如果需要换行,使用 \n 。
文字语法:paper.text(x,y,text)
(x,y)是文字坐标,text是要绘制的文字。
3.3、设置属性
图形绘制之后,我们通常会添加stroke、fill、stroke-width等让图形更美观,Raphael使用attr给图形设置属性。
使用语法:circle.attr({“属性名”,“属性值”,“属性名”,“属性值”,…})
如果只有属性名没有属性值,则是获取属性,如果有属性值,则是设置属性。
注意:如果只设置一个属性时,可以省略‘{}’。如:rect.attr(‘fill’,‘pink’)
eg:给上边的矩形添加边框和背景色。
#### 最后==
就答题情况而言,第一问100%都可以回答正确,第二问大概只有50%正确率,第三问能回答正确的就不多了,第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法,都是一些可能会遇到的场景,而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了,希望大家通过此文了解js一些特性。
并祝愿大家在新的一年找工作面试中胆大心细,发挥出最好的水平,找到一份理想的工作。