Создание анимированной открытки ко дню Святого Валентина с Snap.svg

OK. Сцена теперь готова! Давайте добавим актеров.

 // 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 . Сначала мы выбираем его по идентификатору #heart и добавляем на холст. Затем мы выбираем фактический путь, присваиваем ему нужные атрибуты и проверяем, что он вставлен после лучей (что означает над ними). Затем мы создаем вторую форму сердца, клонируя первую и изменяя атрибуты fill и transform .

У нас есть два прекрасных сердца, и теперь мы хотим разместить на них текст «Я люблю тебя». Здесь мы будем называть веб-шрифт 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 ).

Второй текст создает четыре строки: по одной на каждую букву от слова «любовь». В последней строке кода текст отображается вертикально, выделив каждую букву и присвоив ей одинаковые координаты для 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); 

И теперь мы закончили. Вы можете увидеть окончательный результат здесь: