GSAP staggerTo() - 每个元素的随机参数
GSAP staggerTo() - random arguments for each element
我正在尝试通过为每个人设置不同的路径来对心脏产生传播效果。
这是我的代码：https://codepen.io/msauneuf/pen/GLVJQb?editors=0010
我的问题是函数 getRandomInt() 在每个元素的交错过程中没有被调用。
我尝试添加循环对象 (https://greensock.com/cycle) 并直接将 getRandomInt() 放入其中但没有成功...
.staggerTo('#hearts .heart', 12, {
bezier:{
type:"cubic",
values:[
{x: 1, y: -10},
{x: -160-getRandomInt(), y: 160+getRandomInt()},
{x: -326-getRandomInt(), y: 326+getRandomInt()},
{x: -500-getRandomInt(), y: 500+getRandomInt()}
],
},
scale:'1.4',
ease: Linear.easeNone
}, 0.8, "start")
因此，所有的心都遵循相同的预定路径。
有没有办法让每颗心都有不同的路径？
一个选项可以是每次完成时重新创建红心动画，这样随机值将被重新分配。检查 loadHeartsAnimation() 函数，它正在使用最后一个完成的回调
staggerTo 调用重新创建动画。
//animate hearts
function getRandomInt() {
return Math.floor(Math.random() * 200) - 100;
}
function loadHeartsAnimation() {
var tl = new TimelineMax({
repeat: -1
});
tl
.staggerFromTo('#hearts .heart', 0.5, {
autoAlpha: 0
}, {
autoAlpha: 1,
scale: '0.8'
}, 0.8, "start")
.staggerTo('#hearts .heart', 5, {
bezier: {
type: "cubic",
values: [{
x: 1,
y: -10
},
{
x: -160 - getRandomInt(),
y: 160 + getRandomInt()
},
{
x: -326 - getRandomInt(),
y: 326 + getRandomInt()
},
{
x: -500 - getRandomInt(),
y: 500 + getRandomInt()
}
],
},
scale: '1.4',
ease: Linear.easeNone
}, 0.8, "start")
.staggerTo('#hearts .heart', 0.5, {
autoAlpha: 0
}, 0.8, "start+=4.5", function() {
// Make sure that animation is fully destroyed
tl.invalidate().kill();
// And recreate it with new random values
loadHeartsAnimation();
});
}
loadHeartsAnimation();
//animate sun
TweenMax.to("#sun", 4, {
rotation: 90,
transformOrigin: "center",
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
//animate clouds
TweenMax.to("#clouds1", 4, {
y: '10px',
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
TweenMax.to("#clouds2", 5, {
y: '-5px',
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
//animate mountains
TweenMax.to("#mountain1", 4, {
x: '10px',
y: '10px',
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
TweenMax.to("#mountain2", 5, {
x: '-15px',
y: '5px',
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
.st0 {
fill: url(#background_1_);
}
.st1 {
filter: url(#Adobe_OpacityMaskFilter);
}
.st2 {
fill: url(#XMLID_3_);
}
.st3 {
opacity: 0.4;
mask: url(#XMLID_2_);
fill: #004D67;
}
.st4 {
filter: url(#Adobe_OpacityMaskFilter_1_);
}
.st5 {
fill: url(#XMLID_5_);
}
.st6 {
opacity: 0.4;
mask: url(#XMLID_4_);
fill: #004D67;
}
.st7 {
fill: url(#XMLID_6_);
}
.st8 {
fill: #FFFFFF;
}
.st9 {
fill: url(#XMLID_7_);
}
.st10 {
fill: url(#XMLID_8_);
}
.st11 {
fill: url(#XMLID_9_);
}
.st12 {
filter: url(#Adobe_OpacityMaskFilter_2_);
}st13
.st13 {
fill: url(#XMLID_11_);
}
.st14 {
opacity: 0.6;
mask: url(#XMLID_10_);
fill: #004D67;
}
.st15 {
filter: url(#Adobe_OpacityMaskFilter_3_);
}
.st16 {
fill: url(#XMLID_13_);
}
.st17 {
opacity: 0.4;
mask: url(#XMLID_12_);
fill: #004D67;
}
.st18 {
fill: url(#XMLID_14_);
}
.st19 {
fill: url(#XMLID_15_);
}
.st20 {
filter: url(#Adobe_OpacityMaskFilter_4_);
}
.st21 {
fill: url(#XMLID_17_);
}
.st22 {
opacity: 0.6;
mask: url(#XMLID_16_);
fill: #004D67;
}
.st23 {
fill: url(#XMLID_18_);
}
.st24 {
fill: url(#XMLID_19_);
}
.st25 {
fill: url(#XMLID_20_);
}
.st26 {
fill: url(#XMLID_21_);
}
.st27 {
filter: url(#Adobe_OpacityMaskFilter_5_);
}
.st28 {
fill: url(#XMLID_23_);
}
.st29 {
opacity: 0.6;
mask: url(#XMLID_22_);
fill: #004D67;
}
.st30 {
fill: url(#XMLID_24_);
}
.st31 {
fill: url(#XMLID_25_);
}
.st32 {
fill: url(#sun_1_);
}
.st33 {
fill: white;
}
.st34 {
fill: url(#SVGID_1_);
}
.st35 {
fill: url(#SVGID_2_);
}
.st36 {
fill: url(#SVGID_3_);
}
.st37 {
fill: url(#SVGID_4_);
}
.st38 {
fill: url(#SVGID_5_);
}
.st39 {
fill: url(#SVGID_6_);
}
.st40 {
fill: url(#SVGID_7_);
}
.st41 {
fill: url(#SVGID_8_);
}
.st42 {
fill: url(#SVGID_9_);
}
.st43 {
fill: url(#SVGID_10_);
}
.st44 {
fill: url(#SVGID_11_);
}
.st45 {
fill: url(#SVGID_12_);
}
.st46 {
fill: url(#SVGID_13_);
}
.st47 {
fill: url(#SVGID_14_);
}
.st48 {
fill: url(#SVGID_15_);
}
.st49 {
fill: url(#SVGID_16_);
}
.st50 {
fill: url(#SVGID_17_);
}
.st51 {
fill: url(#SVGID_18_);
}
.st52 {
fill: url(#SVGID_19_);
}
.st53 {
fill: url(#SVGID_20_);
}
.st54 {
fill: url(#SVGID_21_);
}
.st55 {
fill: url(#SVGID_22_);
}
.st56 {
fill: url(#SVGID_23_);
}
.st57 {
fill: url(#SVGID_24_);
}
.heart {
opacity: 1 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
<mask id="mask-path" x="0" y="0" width="1" height="1">
<path id="morph1" class="st33" d="M824.59,893.48l-419.3,64.79c-87.35,13.5-166.16-54.07-166.16-142.45V410.02
c0-107.06,112.59-176.76,208.42-129.02l70.74,35.24c34.88,17.37,75.3,19.89,112.06,6.97l184.83-64.95
c103.6-36.41,208.24,51.78,189.91,160.05l-60.4,356.78C934.33,836.3,885.94,884,824.59,893.48z"/>
</mask>
<g id="compo" mask="url(#mask-path)">
<linearGradient id="background_1_" gradientUnits="userSpaceOnUse" x1="8" y1="594.5" x2="1127" y2="594.5">
<stop offset="0" style="stop-color:#2E3192"/>
<stop offset="0.2185" style="stop-color:#323192"/>
<stop offset="0.4119" style="stop-color:#3C3092"/>
<stop offset="0.5958" style="stop-color:#4E2E91"/>
<stop offset="0.7739" style="stop-color:#682B90"/>
<stop offset="0.9462" style="stop-color:#88288F"/>
<stop offset="0.9946" style="stop-color:#93278F"/>
</linearGradient>
<rect id="background" x="8" y="98" class="st0" width="1119" height="993"/>
<g id="mountain1">
<defs>
<filter id="Adobe_OpacityMaskFilter_4_" filterUnits="userSpaceOnUse" x="566.97" y="587.86" width="213.95" height="192.84">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="566.97" y="587.86" width="213.95" height="192.84" id="XMLID_16_">
<g id="XMLID_72_" class="st20">
<radialGradient id="XMLID_17_" cx="1069.0006" cy="259.3001" r="98.4298" gradientTransform="matrix(-0.2348 1.2251 1.0635 0.1729 648.9241 -644.805)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.1523" style="stop-color:#CCCCCC"/>
<stop offset="0.3858" style="stop-color:#858585"/>
<stop offset="0.5959" style="stop-color:#4C4C4C"/>
<stop offset="0.7746" style="stop-color:#222222"/>
<stop offset="0.9151" style="stop-color:#090909"/>
<stop offset="1" style="stop-color:#000000"/>
</radialGradient>
<path id="XMLID_73_" class="st21" d="M650.58,830.25c57.81,9.4,115.03-36.97,127.79-103.57c12.76-66.6-23.76-128.2-81.57-137.6
c-57.81-9.4-115.03,36.97-127.79,103.57C556.24,759.24,592.76,820.85,650.58,830.25z"/>
</g>
</mask>
<path id="XMLID_240_" class="st22" d="M663,773.94c57.81,9.4,102.61,19.33,115.37-47.26c12.76-66.6-23.76-128.2-81.57-137.6
c-57.81-9.4-115.03,36.97-127.79,103.57C556.24,759.24,605.18,764.54,663,773.94z"/>
<g id="XMLID_232_">
<linearGradient id="XMLID_18_" gradientUnits="userSpaceOnUse" x1="921.4859" y1="717.9749" x2="841.8403" y2="710.6605" gradientTransform="matrix(-1 0 0 1 1676.5815 0)">
<stop offset="0" style="stop-color:#324958"/>
<stop offset="1" style="stop-color:#2D424F"/>
</linearGradient>
<path id="XMLID_239_" class="st23" d="M750.12,663.53c4.32,7.22,13.01,11.43,22.3,11.43c1.47,0,3.34-0.49,5.2-2.06l45.05,65.94
l-91.36,36.21V674.72C740.62,674.72,745.8,670.75,750.12,663.53z"/>
<polygon id="XMLID_238_" class="st8" points="777.63,672.91 777.63,672.91 731.32,605.12 "/>
<linearGradient id="XMLID_19_" gradientUnits="userSpaceOnUse" x1="938.6739" y1="640.0437" x2="899.1208" y2="640.0437" gradientTransform="matrix(-1 0 0 1 1676.5815 0)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#E3E8E9"/>
</linearGradient>
<path id="XMLID_237_" class="st24" d="M750.12,663.53c-4.32,7.22-9.5,11.19-18.8,11.19v-69.59l46.31,67.78
c-1.87,1.56-3.73,2.06-5.2,2.06C763.13,674.96,754.44,670.75,750.12,663.53z"/>
<linearGradient id="XMLID_20_" gradientUnits="userSpaceOnUse" x1="944.296" y1="719.2949" x2="1022.2878" y2="719.2949" gradientTransform="matrix(-1 0 0 1 1676.5815 0)">
<stop offset="0" style="stop-color:#23353F"/>
<stop offset="1" style="stop-color:#283B47"/>
</linearGradient>
<path id="XMLID_236_" class="st25" d="M679.15,672.23c2.02,1.68,4.43,1.85,6.96,1.85c9.3,0,18.98-3.33,23.29-10.56
c4.32,7.22,12.62,11.19,21.91,11.19v100.34l-102.47-38.13L679.15,672.23z"/>
<linearGradient id="XMLID_21_" gradientUnits="userSpaceOnUse" x1="694.7313" y1="639.9202" x2="727.6151" y2="639.9202">
<stop offset="0" style="stop-color:#BDC6CA"/>
<stop offset="1" style="stop-color:#D6DEE2"/>
</linearGradient>
<path id="XMLID_233_" class="st26" d="M709.41,663.53c-4.32,7.22-14,10.56-23.29,10.56c-2.54,0-4.95-0.17-6.96-1.85l52.17-67.11
v69.59C722.03,674.72,713.73,670.75,709.41,663.53z"/>
</g>
<defs>
<filter id="Adobe_OpacityMaskFilter_5_" filterUnits="userSpaceOnUse" x="629.29" y="637.49" width="142.55" height="143.6">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="629.29" y="637.49" width="142.55" height="143.6" id="XMLID_22_">
<g id="XMLID_60_" class="st27">
<radialGradient id="XMLID_23_" cx="1072.5675" cy="285.3059" r="65.4882" gradientTransform="matrix(-0.2348 1.2251 1.0635 0.1729 648.9241 -644.805)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.1523" style="stop-color:#CCCCCC"/>
<stop offset="0.3858" style="stop-color:#858585"/>
<stop offset="0.5959" style="stop-color:#4C4C4C"/>
<stop offset="0.7746" style="stop-color:#222222"/>
<stop offset="0.9151" style="stop-color:#090909"/>
<stop offset="1" style="stop-color:#000000"/>
</radialGradient>
<path id="XMLID_61_" class="st28" d="M685.13,798.76c38.46,6.25,76.53-24.6,85.02-68.91s-15.81-85.3-54.27-91.55
c-38.46-6.25-76.53,24.6-85.02,68.91C622.37,751.52,646.67,792.5,685.13,798.76z"/>
</g>
</mask>
<path id="XMLID_229_" class="st29" d="M687.86,779.52c38.46,6.25,73.8-5.37,82.3-49.68s-15.81-85.3-54.27-91.55
c-38.46-6.25-76.53,24.6-85.02,68.91C622.37,751.52,649.39,773.27,687.86,779.52z"/>
</g>
<g id="clouds1">
<linearGradient id="XMLID_24_" gradientUnits="userSpaceOnUse" x1="645.1644" y1="805.2516" x2="693.7812" y2="903.8417" gradientTransform="matrix(0.9992 0.0408 -0.0408 0.9992 16.5722 -20.402)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#FEFFFF"/>
</linearGradient>
<path id="XMLID_259_" class="st30" d="M1101.87,750.8c-15.98-4.63-36.56-1.94-46.89,12.67c-3.62-3.71-8.44-6.57-14.03-7.99
c-9.58-2.44-20.11-0.12-27.13,7.02c-2.29-8.61-9.66-14.83-18.25-16.67c-5.16-1.11-10.25-0.6-14.61,1.16
c1.35-18.5-15.13-32.79-32.02-35.52c-11.3-1.83-24.69,0.52-33.36,8.79c-6.53-6.88-15.45-11.14-24.82-12.32
c-3.24-0.41-6.43-0.45-9.52-0.15c-6.6-17.79-24.98-28.44-43.27-29.95c-19.56-1.62-41.1,7.22-49.32,26.03
c-2.7-0.9-5.66-1.38-8.62-1.56c-7.17-0.43-16.77,2.8-21.84,8.19c-7.44-6.71-17.31-10.23-27.29-10.23
c-15.99,0-32.08,9.5-36.92,25.3c-1.47-0.14-2.96-0.19-4.48-0.14c-6.18,0.2-11.9,1.97-16.7,4.85c-0.02-0.04-0.05-0.09-0.07-0.13
c-2.57-16.85-13.82-28.06-30.19-32.58c-16.22-4.47-38.81,1.59-45.85,18.24c-2.74-0.51-5.63-0.64-8.58-0.3
c-7.64,0.86-14.18,4.58-18.42,9.78c-6.95-7.42-17.3-10.7-27.3-9.21c-9.97,1.49-18.9,7.61-23.4,16.7c-2.87-1.36-6.1-2.35-9.44-3
c-6.7-1.31-15.77-0.45-22.03,2.61c-13.23-16.05-35.35-22.01-55.27-17.3c-16.89,3.99-31.91,15.53-38.91,31.58
c-5.39-2.1-11.67-2.5-17.89-0.71c-4.13,1.19-7.78,3.22-10.77,5.82c-14.59-13.94-35.67-17.55-54.8-12.53
c-15.51,4.07-32.01,14.76-36.49,31.11c-7.39-1.95-17.42-0.49-24.16,2.61c-8.9,4.09-17.05,11.36-20.28,20.97
c-2.9,0.76-5.79,1.75-8.65,2.98c-3.68,1.59-7.12,3.51-10.29,5.69c-14.52-6.63-32.88-3.63-46.45,3.85
c9.25,19.09,3.46,135.28,15.92,160.43c2.64-1.26,54.53-30.24,57.17-31.48c107.99-50.61,222.18-84.48,340.38-100.91
c170.82-22.14,343.27-6.66,507.22,45.41c6.17,1.96,30.06,9.74,41.07,14.87c-1.41-37.31-2.48-68.21,7.15-97.55
C1139.24,776.53,1120.94,756.33,1101.87,750.8z"/>
<linearGradient id="XMLID_25_" gradientUnits="userSpaceOnUse" x1="326.713" y1="826.1212" x2="383.6116" y2="941.5063" gradientTransform="matrix(-0.998 0.0637 0.0637 0.998 933.9171 -30.6457)">
<stop offset="0" style="stop-color:#F6F7F8"/>
<stop offset="1" style="stop-color:#E5EAEC"/>
</linearGradient>
<path id="XMLID_258_" class="st31" d="M164.3,807.25c13.57-7.48,31.93-10.47,46.45-3.85c3.17-2.18,6.61-4.1,10.29-5.69
c2.85-1.23,5.74-2.22,8.65-2.98c3.23-9.61,11.38-16.87,20.28-20.97c6.74-3.1,16.77-4.56,24.16-2.61
c4.48-16.34,20.98-27.04,36.49-31.11c19.14-5.02,40.21-1.41,54.8,12.53c2.99-2.59,6.64-4.63,10.77-5.82
c6.21-1.79,12.5-1.39,17.89,0.71c7-16.05,22.02-27.59,38.91-31.58c19.92-4.71,42.04,1.25,55.27,17.3
c6.26-3.07,15.34-3.92,22.03-2.61c3.34,0.65,6.57,1.64,9.44,3c4.5-9.09,13.43-15.21,23.4-16.7c10-1.49,20.35,1.79,27.3,9.21
c4.24-5.2,10.78-8.92,18.42-9.78c2.95-0.33,5.84-0.21,8.58,0.3c7.04-16.65,29.63-22.71,45.85-18.24
c16.38,4.52,27.62,15.73,30.19,32.58c0.02,0.04,0.05,0.09,0.07,0.13c4.81-2.88,10.53-4.65,16.7-4.85c1.52-0.05,3.01,0,4.48,0.14
c4.84-15.8,20.93-25.3,36.92-25.3c9.98,0,19.85,3.52,27.29,10.23c5.08-5.38,14.67-8.62,21.84-8.19c2.96,0.18,5.92,0.66,8.62,1.56
c8.22-18.81,29.77-27.65,49.32-26.03c18.28,1.51,36.66,12.16,43.27,29.95c3.09-0.3,6.28-0.26,9.52,0.15
c9.38,1.18,18.29,5.45,24.82,12.32c8.67-8.27,22.05-10.62,33.36-8.79c16.89,2.73,33.37,17.02,32.02,35.52
c4.36-1.76,9.45-2.27,14.61-1.16c8.58,1.85,15.96,8.06,18.25,16.67c7.02-7.14,17.55-9.46,27.13-7.02
c5.6,1.42,10.41,4.28,14.03,7.99c10.33-14.61,30.9-17.3,46.89-12.67c19.07,5.53,37.37,25.73,30.59,46.39
c-9.63,29.34-8.56,60.24-7.15,97.55c-11.01-5.13-34.91-12.91-41.07-14.87C921.04,828.62,744.82,949.86,574,972
c-118.19,16.44-344,9-344,9l-49.78-13.32C180.22,967.68,173.54,826.34,164.3,807.25z"/>
</g>
<linearGradient id="sun_1_" gradientUnits="userSpaceOnUse" x1="177.6166" y1="364.1817" x2="148.1334" y2="328.358" gradientTransform="matrix(-1 0 0 1 1000 0)">
<stop offset="0" style="stop-color:#FFF4A7"/>
<stop offset="1" style="stop-color:#FFCA6F"/>
</linearGradient>
<circle id="sun" class="st32" cx="837.53" cy="345.77" r="24.95"/>
</g>
<g id="hearts">
<g class="heart">
<g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="580.5917" y1="592.3933" x2="579.5101" y2="595.3291" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st34" d="M755.54,401.73c-5.73-0.22-2.3,11.58-2.3,11.58l5.77-6.96C759.02,406.35,759.66,401.89,755.54,401.73z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="583.4308" y1="588.8535" x2="577.9619" y2="594.525" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#BB2C33"/>
<stop offset="1" style="stop-color:#FF5374"/>
</linearGradient>
<path class="st35" d="M755.56,401.85c-5.73-0.22-2.3,11.58-2.3,11.58l5.77-6.96C759.04,406.48,759.68,402.02,755.56,401.85z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="587.3978" y1="592.6105" x2="587.3978" y2="595.3616" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st36" d="M764.21,408.92c-0.91-4.02-5.19-2.57-5.19-2.57l-5.76,7.09C753.26,413.44,765.48,414.51,764.21,408.92z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="585.0092" y1="589.5995" x2="591.1902" y2="589.5995" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0.2456" style="stop-color:#AF2027"/>
<stop offset="1" style="stop-color:#F74768"/>
</linearGradient>
<path class="st37" d="M764.22,409.05c-0.91-4.02-5.19-2.57-5.19-2.57l-5.77,6.96C753.26,413.44,765.49,414.64,764.22,409.05z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="586.2094" y1="593.1427" x2="586.2094" y2="595.1641" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st38" d="M762.89,407.43c0.01-3.35-3.7-1.28-3.7-1.28l-5.93,7.3C753.26,413.44,762.87,412.07,762.89,407.43z"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="582.1418" y1="591.378" x2="579.6953" y2="595.0607" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st39" d="M757.25,402.74c-4.57,0.87-4,10.56-4,10.56l0.01,0.13l5.93-7.3C759.19,406.14,760.54,402.12,757.25,402.74
z"/>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="583.7237" y1="589.3901" x2="578.8857" y2="592.8406" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#A2131A"/>
<stop offset="1" style="stop-color:#EA3A5B"/>
</linearGradient>
<path class="st40" d="M757.26,402.87c-4.57,0.87-4,10.56-4,10.56l5.95-7.17C759.21,406.27,760.55,402.25,757.26,402.87z"/>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="583.9964" y1="589.7676" x2="588.4182" y2="589.7676" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#C83940"/>
<stop offset="1" style="stop-color:#FF6081"/>
</linearGradient>
<path class="st41" d="M762.91,407.55c0.01-3.35-3.7-1.28-3.7-1.28l-5.95,7.17C753.26,413.44,762.88,412.21,762.91,407.55z"/>
</g>
</g>
</g>
<g class="heart">
<g>
<g>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="580.6853" y1="619.0745" x2="577.6742" y2="627.2476" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st42" d="M771.95,375.83c-15.95-0.62-6.39,32.24-6.39,32.24l16.08-19.38C781.64,388.69,783.43,376.27,771.95,375.83
z"/>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="588.5923" y1="609.2465" x2="573.3671" y2="625.0356" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#BB2C33"/>
<stop offset="1" style="stop-color:#FF5374"/>
</linearGradient>
<path class="st43" d="M772,376.19c-15.95-0.62-6.39,32.24-6.39,32.24l16.08-19.38C781.68,389.06,783.47,376.64,772,376.19z"/>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="599.6098" y1="619.6647" x2="599.6098" y2="627.3237" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st44" d="M796.08,395.85c-2.55-11.2-14.44-7.15-14.44-7.15l-16.03,19.74C765.61,408.44,799.63,411.4,796.08,395.85z
"/>
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="592.944" y1="611.3531" x2="610.1517" y2="611.3531" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0.2456" style="stop-color:#AF2027"/>
<stop offset="1" style="stop-color:#F74768"/>
</linearGradient>
<path class="st45" d="M796.12,396.21c-2.55-11.2-14.44-7.15-14.44-7.15l-16.08,19.38C765.61,408.44,799.67,411.77,796.12,396.21
z"/>
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="596.2926" y1="621.1462" x2="596.2926" y2="626.7738" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st46" d="M792.41,391.68c0.04-9.32-10.28-3.56-10.28-3.56l-16.51,20.33C765.61,408.44,792.36,404.63,792.41,391.68z
"/>
<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="585.0084" y1="616.2645" x2="578.1973" y2="626.517" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st47" d="M776.73,378.66c-12.72,2.44-11.16,29.41-11.16,29.41l0.04,0.36l16.51-20.33
C782.12,388.11,785.88,376.91,776.73,378.66z"/>
<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="589.4042" y1="610.754" x2="575.9355" y2="620.36" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#A2131A"/>
<stop offset="1" style="stop-color:#EA3A5B"/>
</linearGradient>
<path class="st48" d="M776.77,379.03c-12.72,2.44-11.16,29.41-11.16,29.41l16.55-19.96
C782.17,388.47,785.92,377.27,776.77,379.03z"/>
<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="590.1244" y1="611.8249" x2="602.4364" y2="611.8249" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#C83940"/>
<stop offset="1" style="stop-color:#FF6081"/>
</linearGradient>
<path class="st49" d="M792.45,392.04c0.04-9.32-10.28-3.56-10.28-3.56l-16.55,19.96C765.61,408.44,792.4,405,792.45,392.04z"/>
</g>
</g>
</g>
<g class="heart">
<g>
<g>
<linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="596.3429" y1="620.9885" x2="593.4555" y2="628.8257" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st50" d="M785.27,384.7c-15.29-0.59-6.12,30.92-6.12,30.92l15.41-18.58C794.57,397.04,796.28,385.13,785.27,384.7z"
/>
<linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="603.9313" y1="611.5647" x2="589.3319" y2="626.7048" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#BB2C33"/>
<stop offset="1" style="stop-color:#FF5374"/>
</linearGradient>
<path class="st51" d="M785.31,385.05c-15.29-0.59-6.12,30.92-6.12,30.92l15.41-18.58C794.61,397.39,796.33,385.47,785.31,385.05
z"/>
<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="614.4991" y1="621.558" x2="614.4991" y2="628.9022" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st52" d="M808.41,403.9c-2.46-10.74-13.84-6.86-13.84-6.86l-15.37,18.93C779.2,415.97,811.82,418.82,808.41,403.9z"
/>
<linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="608.1075" y1="613.5945" x2="624.6079" y2="613.5945" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0.2456" style="stop-color:#AF2027"/>
<stop offset="1" style="stop-color:#F74768"/>
</linearGradient>
<path class="st53" d="M808.46,404.24c-2.45-10.74-13.84-6.86-13.84-6.86l-15.41,18.58C779.2,415.97,811.86,419.17,808.46,404.24
z"/>
<linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="611.3141" y1="622.9787" x2="611.3141" y2="628.375" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st54" d="M804.89,399.89c0.03-8.94-9.86-3.42-9.86-3.42l-15.84,19.49C779.2,415.97,804.84,412.32,804.89,399.89z"/>
<linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="600.494" y1="618.2949" x2="593.9628" y2="628.126" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st55" d="M789.85,387.43c-12.2,2.34-10.71,28.2-10.71,28.2l0.04,0.35l15.84-19.49
C795.03,396.49,798.64,385.74,789.85,387.43z"/>
<linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="604.7081" y1="613.0066" x2="591.7931" y2="622.2177" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#A2131A"/>
<stop offset="1" style="stop-color:#EA3A5B"/>
</linearGradient>
<path class="st56" d="M789.89,387.77c-12.2,2.34-10.71,28.2-10.71,28.2l15.88-19.14C795.07,396.83,798.67,386.09,789.89,387.77z
"/>
<linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="605.4039" y1="614.0363" x2="617.2081" y2="614.0363" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#C83940"/>
<stop offset="1" style="stop-color:#FF6081"/>
</linearGradient>
<path class="st57" d="M804.93,400.24c0.03-8.94-9.86-3.42-9.86-3.42l-15.88,19.14C779.2,415.97,804.89,412.66,804.93,400.24z"/>
</g>
</g>
</g>
</g>
</svg>
我正在尝试通过为每个人设置不同的路径来对心脏产生传播效果。
这是我的代码：https://codepen.io/msauneuf/pen/GLVJQb?editors=0010
我的问题是函数 getRandomInt() 在每个元素的交错过程中没有被调用。
我尝试添加循环对象 (https://greensock.com/cycle) 并直接将 getRandomInt() 放入其中但没有成功...
.staggerTo('#hearts .heart', 12, {
bezier:{
type:"cubic",
values:[
{x: 1, y: -10},
{x: -160-getRandomInt(), y: 160+getRandomInt()},
{x: -326-getRandomInt(), y: 326+getRandomInt()},
{x: -500-getRandomInt(), y: 500+getRandomInt()}
],
},
scale:'1.4',
ease: Linear.easeNone
}, 0.8, "start")
因此，所有的心都遵循相同的预定路径。
有没有办法让每颗心都有不同的路径？
一个选项可以是每次完成时重新创建红心动画，这样随机值将被重新分配。检查 loadHeartsAnimation() 函数，它正在使用最后一个完成的回调
staggerTo 调用重新创建动画。
//animate hearts
function getRandomInt() {
return Math.floor(Math.random() * 200) - 100;
}
function loadHeartsAnimation() {
var tl = new TimelineMax({
repeat: -1
});
tl
.staggerFromTo('#hearts .heart', 0.5, {
autoAlpha: 0
}, {
autoAlpha: 1,
scale: '0.8'
}, 0.8, "start")
.staggerTo('#hearts .heart', 5, {
bezier: {
type: "cubic",
values: [{
x: 1,
y: -10
},
{
x: -160 - getRandomInt(),
y: 160 + getRandomInt()
},
{
x: -326 - getRandomInt(),
y: 326 + getRandomInt()
},
{
x: -500 - getRandomInt(),
y: 500 + getRandomInt()
}
],
},
scale: '1.4',
ease: Linear.easeNone
}, 0.8, "start")
.staggerTo('#hearts .heart', 0.5, {
autoAlpha: 0
}, 0.8, "start+=4.5", function() {
// Make sure that animation is fully destroyed
tl.invalidate().kill();
// And recreate it with new random values
loadHeartsAnimation();
});
}
loadHeartsAnimation();
//animate sun
TweenMax.to("#sun", 4, {
rotation: 90,
transformOrigin: "center",
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
//animate clouds
TweenMax.to("#clouds1", 4, {
y: '10px',
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
TweenMax.to("#clouds2", 5, {
y: '-5px',
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
//animate mountains
TweenMax.to("#mountain1", 4, {
x: '10px',
y: '10px',
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
TweenMax.to("#mountain2", 5, {
x: '-15px',
y: '5px',
repeat: -1,
yoyo: true,
ease: Linear.easeNone
});
.st0 {
fill: url(#background_1_);
}
.st1 {
filter: url(#Adobe_OpacityMaskFilter);
}
.st2 {
fill: url(#XMLID_3_);
}
.st3 {
opacity: 0.4;
mask: url(#XMLID_2_);
fill: #004D67;
}
.st4 {
filter: url(#Adobe_OpacityMaskFilter_1_);
}
.st5 {
fill: url(#XMLID_5_);
}
.st6 {
opacity: 0.4;
mask: url(#XMLID_4_);
fill: #004D67;
}
.st7 {
fill: url(#XMLID_6_);
}
.st8 {
fill: #FFFFFF;
}
.st9 {
fill: url(#XMLID_7_);
}
.st10 {
fill: url(#XMLID_8_);
}
.st11 {
fill: url(#XMLID_9_);
}
.st12 {
filter: url(#Adobe_OpacityMaskFilter_2_);
}st13
.st13 {
fill: url(#XMLID_11_);
}
.st14 {
opacity: 0.6;
mask: url(#XMLID_10_);
fill: #004D67;
}
.st15 {
filter: url(#Adobe_OpacityMaskFilter_3_);
}
.st16 {
fill: url(#XMLID_13_);
}
.st17 {
opacity: 0.4;
mask: url(#XMLID_12_);
fill: #004D67;
}
.st18 {
fill: url(#XMLID_14_);
}
.st19 {
fill: url(#XMLID_15_);
}
.st20 {
filter: url(#Adobe_OpacityMaskFilter_4_);
}
.st21 {
fill: url(#XMLID_17_);
}
.st22 {
opacity: 0.6;
mask: url(#XMLID_16_);
fill: #004D67;
}
.st23 {
fill: url(#XMLID_18_);
}
.st24 {
fill: url(#XMLID_19_);
}
.st25 {
fill: url(#XMLID_20_);
}
.st26 {
fill: url(#XMLID_21_);
}
.st27 {
filter: url(#Adobe_OpacityMaskFilter_5_);
}
.st28 {
fill: url(#XMLID_23_);
}
.st29 {
opacity: 0.6;
mask: url(#XMLID_22_);
fill: #004D67;
}
.st30 {
fill: url(#XMLID_24_);
}
.st31 {
fill: url(#XMLID_25_);
}
.st32 {
fill: url(#sun_1_);
}
.st33 {
fill: white;
}
.st34 {
fill: url(#SVGID_1_);
}
.st35 {
fill: url(#SVGID_2_);
}
.st36 {
fill: url(#SVGID_3_);
}
.st37 {
fill: url(#SVGID_4_);
}
.st38 {
fill: url(#SVGID_5_);
}
.st39 {
fill: url(#SVGID_6_);
}
.st40 {
fill: url(#SVGID_7_);
}
.st41 {
fill: url(#SVGID_8_);
}
.st42 {
fill: url(#SVGID_9_);
}
.st43 {
fill: url(#SVGID_10_);
}
.st44 {
fill: url(#SVGID_11_);
}
.st45 {
fill: url(#SVGID_12_);
}
.st46 {
fill: url(#SVGID_13_);
}
.st47 {
fill: url(#SVGID_14_);
}
.st48 {
fill: url(#SVGID_15_);
}
.st49 {
fill: url(#SVGID_16_);
}
.st50 {
fill: url(#SVGID_17_);
}
.st51 {
fill: url(#SVGID_18_);
}
.st52 {
fill: url(#SVGID_19_);
}
.st53 {
fill: url(#SVGID_20_);
}
.st54 {
fill: url(#SVGID_21_);
}
.st55 {
fill: url(#SVGID_22_);
}
.st56 {
fill: url(#SVGID_23_);
}
.st57 {
fill: url(#SVGID_24_);
}
.heart {
opacity: 1 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
<mask id="mask-path" x="0" y="0" width="1" height="1">
<path id="morph1" class="st33" d="M824.59,893.48l-419.3,64.79c-87.35,13.5-166.16-54.07-166.16-142.45V410.02
c0-107.06,112.59-176.76,208.42-129.02l70.74,35.24c34.88,17.37,75.3,19.89,112.06,6.97l184.83-64.95
c103.6-36.41,208.24,51.78,189.91,160.05l-60.4,356.78C934.33,836.3,885.94,884,824.59,893.48z"/>
</mask>
<g id="compo" mask="url(#mask-path)">
<linearGradient id="background_1_" gradientUnits="userSpaceOnUse" x1="8" y1="594.5" x2="1127" y2="594.5">
<stop offset="0" style="stop-color:#2E3192"/>
<stop offset="0.2185" style="stop-color:#323192"/>
<stop offset="0.4119" style="stop-color:#3C3092"/>
<stop offset="0.5958" style="stop-color:#4E2E91"/>
<stop offset="0.7739" style="stop-color:#682B90"/>
<stop offset="0.9462" style="stop-color:#88288F"/>
<stop offset="0.9946" style="stop-color:#93278F"/>
</linearGradient>
<rect id="background" x="8" y="98" class="st0" width="1119" height="993"/>
<g id="mountain1">
<defs>
<filter id="Adobe_OpacityMaskFilter_4_" filterUnits="userSpaceOnUse" x="566.97" y="587.86" width="213.95" height="192.84">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="566.97" y="587.86" width="213.95" height="192.84" id="XMLID_16_">
<g id="XMLID_72_" class="st20">
<radialGradient id="XMLID_17_" cx="1069.0006" cy="259.3001" r="98.4298" gradientTransform="matrix(-0.2348 1.2251 1.0635 0.1729 648.9241 -644.805)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.1523" style="stop-color:#CCCCCC"/>
<stop offset="0.3858" style="stop-color:#858585"/>
<stop offset="0.5959" style="stop-color:#4C4C4C"/>
<stop offset="0.7746" style="stop-color:#222222"/>
<stop offset="0.9151" style="stop-color:#090909"/>
<stop offset="1" style="stop-color:#000000"/>
</radialGradient>
<path id="XMLID_73_" class="st21" d="M650.58,830.25c57.81,9.4,115.03-36.97,127.79-103.57c12.76-66.6-23.76-128.2-81.57-137.6
c-57.81-9.4-115.03,36.97-127.79,103.57C556.24,759.24,592.76,820.85,650.58,830.25z"/>
</g>
</mask>
<path id="XMLID_240_" class="st22" d="M663,773.94c57.81,9.4,102.61,19.33,115.37-47.26c12.76-66.6-23.76-128.2-81.57-137.6
c-57.81-9.4-115.03,36.97-127.79,103.57C556.24,759.24,605.18,764.54,663,773.94z"/>
<g id="XMLID_232_">
<linearGradient id="XMLID_18_" gradientUnits="userSpaceOnUse" x1="921.4859" y1="717.9749" x2="841.8403" y2="710.6605" gradientTransform="matrix(-1 0 0 1 1676.5815 0)">
<stop offset="0" style="stop-color:#324958"/>
<stop offset="1" style="stop-color:#2D424F"/>
</linearGradient>
<path id="XMLID_239_" class="st23" d="M750.12,663.53c4.32,7.22,13.01,11.43,22.3,11.43c1.47,0,3.34-0.49,5.2-2.06l45.05,65.94
l-91.36,36.21V674.72C740.62,674.72,745.8,670.75,750.12,663.53z"/>
<polygon id="XMLID_238_" class="st8" points="777.63,672.91 777.63,672.91 731.32,605.12 "/>
<linearGradient id="XMLID_19_" gradientUnits="userSpaceOnUse" x1="938.6739" y1="640.0437" x2="899.1208" y2="640.0437" gradientTransform="matrix(-1 0 0 1 1676.5815 0)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#E3E8E9"/>
</linearGradient>
<path id="XMLID_237_" class="st24" d="M750.12,663.53c-4.32,7.22-9.5,11.19-18.8,11.19v-69.59l46.31,67.78
c-1.87,1.56-3.73,2.06-5.2,2.06C763.13,674.96,754.44,670.75,750.12,663.53z"/>
<linearGradient id="XMLID_20_" gradientUnits="userSpaceOnUse" x1="944.296" y1="719.2949" x2="1022.2878" y2="719.2949" gradientTransform="matrix(-1 0 0 1 1676.5815 0)">
<stop offset="0" style="stop-color:#23353F"/>
<stop offset="1" style="stop-color:#283B47"/>
</linearGradient>
<path id="XMLID_236_" class="st25" d="M679.15,672.23c2.02,1.68,4.43,1.85,6.96,1.85c9.3,0,18.98-3.33,23.29-10.56
c4.32,7.22,12.62,11.19,21.91,11.19v100.34l-102.47-38.13L679.15,672.23z"/>
<linearGradient id="XMLID_21_" gradientUnits="userSpaceOnUse" x1="694.7313" y1="639.9202" x2="727.6151" y2="639.9202">
<stop offset="0" style="stop-color:#BDC6CA"/>
<stop offset="1" style="stop-color:#D6DEE2"/>
</linearGradient>
<path id="XMLID_233_" class="st26" d="M709.41,663.53c-4.32,7.22-14,10.56-23.29,10.56c-2.54,0-4.95-0.17-6.96-1.85l52.17-67.11
v69.59C722.03,674.72,713.73,670.75,709.41,663.53z"/>
</g>
<defs>
<filter id="Adobe_OpacityMaskFilter_5_" filterUnits="userSpaceOnUse" x="629.29" y="637.49" width="142.55" height="143.6">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="629.29" y="637.49" width="142.55" height="143.6" id="XMLID_22_">
<g id="XMLID_60_" class="st27">
<radialGradient id="XMLID_23_" cx="1072.5675" cy="285.3059" r="65.4882" gradientTransform="matrix(-0.2348 1.2251 1.0635 0.1729 648.9241 -644.805)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.1523" style="stop-color:#CCCCCC"/>
<stop offset="0.3858" style="stop-color:#858585"/>
<stop offset="0.5959" style="stop-color:#4C4C4C"/>
<stop offset="0.7746" style="stop-color:#222222"/>
<stop offset="0.9151" style="stop-color:#090909"/>
<stop offset="1" style="stop-color:#000000"/>
</radialGradient>
<path id="XMLID_61_" class="st28" d="M685.13,798.76c38.46,6.25,76.53-24.6,85.02-68.91s-15.81-85.3-54.27-91.55
c-38.46-6.25-76.53,24.6-85.02,68.91C622.37,751.52,646.67,792.5,685.13,798.76z"/>
</g>
</mask>
<path id="XMLID_229_" class="st29" d="M687.86,779.52c38.46,6.25,73.8-5.37,82.3-49.68s-15.81-85.3-54.27-91.55
c-38.46-6.25-76.53,24.6-85.02,68.91C622.37,751.52,649.39,773.27,687.86,779.52z"/>
</g>
<g id="clouds1">
<linearGradient id="XMLID_24_" gradientUnits="userSpaceOnUse" x1="645.1644" y1="805.2516" x2="693.7812" y2="903.8417" gradientTransform="matrix(0.9992 0.0408 -0.0408 0.9992 16.5722 -20.402)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#FEFFFF"/>
</linearGradient>
<path id="XMLID_259_" class="st30" d="M1101.87,750.8c-15.98-4.63-36.56-1.94-46.89,12.67c-3.62-3.71-8.44-6.57-14.03-7.99
c-9.58-2.44-20.11-0.12-27.13,7.02c-2.29-8.61-9.66-14.83-18.25-16.67c-5.16-1.11-10.25-0.6-14.61,1.16
c1.35-18.5-15.13-32.79-32.02-35.52c-11.3-1.83-24.69,0.52-33.36,8.79c-6.53-6.88-15.45-11.14-24.82-12.32
c-3.24-0.41-6.43-0.45-9.52-0.15c-6.6-17.79-24.98-28.44-43.27-29.95c-19.56-1.62-41.1,7.22-49.32,26.03
c-2.7-0.9-5.66-1.38-8.62-1.56c-7.17-0.43-16.77,2.8-21.84,8.19c-7.44-6.71-17.31-10.23-27.29-10.23
c-15.99,0-32.08,9.5-36.92,25.3c-1.47-0.14-2.96-0.19-4.48-0.14c-6.18,0.2-11.9,1.97-16.7,4.85c-0.02-0.04-0.05-0.09-0.07-0.13
c-2.57-16.85-13.82-28.06-30.19-32.58c-16.22-4.47-38.81,1.59-45.85,18.24c-2.74-0.51-5.63-0.64-8.58-0.3
c-7.64,0.86-14.18,4.58-18.42,9.78c-6.95-7.42-17.3-10.7-27.3-9.21c-9.97,1.49-18.9,7.61-23.4,16.7c-2.87-1.36-6.1-2.35-9.44-3
c-6.7-1.31-15.77-0.45-22.03,2.61c-13.23-16.05-35.35-22.01-55.27-17.3c-16.89,3.99-31.91,15.53-38.91,31.58
c-5.39-2.1-11.67-2.5-17.89-0.71c-4.13,1.19-7.78,3.22-10.77,5.82c-14.59-13.94-35.67-17.55-54.8-12.53
c-15.51,4.07-32.01,14.76-36.49,31.11c-7.39-1.95-17.42-0.49-24.16,2.61c-8.9,4.09-17.05,11.36-20.28,20.97
c-2.9,0.76-5.79,1.75-8.65,2.98c-3.68,1.59-7.12,3.51-10.29,5.69c-14.52-6.63-32.88-3.63-46.45,3.85
c9.25,19.09,3.46,135.28,15.92,160.43c2.64-1.26,54.53-30.24,57.17-31.48c107.99-50.61,222.18-84.48,340.38-100.91
c170.82-22.14,343.27-6.66,507.22,45.41c6.17,1.96,30.06,9.74,41.07,14.87c-1.41-37.31-2.48-68.21,7.15-97.55
C1139.24,776.53,1120.94,756.33,1101.87,750.8z"/>
<linearGradient id="XMLID_25_" gradientUnits="userSpaceOnUse" x1="326.713" y1="826.1212" x2="383.6116" y2="941.5063" gradientTransform="matrix(-0.998 0.0637 0.0637 0.998 933.9171 -30.6457)">
<stop offset="0" style="stop-color:#F6F7F8"/>
<stop offset="1" style="stop-color:#E5EAEC"/>
</linearGradient>
<path id="XMLID_258_" class="st31" d="M164.3,807.25c13.57-7.48,31.93-10.47,46.45-3.85c3.17-2.18,6.61-4.1,10.29-5.69
c2.85-1.23,5.74-2.22,8.65-2.98c3.23-9.61,11.38-16.87,20.28-20.97c6.74-3.1,16.77-4.56,24.16-2.61
c4.48-16.34,20.98-27.04,36.49-31.11c19.14-5.02,40.21-1.41,54.8,12.53c2.99-2.59,6.64-4.63,10.77-5.82
c6.21-1.79,12.5-1.39,17.89,0.71c7-16.05,22.02-27.59,38.91-31.58c19.92-4.71,42.04,1.25,55.27,17.3
c6.26-3.07,15.34-3.92,22.03-2.61c3.34,0.65,6.57,1.64,9.44,3c4.5-9.09,13.43-15.21,23.4-16.7c10-1.49,20.35,1.79,27.3,9.21
c4.24-5.2,10.78-8.92,18.42-9.78c2.95-0.33,5.84-0.21,8.58,0.3c7.04-16.65,29.63-22.71,45.85-18.24
c16.38,4.52,27.62,15.73,30.19,32.58c0.02,0.04,0.05,0.09,0.07,0.13c4.81-2.88,10.53-4.65,16.7-4.85c1.52-0.05,3.01,0,4.48,0.14
c4.84-15.8,20.93-25.3,36.92-25.3c9.98,0,19.85,3.52,27.29,10.23c5.08-5.38,14.67-8.62,21.84-8.19c2.96,0.18,5.92,0.66,8.62,1.56
c8.22-18.81,29.77-27.65,49.32-26.03c18.28,1.51,36.66,12.16,43.27,29.95c3.09-0.3,6.28-0.26,9.52,0.15
c9.38,1.18,18.29,5.45,24.82,12.32c8.67-8.27,22.05-10.62,33.36-8.79c16.89,2.73,33.37,17.02,32.02,35.52
c4.36-1.76,9.45-2.27,14.61-1.16c8.58,1.85,15.96,8.06,18.25,16.67c7.02-7.14,17.55-9.46,27.13-7.02
c5.6,1.42,10.41,4.28,14.03,7.99c10.33-14.61,30.9-17.3,46.89-12.67c19.07,5.53,37.37,25.73,30.59,46.39
c-9.63,29.34-8.56,60.24-7.15,97.55c-11.01-5.13-34.91-12.91-41.07-14.87C921.04,828.62,744.82,949.86,574,972
c-118.19,16.44-344,9-344,9l-49.78-13.32C180.22,967.68,173.54,826.34,164.3,807.25z"/>
</g>
<linearGradient id="sun_1_" gradientUnits="userSpaceOnUse" x1="177.6166" y1="364.1817" x2="148.1334" y2="328.358" gradientTransform="matrix(-1 0 0 1 1000 0)">
<stop offset="0" style="stop-color:#FFF4A7"/>
<stop offset="1" style="stop-color:#FFCA6F"/>
</linearGradient>
<circle id="sun" class="st32" cx="837.53" cy="345.77" r="24.95"/>
</g>
<g id="hearts">
<g class="heart">
<g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="580.5917" y1="592.3933" x2="579.5101" y2="595.3291" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st34" d="M755.54,401.73c-5.73-0.22-2.3,11.58-2.3,11.58l5.77-6.96C759.02,406.35,759.66,401.89,755.54,401.73z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="583.4308" y1="588.8535" x2="577.9619" y2="594.525" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#BB2C33"/>
<stop offset="1" style="stop-color:#FF5374"/>
</linearGradient>
<path class="st35" d="M755.56,401.85c-5.73-0.22-2.3,11.58-2.3,11.58l5.77-6.96C759.04,406.48,759.68,402.02,755.56,401.85z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="587.3978" y1="592.6105" x2="587.3978" y2="595.3616" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st36" d="M764.21,408.92c-0.91-4.02-5.19-2.57-5.19-2.57l-5.76,7.09C753.26,413.44,765.48,414.51,764.21,408.92z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="585.0092" y1="589.5995" x2="591.1902" y2="589.5995" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0.2456" style="stop-color:#AF2027"/>
<stop offset="1" style="stop-color:#F74768"/>
</linearGradient>
<path class="st37" d="M764.22,409.05c-0.91-4.02-5.19-2.57-5.19-2.57l-5.77,6.96C753.26,413.44,765.49,414.64,764.22,409.05z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="586.2094" y1="593.1427" x2="586.2094" y2="595.1641" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st38" d="M762.89,407.43c0.01-3.35-3.7-1.28-3.7-1.28l-5.93,7.3C753.26,413.44,762.87,412.07,762.89,407.43z"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="582.1418" y1="591.378" x2="579.6953" y2="595.0607" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st39" d="M757.25,402.74c-4.57,0.87-4,10.56-4,10.56l0.01,0.13l5.93-7.3C759.19,406.14,760.54,402.12,757.25,402.74
z"/>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="583.7237" y1="589.3901" x2="578.8857" y2="592.8406" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#A2131A"/>
<stop offset="1" style="stop-color:#EA3A5B"/>
</linearGradient>
<path class="st40" d="M757.26,402.87c-4.57,0.87-4,10.56-4,10.56l5.95-7.17C759.21,406.27,760.55,402.25,757.26,402.87z"/>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="583.9964" y1="589.7676" x2="588.4182" y2="589.7676" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#C83940"/>
<stop offset="1" style="stop-color:#FF6081"/>
</linearGradient>
<path class="st41" d="M762.91,407.55c0.01-3.35-3.7-1.28-3.7-1.28l-5.95,7.17C753.26,413.44,762.88,412.21,762.91,407.55z"/>
</g>
</g>
</g>
<g class="heart">
<g>
<g>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="580.6853" y1="619.0745" x2="577.6742" y2="627.2476" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st42" d="M771.95,375.83c-15.95-0.62-6.39,32.24-6.39,32.24l16.08-19.38C781.64,388.69,783.43,376.27,771.95,375.83
z"/>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="588.5923" y1="609.2465" x2="573.3671" y2="625.0356" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#BB2C33"/>
<stop offset="1" style="stop-color:#FF5374"/>
</linearGradient>
<path class="st43" d="M772,376.19c-15.95-0.62-6.39,32.24-6.39,32.24l16.08-19.38C781.68,389.06,783.47,376.64,772,376.19z"/>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="599.6098" y1="619.6647" x2="599.6098" y2="627.3237" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st44" d="M796.08,395.85c-2.55-11.2-14.44-7.15-14.44-7.15l-16.03,19.74C765.61,408.44,799.63,411.4,796.08,395.85z
"/>
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="592.944" y1="611.3531" x2="610.1517" y2="611.3531" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0.2456" style="stop-color:#AF2027"/>
<stop offset="1" style="stop-color:#F74768"/>
</linearGradient>
<path class="st45" d="M796.12,396.21c-2.55-11.2-14.44-7.15-14.44-7.15l-16.08,19.38C765.61,408.44,799.67,411.77,796.12,396.21
z"/>
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="596.2926" y1="621.1462" x2="596.2926" y2="626.7738" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st46" d="M792.41,391.68c0.04-9.32-10.28-3.56-10.28-3.56l-16.51,20.33C765.61,408.44,792.36,404.63,792.41,391.68z
"/>
<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="585.0084" y1="616.2645" x2="578.1973" y2="626.517" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st47" d="M776.73,378.66c-12.72,2.44-11.16,29.41-11.16,29.41l0.04,0.36l16.51-20.33
C782.12,388.11,785.88,376.91,776.73,378.66z"/>
<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="589.4042" y1="610.754" x2="575.9355" y2="620.36" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#A2131A"/>
<stop offset="1" style="stop-color:#EA3A5B"/>
</linearGradient>
<path class="st48" d="M776.77,379.03c-12.72,2.44-11.16,29.41-11.16,29.41l16.55-19.96
C782.17,388.47,785.92,377.27,776.77,379.03z"/>
<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="590.1244" y1="611.8249" x2="602.4364" y2="611.8249" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#C83940"/>
<stop offset="1" style="stop-color:#FF6081"/>
</linearGradient>
<path class="st49" d="M792.45,392.04c0.04-9.32-10.28-3.56-10.28-3.56l-16.55,19.96C765.61,408.44,792.4,405,792.45,392.04z"/>
</g>
</g>
</g>
<g class="heart">
<g>
<g>
<linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="596.3429" y1="620.9885" x2="593.4555" y2="628.8257" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st50" d="M785.27,384.7c-15.29-0.59-6.12,30.92-6.12,30.92l15.41-18.58C794.57,397.04,796.28,385.13,785.27,384.7z"
/>
<linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="603.9313" y1="611.5647" x2="589.3319" y2="626.7048" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#BB2C33"/>
<stop offset="1" style="stop-color:#FF5374"/>
</linearGradient>
<path class="st51" d="M785.31,385.05c-15.29-0.59-6.12,30.92-6.12,30.92l15.41-18.58C794.61,397.39,796.33,385.47,785.31,385.05
z"/>
<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="614.4991" y1="621.558" x2="614.4991" y2="628.9022" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st52" d="M808.41,403.9c-2.46-10.74-13.84-6.86-13.84-6.86l-15.37,18.93C779.2,415.97,811.82,418.82,808.41,403.9z"
/>
<linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="608.1075" y1="613.5945" x2="624.6079" y2="613.5945" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0.2456" style="stop-color:#AF2027"/>
<stop offset="1" style="stop-color:#F74768"/>
</linearGradient>
<path class="st53" d="M808.46,404.24c-2.45-10.74-13.84-6.86-13.84-6.86l-15.41,18.58C779.2,415.97,811.86,419.17,808.46,404.24
z"/>
<linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="611.3141" y1="622.9787" x2="611.3141" y2="628.375" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st54" d="M804.89,399.89c0.03-8.94-9.86-3.42-9.86-3.42l-15.84,19.49C779.2,415.97,804.84,412.32,804.89,399.89z"/>
<linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="600.494" y1="618.2949" x2="593.9628" y2="628.126" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#FF787F"/>
<stop offset="1" style="stop-color:#FF9FC0"/>
</linearGradient>
<path class="st55" d="M789.85,387.43c-12.2,2.34-10.71,28.2-10.71,28.2l0.04,0.35l15.84-19.49
C795.03,396.49,798.64,385.74,789.85,387.43z"/>
<linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="604.7081" y1="613.0066" x2="591.7931" y2="622.2177" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#A2131A"/>
<stop offset="1" style="stop-color:#EA3A5B"/>
</linearGradient>
<path class="st56" d="M789.89,387.77c-12.2,2.34-10.71,28.2-10.71,28.2l15.88-19.14C795.07,396.83,798.67,386.09,789.89,387.77z
"/>
<linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="605.4039" y1="614.0363" x2="617.2081" y2="614.0363" gradientTransform="matrix(0.7696 0.6385 0.6385 -0.7696 -69.1303 489.9352)">
<stop offset="0" style="stop-color:#C83940"/>
<stop offset="1" style="stop-color:#FF6081"/>
</linearGradient>
<path class="st57" d="M804.93,400.24c0.03-8.94-9.86-3.42-9.86-3.42l-15.88,19.14C779.2,415.97,804.89,412.66,804.93,400.24z"/>
</g>
</g>
</g>
</g>
</svg>