大同企业网站设计:使用Raphael.js创建响应性和交互式动画

2019.05.28 大同企业网站设计

146

本教程将教您如何使用JavaScript库动画SVG图像Raphael.js以及其他开源工具。大同企业网站设计当您完成本教程,您将学习如何使一个旋转风车,将扩大我们与您的响应网页设计。看起来是这样的:

大同企业网站设计

为什么使用Raphael.js?

还可以使用HTML 5画布创建动画。HTML 5画布使用位图图形,擅长处理复杂的动画,比如外层空间的恒星飞过。相反,Raphael.js使用SVG矢量图像,并被设计成与页面上的事件(如单击、悬停和拖动)无缝集成。此外,Raphael.js还提供了很好的遗留浏览器支持(包括IE7和IE8)。当您阅读本教程时,可以随意查阅Raphael的精彩文献资料随时都可以。

理解SVG

SVG代表可伸缩的矢量图形。位图图像(PNG,jpeg,gif)使用像素网格存储图像,而矢量图像是使用坐标系统描述图像的文本指令。位图图像在向上或向下缩放时会显得模糊,但是矢量图像在任何大小上看起来都是一样的。这使得他们是一个非常好的选择,与响应的网页设计和高分辨率屏幕上使用。

找到SVG图像

你可以在网上找到SVG图片。在股票图片网站上,只需搜索“矢量”图像。确保以.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中创建空白画布

我们将从创建一个空白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映像复制本教程。

 


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP