GSAP staggerTo（）-每个元素的随机参数

时间：2019-05-07 14:59:45

标签： javascript svg bezier gsap

我正在尝试通过使每个人的路径不同来在心脏上传播效果。

这是我的代码：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")

因此，所有心脏都遵循相同的预定路径。

有没有一种方法可以使每个心脏都有不同的路径？

1 个答案:

答案 0 :(得分：0)

一个选择是，每次完成心形动画时都重新创建它，这样将重新分配随机值。检查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>

相关问题
最新问题