T: 400-6065-301
146
本教程将教您如何使用JavaScript库动画SVG图像Raphael.js以及其他开源工具。大同企业网站设计当您完成本教程，您将学习如何使一个旋转风车，将扩大我们与您的响应网页设计。看起来是这样的：
还可以使用HTML 5画布创建动画。HTML 5画布使用位图图形，擅长处理复杂的动画，比如外层空间的恒星飞过。相反，Raphael.js使用SVG矢量图像，并被设计成与页面上的事件(如单击、悬停和拖动)无缝集成。此外，Raphael.js还提供了很好的遗留浏览器支持(包括IE7和IE8)。当您阅读本教程时，可以随意查阅Raphael的精彩文献资料随时都可以。
SVG代表可伸缩的矢量图形。位图图像(PNG，jpeg，gif)使用像素网格存储图像，而矢量图像是使用坐标系统描述图像的文本指令。位图图像在向上或向下缩放时会显得模糊，但是矢量图像在任何大小上看起来都是一样的。这使得他们是一个非常好的选择，与响应的网页设计和高分辨率屏幕上使用。
你可以在网上找到SVG图片。在股票图片网站上，只需搜索“矢量”图像。确保以.svg格式传递图像。
在本教程中，我们将使用我找到的免费SVG风车。这里.
下载后风车我们需要编辑它。要做到这一点，您需要下载开源程序：Inkscape。打开Inkscape中的图像后，您将看到如下内容：
如果您正在处理自己的SVG映像，请确保您已经将所有对象(Shift+Ctrl+G)进行了分组，并且在继续之前，所有对象都已转换为路径(Shift+Ctrl+C)。
你下载的图片(风车)有两个部分，船帆和底座。我是这样做的，我把图像分成了几个部分：
(路径 → 分崩离析)或(移位+Ctrl+K).
然后使用以下方法将这些部件组合在一起：
(路径 → 联合)或(Ctrl+K).
接下来，我们需要给每个部分贴上标签。要做到这一点，请单击Sails并使用以下命令：
(Ctrl-Shift-O).
若要打开对象属性，请将id更改为帆帆，然后单击集:
对基地也这样做，给它ID。底座。接下来，在举着风车帆的圆圈中央盘旋。在右下角，您应该看到x=40.04，y=58.51(或者非常接近这个值)。这就是我们希望风车帆旋转的风车中心。
现在保存风车文件在Inkscape中，并在文本编辑器(如记事本或记事本+)中打开相同的文件。你应该看到两个物体，一个是船帆，另一个是底座。我们之前设置的id让我们知道哪一个是哪个！
之后的一切D=对象的路径。路径只是定义SVG映像的指令。例如，风车的基本指令可以翻译成英文：“移到40.15625，35.21875，然后画一条立方贝塞尔曲线到36.80697，35.21875…”。要了解更多关于路径和所有可能的说明的信息，请查看本网页.
复制每个路径并保存它，以便稍后由Raphael.js使用。还复制SVG图像的宽度和高度。
完成后，关闭Inkscape。
我们的动画将出现在网页上。创建一个index.html包含以下内容的文件：
<!DOCTYPE html> <html> <head> <title>Example</title> <script src="raphael-min.js"></script> <script src="windmill.js"></script> </head> <body> <h1>Windmill Animation</h1> <div id="windmill" style="width:20%"></div> <p> <button>Start</button> <button>Stop</button> </p> </body> </html>
这是一个基本的HTML网页，包括一个头部和一个身体。首先，我们已经链接到您可以在这里下载的raphael.js库。我们还创建了一个windmill.js文件，我们将存储所有的自定义动画代码。存储这两个文件以及index.html文件在同一个文件夹中。
带id的div风车将包含我们将创建的动画。因为我们的动画将填充div，所以我们可以使用CSS来控制div的宽度。我们还创建了两个按钮启动和停，停止来控制动画。
现在我们已经设置了这个项目，我们可以开始使用Raphael.js库来创建我们的动画风车了。打开windmill.js文本编辑器中的文件。
我们希望避免污染全局命名空间，因此我们将使用模块模式。我们的脚本被定义为一个函数，它调用自己并返回一个属性对象，这些属性可以在函数之外访问。这种结构使得干净地将脚本与页面上的事件集成起来变得很简单。
我们的脚本将包含三个功能：init, start，和stop这将创造风车，打开纺纱，并分别关闭纺纱。我们还将包括一个Options对象，它将使动态更改风车的颜色和速度变得更加容易。
var windmill=(function(){ var options={} //configuration options kept here var init=function(){ //this function will create the windmill } var start=function(){ //this function will make the windmill spin } var stop=function(){ //this function will stop the spinning } return { //allows functions to be accessed externally start: start, stop: stop, init: init, options: options } })();
我们将从创建一个空白Raphael.js画布开始，在这里我们可以绘制我们的风车。要做到这一点，我们需要弄清楚在哪里画布，以及它应该有多大。
var div = document.getElementById("windmill"); var width=div.offsetWidth; original_width=80; original_height=100; scale_factor=width/original_width; var height=original_height*scale_factor; var transformation='S'+scale_factor+','+scale_factor+',0,0'; var paper=Raphael(div, width, height);
上面的代码选择风车从我们的网页，并计算出它的宽度(像素)。如果您使用的是响应性设计，则此值将根据正在查看页面的设备而有所不同。然后，我们的脚本将使用宽度来确定缩放因子和画布的适当高度。有了这些信息，脚本创建了Raphael.js画布，在那里我们可以绘制我们的风车。我们的Raphael.js画布存储在变量中paper(您不必使用这个名称，但它是Raphael.js约定)。
Raphael.js中的缩放是使用SVG转换语法完成的。因此，我们需要创建一个转换字符串，以后可以应用到来自原始SVG文件的路径。语法如下：将路径中的x和y值按scaling_factor在坐标0，0附近。
现在我们大同企业网站设计可以创造我们的风车了！首先，我们使用前面定义的转换字符串和Raphael函数扩展路径。transformPath。这将使我们的风车更大，以适应帆布。如果我们的网页是SVG画布的两倍，那么SVG路径中的所有数字都需要加倍。然后，使用该方法很容易地将风车帆和底座添加到Raphael画布中。path.
var sails_path="m 39.991721,2.3848034 c -2.402325,0 -4.886834,22.8234656 -5.78125,32.3125006 1.559438,-1.25501 3.623713,-1.96875 5.78125,-1.96875 2.157508,0 4.128063,0.71374 5.6875,1.96875 -0.894416,-9.489035 -3.285189,-32.3125006 -5.6875,-32.3125006 z m -8.84375,37.6875006 c -0.01814,-0.01814 -3.156905,2.265549 -5.40625,3.90625 -12.759299,9.306741 -19.6959742,15.194375 -19.7187502,16.84375 -0.00281,0.254407 0.037591,0.41113 0.375,0.5 0.2095268,0.05526 1.1092743,0.09153 1.625,0 3.4076532,-0.604525 11.3291102,-3.663405 22.5312502,-8.625 3.031875,-1.34288 6.006038,-2.654035 6.15625,-2.75 0.108257,-0.06917 0.153269,-0.08571 -0.28125,-0.28125 -2.460656,-1.108215 -4.337423,-3.48104 -5,-6.09375 -0.257428,-1.01479 -0.367334,-2.041454 -0.28125,-2.9375 0.02728,-0.297763 0.0084,-0.554626 0,-0.5625 z m 17.71875,0 c -0.0057,0.0084 -0.02433,0.179421 0,0.375 0.05849,0.457859 0.09011,1.76253 0,2.28125 -0.528943,3.050279 -2.4347,5.511272 -5.21875,6.84375 -0.228016,0.1091 -0.375,0.25122 -0.375,0.28125 0,0.12456 9.465744,4.32391 14.3125,6.34375 4.84905,2.020822 8.710951,3.469019 11.5625,4.34375 1.346636,0.413077 2.252525,0.69604 3.40625,0.875 0.252592,0.03909 0.803994,-0.04525 1.03125,-0.09375 0.327639,-0.07029 0.510563,-0.238482 0.46875,-0.5 -0.316983,-1.98232 -8.565632,-8.782191 -23.5,-19.5 -0.934162,-0.67042 -1.680528,-1.258198 -1.6875,-1.25 z"; var base_path="m 40.141329,35.21641 c -3.34928,0 -6.064411,2.715131 -6.064411,6.064408 0,3.349294 2.715131,6.064426 6.064411,6.064426 3.349293,0 6.064425,-2.715132 6.064425,-6.064426 0,-3.349277 -2.715132,-6.064408 -6.064425,-6.064408 z m 3.221733,14.592499 c -0.0028,-0.0084 -0.114859,0.02433 -0.284126,0.09461 -0.661381,0.276239 -1.854642,0.470145 -3.032212,0.473788 -0.986251,0.0028 -1.324041,-0.0679 -2.179399,-0.284112 -0.56499,-0.142831 -1.025646,-0.206504 -1.042321,-0.18952 -0.07185,0.07395 -2.708241,45.832308 -2.653185,46.051689 0.0336,0.133988 0.3576,0.550704 0.758053,0.947556 1.040055,1.030712 2.295417,1.642517 3.885026,1.895134 0.800386,0.12711 2.487074,0.02413 3.316479,-0.189521 1.504675,-0.387599 3.023439,-1.275671 3.695506,-2.274147 L 46.110995,95.765857 44.784408,72.834768 C 44.035634,60.196617 43.365296,49.819242 43.363062,49.808923 z"; var sails_path_scaled=Raphael.transformPath(sails_path, transformation); var base_path_scaled=Raphael.transformPath(base_path, transformation); var base=paper.path(base_path_scaled); base.attr({fill: options.base_color, "stroke-width": 0}); sails=paper.path(sails_path_scaled); sails.attr({fill: options.sail_color, "stroke-width": 0});
我们使用脚本开头设置的选项设置默认颜色。
var options={}; options.sail_color='skyblue'; options.base_color='gray'; options.time=3000;
我们使用以下方法将这些值应用于每个元素attr而fill property。我们还使用stroke-width财产。attr是Raphael.js库中最强大的方法之一。你可以用它来改变一个元素的不透明度，改变它的位置，给它一个网址等等。您可以看到attr属性本节文件。
要激活元素，我们只需为Raphael提供一组新的attr属性，该属性描述元素的最终状态。例如，我们可以指定元素呈现新的颜色或移动到新的位置。接下来，我们告诉Raphael这个过渡需要多长时间，以及使用什么样的宽松公式(例如，这种转变是否随着时间的推移是恒定的)。
在我们的例子中，我们把一个变换应用到将它旋转360度的元素上。在转换语法中，即“R 360，…”然后是旋转中心的坐标。然而，虽然Raphael和Inscape对x值使用相同的坐标轴，但对y值使用相反的轴，如下图所示：
因此，要将y值转换为Raphael形式，我们必须从Inkscape画布的高度减去Inkscape y值。x和y值也需要根据我们的缩放因子进行缩放或缩小。我们在动画中添加时间，使用线性放松公式，并无限地重复动画。我们的动画现在可以使用animate方法。
var center_x=(40.04)*scale_factor; var center_y=(original_height-(58.51))*scale_factor; var position='R'+360+', '+center_x+', '+center_y; var anim=Raphael.animation({transform: position}, options.time, 'linear').repeat(Infinity); sails.animate(anim);
控件很容易停止动画。stop方法。然而，这样做会使帆处于部分旋转状态。如果我们重新启动动画，一切都会不正常。例如，如果帆已经旋转180度，动画到360度旋转在同一时间内会使动画显示两倍的速度！
因此，我们需要在不改变帆的位置的情况下，将帆上的Transform属性重新设置为空白。为了做到这一点，我们利用了transformPath方法在我们缩放地图时使用。它允许我们获得已被转换的路径的原始路径。然后，我们可以用新的原始路径更新SEAL，并将Transform属性设置为空。
sails.stop(); var current_path=Raphael.transformPath(sails.attr('path'), sails.attr('transform')) sails.attr({path: current_path, transform: ''});
最后，我们只想在动画运行时停止动画，当动画停止时才能启动动画。因此，我们使用变量跟踪动画的状态。spinning。然后，我们检查这个值，以确保它是可以启动和停止风车。这是我们在启动风车时使用的代码：
if (spinning){return}else{spinning=true}
现在是有趣的部分！我们可以添加我们的动画到我们的网页，并使其互动。我们需要做三件事：
1. 初始化风车
windmill.init()
2. 。这应该在加载文档之后发生。您可以动态地更改任何风车属性，如
windmill.options.sail_color, windmill.options.base_color
3. ，或
windmill.options.time
4. 在初始化地图之前。
5. 打电话
windmill.start()
6. 当单击“开始”按钮时。
7. 打电话
windmill.stop()
8. 当单击“停止”按钮时。
有许多方法可以做到这一点，但是一个易于阅读的、没有jQuery的实现如下所示：
<!DOCTYPE html> <html> <head> <title>Example</title> <script src="raphael-min.js"></script> <script src="windmill.js"></script> <script> function pageLoaded(){ windmill.init(); } </script> </head> <body onLoad="pageLoaded()"> <h1>SVG Animation</h1> <div id="windmill" style="width:20%"></div> <p> <button onClick="windmill.start()">Start</button> <button onClick="windmill.stop()">Stop</button> </p> </body> </html>
注：使用onClick, onLoad，内联样式并不是大型项目的最佳实践，但有助于保持这个示例的简洁性和易读性。
我希望本教程能让您对如何在项目中使用Raphael.js感到兴奋。为了了解更多，我鼓励您在演示中四处游玩，您可以尝试：
1. 扭转了帆旋转的方向。
2. 调整脚本，以便在一个页面上动态创建多个风车。
3. 使用自己的SVG映像复制本教程。
热门分享
最新文章
随机推荐
