去年，我向您展示了如何使用Snap.svg库创建分辨率独立的信息图 。 Snap是一个JavaScript库，旨在简化SVG的使用。
虽然我们取得了不错的成绩，但我们的创作主要是静态绘画，没有任何真实的花哨。
今天，我将向您展示如何在创建动画SVG情人节爱心卡片时实现一些酷炫的效果和动画。 您还将学习如何合并Google的网络字体以及SVG绘图和一些高级文本操作。
虽然在许多图形程序中创建静态SVG相对简单，但是Snap.svg是创建动态，交互式SVG的最佳方法之一。 我们将介绍一些您应该能够应用于许多不同应用程序的技术。
让我们开始吧。
首先，打开您喜欢的编辑器并创建一个新的HTML文档。 然后，我们添加对两种Google网络字体和Snap.svg库的引用。
我们将接下来的3行放在head标签内来完成此操作。 这为我们设置了Snap，并包含了两个Google字体。
<link href='http://fonts.googleapis.com/css?family=Niconne' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<script src="http://cdnjs.cloudflare.com/ajax/libs/snap.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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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.063
c-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.032
c34.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变量下方。
// Utilities
var 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 Background
var 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 Shapes
Snap.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 Texts
var 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”，使文本垂直显示。
现在，该到我们的卡片底部了。
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 Text
setTimeout(function(){
var wishText = "Happy Valentine's Day \u2763"; // create the wish text
var charsGroup = card.g(); // create a group for the individual characters
var 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 character
fill: "#D6DF23",
fontFamily: "Niconne",
fontSize: "42px",
filter: dropShadow,
opacity : 1,
});
var singleChars = charsGroup.selectAll("tspan").attr({opacity: 0}); // select all strings/characters and hide them initially
function charsAnimation( element ) { // a function for animating each character
Snap.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 it
setTimeout(
charsAnimation.bind(null, singleChars[i]) , i * 300);
}
}, 2000);为了完成我们的创作，我们将添加一个随机的雨心效果。 这是您很难在标准SVG图形程序中生成的。
我们将随机化这雨的四个特征。 两个不同的心脏角色将以随机大小，颜色和时间呈现。
// Hearts Rain Effect
setTimeout(function(){
function randomNums(min, max) { // a function generating random numbers
return Math.floor( Math.random() * ( 1 + max - min ) ) + min;
}
setInterval(function () { // create new hearts set every 2 seconds
for (var i = 1; i < 29; i++) {
var hearts = ["\u2764", "\u2665"]; // unicode characters for hearts
var colors = ["#D691BF","#D74498", "#A54A9C"]; // different colors for the hearts
var 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的功能相结合，我们可以创建许多很酷的图形和动画，例如我们刚刚创建的漂亮的动画爱心卡。
希望您喜欢本教程，并祝大家情人节快乐！
From: https://www.sitepoint.com/creating-animated-valentines-day-card-snap-svg/
扫一扫
1595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
