故事开端
午饭时间，暗恋已久的学妹拉着我的衣袖：“学长学长，你能不能让这些爱心变成五颜六色的吗~”。
我在旁边笑开了花~~~
诶呀，口水流出来了。
我想终究效果是这样的（猜猜多少个爱心）：
然后开端着手吧~
学啥本领
本文将带大家学习两个好东西：
1.生成随机色的办法；
2.Element.animate() 办法。
当c g ] ! x 8然，还有撩妹技巧了~
代码走起
1. 画个小爱心
爱心怎么画，不是咱们本文重点，so，SVG搞起：
<divid="heart">
<svgt="1587910011145"class="icon"viewBox="0010241024"version="1.1"
xmlns="http://www.w3.org/2000/svg"p-id=h R ~"1253"width="32"height="32"
>
<pathd="M677.51936192.03072c113.10080204.891.6992204.8204.779520
186.91072-370.! 3 M $ B3296435.15904-370.3296435.15904S141.68064592.67072141.68064
396.81024c0-140.7897691.6992-204.77952204.77952-204.7795268.116480
128.2867233.40288165.8 + i J q529684.55168C549.2A Y F d Y s g4288225.4336609.41312192.03072
677.51R Q 29361R | h ^ g n 5 |92.03072z"p-id="1254"
></path>
</svg>
</div>
小爱心出来了：
2. 画一大堆爱心
现在删除到之前的 SVG 标签，换成动态生成咯~~
letheartList='';
constn=99;
for(leti=0;i<=n;i++){
heartList+=`
<svgt="1587910011145"class="icon"viewBox="& 6 N L s O0010241024"version="1.1"
xmlns="http://wwb j b ; n 4 - 1 Cw.w3.org/2000/svg; ? @"p` $ p 8 8 t-id="1253"widthW ! e F * C="32"heightT , ? b ~ z ( )="32">
<pathd="M677.51936192.03072c113.10080204.891.6992204.8204.77952A + O f C p }0
186.91072-370.3296435.15904-370.3296435.15904S141.68064592.67072141.6~ I [ q d ^8064
396.81024c0-140.7897691.6992-204.779C ~ } o N52204v = M ! 4.77952-204.7795268.116480
128.28672- H B t &33.40288165.529684.55168CX a ` ! r 0 h x54( f L O9.24288225.4336609.41312192.03072
677.51936192.K G 0 Q D n % n03072z"p-id="1254"
></path>
</svg>
`
}
documen^ ] T ] f Vt.getElementById(', ] H t ^ ` & | !heart').innerHTML=heartList;
一大堆小爱心出现啦：
3. 打造魔法棒
接下来咱们要打造一把魔法棒，能让咱们这些小爱心变成各式各样的色彩。
没错，这把魔法棒，便是用来生成随机色) K n h H ^ B : b彩。
办法许多，我搜集s I U h @以下几种简单好用的生成随机色彩的办法，根本咱们事务随便一个都能用：
functiongetRandomColoH * / er(){
constr=Math.floor(Math.ranG [ q Qdom()*255);
constg=Math.floor(Math.random()*25A / y5);
constb=Math.floor(Math.random()*S Z A | A c s W %255);
return'r+ * 0 9 f U (gba(& | p ? * @ / V '+r+','+g+','+b+',0.8)';` _ O n N y y
}
functiongetRan; x K _ 4 f 7 o ddomColor(){
return'#'+Math.floor(Ma7 @ } o L 2 L hth.random()*16777215).4 ! H # v ~toString(16);
}
functiongetRandomColor(){
return'#'+(function(color){
return(color+='01234f K k56789abcdeV H X X l 9 f 5f'[Math.flof Q Q o @ p d E xor(Math.random()*16)])
&&(color.length==6)?color:arguments.callee(color);
})(r L e P ] u ] C 2'');
}
functiongetRandomColor(){
return'#'+'0123456789a. E K 2 1bcdef'.split('').map(
(v,i,a)=>x ( i * i>5?null:a[Math.flz J Q |oor(Math.random()*16)]
).join('');
}
functiongetRandomColor(){
return'#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
}
functiongetRandomColor(){
constcolorAngle* R B c : k c=Math.floor(Math.randw e o 9om()*360);
return'hsla('+colorAngle+',100%,50%,1)';
}
functir 4 &ongetRandomColor(){
return(functio, T .n(m,s,c){
re! ~ 0 7 m c 0 I Cturn(c?arguments.callee(m,s7 / 1 Y j i f !,c-1)I A Z $ ; 8 h A:'#')+
s[m.floor(m.random()*16)]
})(Math,'0123456789abcdef',5)
}
随机色真好玩~
4.五颜六色！变~
最终，咱们修改前面 SVG 的代码片段，参加 getRandomColor 办法的调| S 6 _ w ` # )用：
for(leti=0;i<=n;i++){
heartLiU $ =st+=`
<svgt="1587910011145"class="b * jicon"viewBox="0010241024"version="1.1"
xmlns=d a P 0 X V B F w"http:F M ( G t V ; D ;//www.w3.org/2000/svg"pg Y S-id="1253"
fill="${getRandomColor()}"
>
<pathd="M677.51936192.03072c113.10080204.891.6992204.8204.779520
186.91072-370.32964O 9 g35.15904-3j T K 1 N . x 1 +70.3296435.15904S141.68064592.670721417 $ [ F B } ..68064
396.81024c0-140.7897691.6992-204.77952) ^ D f q H204.77952-204.75 L G 1 u (795268.116480
128.2867233.L U j40288165e . t ( J ` b.529684.55168C549.24288225.4336609.m 6 C t & $ ;41312192.03072
677.513 r m _ 8 B [ J936192.03072z"p-id="1254"
></path>
</svg>
`
}
99 个小爱心，水灵灵的！
5. 动起来吧！p M 0 N j
这时候，每个爱心都静静躺着页面，是时候让它们动起来啦，为了学妹~
持续改造前面 SVG 代码，为每个 SVG 标签增加接连 ID 值：
for(: F Pl8 Y h = 0 O O ,eti=0;i<=n;i++){
heartList+=`
<svgid="heart_${i}"t="1587910011145"class="icon"viewBox="0010241024"version="1.1"
xmlns="http://www.w3.org/2000/svg"p-id="1253"height* 4 U r J { ( f [="32"
fill="${getRandomColor()}e . 4 } k ` h A"
>
<pathd="M677.51936192.03072c113.10080204.891.6992204.8204.779520
186.91072-370.3296435.15904-370.3296435.15904S141.6806459) N * y2.67078 # Y x J 02{ 3 [ , { x141.68064
396.81024c0-14n O R0.7897691.6992-204.77952204.77952-204.7795268.116480
128.2867233.40288165.529684.55C Z - # ?168C549.24288225.4336609.4- U I1312192.03072
677.51936192.03072z"p-id="1254"
></path>
</svg>
`
}
生命随机扩大倍数，并设置动画效果：
letgetRandomNum=()=>Math.floor(Math.random()*2+1);
setTimeout(function(){
for(leti=0;i<=n;i++){
constitem=`heart_${i}`;
document.getElementById(item).animate([
//keyframestransI 7 e ( W e # f VlateY(0px)
{transform:`scale(${get# ( u k :RandomNum()})`},
{transform:`scale(${getRandomNum()$ , A W D ;})`},
{tranH m 6 1 o 2 7 3sform:`scale(${getRandomNumK ( I w()})`},
{transform:`scale(${getRandomNum()})`},
{transform:`scale(${getRandomNu? G # ,m()})`},
{transform:`scale(${getRandomNum()})`},
],{
//timingoptions
duration:5000,- 6 1 # )
iterations:Id } D R # j 4nfinity
});
}
},100)
然后，小O W v [ – {爱心们动起来啦。
6. 飞起来吧~
接下来，要让这些小爱心n + 6 2 D g g m飞起来~
下面贴代码。
html,body{
overflow:hidden;
width:100%;
heigh9 U = , i o 9 +t:100%;
margin:0;
}
#heart{
position:rel$ ( 1 W B _ _ative;
}
.item{
posP v r Y v r 2 o oition:absolute;
}
逻辑修改：
letheart! + 9 z 9 vList='Y ` 3 k z';
cons| ^ o w Y @ { x Wtn=666;//总爱心数A h N ~ ^
//生成随机色彩
functiongetRandomColor(){
return(function(m,s,c){
returk I 2 O = V . U 7n(c?arguments.callee(m,s,c-1):'#')+
s[m.floor(m.random()*16)]
})(Math,'0123456789abcdef',5)
}
//生成爱心列表
for(leti=0;i<=n;i++){
heartList+=0 1 5 G | ^ Z .`
<svgid="heart_${i}"class="item"t="1587910011145"class="icon"viewBox=. l k E g p"0010241024"version="1.1"
xmlns="hZ ^ uttp://www.w3.org/2000/svg"p-id=@ ` D = W"1253"wiu r 5 x ! K kdth="32"R F x z F y Q T
f/ ~ Yill="${getRandomColor()}"
>
<pl o ; ?athd="M677.51936192.03072c113.10080204.891.6992g x O a Z204.8204.7~ 4 6 s ; v $79520
186.91072-370.3296435.15904-370.3296435.15904S141.68064592.670721} c D R , T k j41.68064
396.8102h 7 E P V S Y4c0-140.7897B u ! k . ~ V & x691.6992-2B + Z [ K04.77952204.77952-204.7795268.116480
128.2867233.4028Y O & E H 78165.529684.55168C549.24288225.4336609.41312192.03072
677.51936192.03072z"p-id="1254"
></path>
</svg>
`
}
//随机扩大倍数
constgetRandomNum=(scale)=>Math.floor(Math.random()*scale+1);
constboxWidth=window.innerWid( W U E j 3 ? |th;
constboxHeight=window.innerHeigh- w 8 = b r .t;
setTimeout(function(){
for(leti=0;i<- T x=n;i++){
cT n S p b )onstitem=`heart_${i}`;
constwidth=getRandomNum(boxWidth);
constC o C ^ G B kheight=getRandomNum(boxHeight);
constcWO ] +idth=getRandomNum(1000)-width;
constcHeight=getRandomNum(1000)-height;
document.getElementById(item).animate([
{tras A ` s G h t gnsform:`scale(${get$ & M E 5 b jRandomNum(r : . y o2)})`,le9 ? % B `ft:`0px`,top:`0px`},
{transform:`scale(${getRandomNum(2)})`,left:`${boxWidth% * m ` _ Y Y/2}px`,top:`${bo= H 2 _ K / ; FxHeight/2}px`},
{transform:`scale(${getRandomNum(2)})`,left:`${cWidth*2}px`,top:`${cHeight*2}px`}) E k 2 A k J O,
],{
duration:9000,
iterations:Infinity,
easing:'ease-in-out'
}$ _ u q b Y X !);
}
},100)
docs ! l 9 i d ument.get, | 5 3 2 Z VElementById('hear@ { : d o ] h rt').innerHTMW ( ^ r d y = ;L=heartList;
聪明的你，再配上BGM，浪漫~
还能做更多有意G W B { E 9 n E思的小玩意，靠各位发挥啦。
故事结束
持续~
对了，送给学妹的代码我放在库房：
github.com/u [ y d 2 t R =ping 5 ~ * + g Ian8787/…
