snap.svg.js

snap.svg.js"/>

snap.svg.js

snap.svg.js

去年，我向您展示了如何使用Snap.svg库创建分辨率独立的信息图 。 Snap是一个JavaScript库，旨在简化SVG的使用。

虽然我们取得了不错的成绩，但我们的创作主要是静态绘画，没有任何真实的花哨。

今天，我将向您展示如何在创建动画SVG情人节爱心卡片时实现一些酷炫的效果和动画。 您还将学习如何合并Google的网络字体以及SVG绘图和一些高级文本操作。

虽然在许多图形程序中创建静态SVG相对简单，但是Snap.svg是创建动态，交互式SVG的最佳方法之一。 我们将介绍一些您应该能够应用于许多不同应用程序的技术。

让我们开始吧。

首先，打开您喜欢的编辑器并创建一个新HTML文档。 然后，我们添加对两种Google网络字体和Snap.svg库的引用。

我们将接下来的3行放置在head标签内。 这为我们设置了Snap，并包含了两个Google字体。

<link href='=Niconne' rel='stylesheet' type='text/css'>
<link href='=Oleo+Script' rel='stylesheet' type='text/css'>
<script src=".svg/0.3.0/snap.svg-min.js">
</script>

现在，在body标签内，我们创建一个script标签，并在其中添加以下代码：

window.onload = function () {var card = Snap(600, 400);
}

windows.onload函数可确保在执行任何JavaScript之前已完全加载页面。 card变量代表我们的SVG画布，其width和height设置为600和400像素。

<!-- SVG Heart Shape --><svg version="1.1" id="heart" xmlns="" xmlns:xlink="" x="0px" y="0px"width="300px" height="200px" viewBox="0 0 300 200" enable-background="new 0 0 300 200" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M149.95,43.749C111.115-25.583,0.729-9.406,0.002,71.063c-0.402,44.195,52.563,60.716,87.829,78.384c34.196,17.135,58.534,40.574,62.347,50.553c3.266-9.777,30.373-33.88,62.028-51.032c34.612-18.755,88.231-34.189,87.829-78.385C299.304-10.087,186.998-22.818,149.95,43.749z"/></svg>

接下来，我们将上面的原始SVG代码放在script标签下面。 这是心脏形状的SVG路径，稍后我们将使用它。 我使用Inkscape创建路径数据。 然后，我们移回script标记内部，并将以下代码行放置在card变量下方。

// Utilitiesvar dropShadow = card.paper.filter(Snap.filter.shadow(0, 2, 3))var bgGradient = card.paper.gradient("r(0.5, 0.5, 0.5)#EE2C34-#821D2D");var barGradient = card.paper.gradient("l(0, 0.5, 1, 0.5)#00ADEF-#EC008B:75");

这些是一些实用程序：阴影滤镜和两个渐变（一个径向和一个线性）。 在下面的代码中，我们将需要它们。

现在，我们准备开始构建实际的卡。 我们首先添加温暖的红色森伯斯特背景。

// Card's Backgroundvar background = card.paper.rect(0, 0, 600, 400).attr({fill: bgGradient, stroke: "none"})var rays = card.circle(300, 200, 300).attr({fill: "none",stroke: "red",strokeWidth: 580,strokeDasharray: "20 20",opacity: 0.2});

我们创建一个矩形，并用我们已经定义的径向渐变填充它。 接下来要做的是一束从卡的中心散开的光线。 这似乎很棘手，但是由于有一个小的笔画技巧，我们将很容易实现该效果。

首先，我们创建一个带有红色笔触的圆并将fill设置为“ none”，然后，为了模拟光线的影响，我们将strokeWidth设置为极刻度（填充整个画布），并将strokeDasharray属性的值设置为“ 20” 20英寸（虚线）。

好。 现在已设置好舞台！ 让我们添加演员。

// Hearts ShapesSnap.select("#heart").appendTo(card);var heartLeft = Snap.select("path").attr({fill: "#00ADEF",  filter: dropShadow, transform: "t50,80",opacity: 0.9}).insertAfter(rays);var heartRight = heartLeft.clone().attr({fill: "#EC008B", filter: dropShadow,transform: "t250,80", opacity: 0.9});

现在，我们需要将SVG代码放置在body标签的末尾。 首先，我们通过ID #heart选择它，并将其附加到画布上。 然后，我们选择实际路径，为其指定所需的属性，并确保将其插入到光线之后（这意味着它们上方）。 接下来，我们通过克隆第一个心形并更改fill和transform属性来创建第二个心形。

我们有两个可爱的心，现在我们想在它们上放置文本“ I LOVE U”。 在这里，我们将调用Google的网络字体“ Oleo Script”。

// Hearts Textsvar iuText = card.paper.text(185,200, ['I','U']).attr({fill: "#B5DD25", fontFamily: "Oleo Script", fontSize: "72px", filter: dropShadow,opacity: 0}).animate({opacity: 1}, 2000);iuText.select("tspan:nth-child(2)").attr({dx: "160px"});var loveText = card.paper.text(290,85, ["L", "O", "V", "E"]).attr({fill: "#B5DD25", fontFamily: "Oleo Script", fontSize: "24px", filter: dropShadow,opacity: 0}).animate({opacity: 1}, 2000);loveText.selectAll("tspan").attr({x: 290, dy: "1.2em"});

文本的第一块创建两个字符串“ I”和“ U”。 默认情况下，它们将它们放置在一起，但是我们希望它们分开。 我们通过选择“ U”字符串并将其移开160个像素（使用dx属性）来实现。

第二个文本创建四个字符串：一个字符串用于“ love”单词的每个字母。 最后一行代码通过选择每个字母并为x赋予一个相同的坐标，并将dy属性设置为“ 1.2em”，使文本垂直显示。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

现在，该到我们的卡片底部了。

var ribbon = card.paper.rect(0, 300, 600, 70).attr({fill: "#6F2570", filter: dropShadow});var bar = card.paper.rect(0, 300, 600, 10).attr({fill: barGradient});

在这里，我们创建一个功能区，顶部带有一个栏。 我们将阴影效果应用到功能区，并用线性渐变填充条形，其颜色与心脏形状的颜色匹配。 接下来我们要添加的是功能区上方的很酷的旋转文本。 这次，我们将使用Google的网络字体“ Niconne”。

// Rotating Wish TextsetTimeout(function(){var wishText = "Happy Valentine's Day \u2763";  // create the wish textvar charsGroup = card.g();  // create a group for the individual charactersvar charsArray = wishText.split('');  // split the wish text to characters var wishTextChars = charsGroup.text(110, 355, charsArray).attr({  // create a text element with an individual string for each characterfill: "#D6DF23",fontFamily: "Niconne", fontSize: "42px",filter: dropShadow,opacity : 1, });var singleChars = charsGroup.selectAll("tspan").attr({opacity: 0});  // select all strings/characters and hide them initiallyfunction charsAnimation( element ) {  // a function for animating each characterSnap.animate(0,1, function( value ) {element.attr({ opacity: value, rotate: (value * 360) });}, 2000 );}for( var i=0; i < singleChars.length; i++ ) {  // go through each character and animate itsetTimeout( charsAnimation.bind(null, singleChars[i]) , i * 300);}}, 2000);

为了完成我们的创作，我们将添加一个随机的雨心效果。 这是您很难在标准SVG图形程序中生成的。

我们将随机化这雨的四个特征。 两个不同的心脏角色将以随机大小，颜色和时间呈现。

// Hearts Rain EffectsetTimeout(function(){function randomNums(min, max) {  // a function generating random numbersreturn Math.floor( Math.random() * ( 1 + max - min ) ) + min;}setInterval(function () {  // create new hearts set every 2 secondsfor (var i = 1; i < 29; i++) {var hearts = ["\u2764", "\u2665"];  // unicode characters for heartsvar colors = ["#D691BF","#D74498", "#A54A9C"];  // different colors for the heartsvar heart = randomNums(0,1);var color = randomNums(0, 2);var size = randomNums(3, 6);var time = randomNums(5, 10);var mutableX = i * 20;var heartsRain = card.paper.text(mutableX, -50, hearts[heart]).attr({fill: colors[color],fontSize: size * 5, opacity: 0.3}).animate({transform: "t0,500", opacity: 0.9}, time * 1500, mina.linear);};}, 2000);}, 7000);

现在我们完成了。 您可以在此处查看最终结果：

请参阅CodePen上的（ @Secret Sam ）提供的Pen vEpQOr 。

如您所见，通过将我们的想象力与Snap.svg的功能相结合，我们可以创建许多很酷的图形和动画，例如我们刚刚创建的漂亮的动画爱心卡。

希望您喜欢本教程，并祝大家情人节快乐！

翻译自: /

snap.svg.js