鍓嶈█鎴戠粡甯稿湪Codepen涓婄湅鍒拌嫳闆勪滑鐢⊿VG缁樺埗浠や汉闅句互缃俊鐨勫姩鐢汇€傛垜涓€鐩村緢濂藉瀹冧滑鏄浣曞伐浣滅殑銆傛垜鎬昏寰楄繖闇€瑕佸SVG鏈夋繁鍏ョ殑浜嗚В锛岃嚜宸辩敾閭ｄ簺SVG鐨勫浘妗堬紝鎵嶆湁鍔炴硶璁╀粬鍔ㄨ捣鏉ャ€備絾鍏跺疄浠婂ぉ鏁欏ぇ瀹朵竴涓畝鍗曠殑trick锛岃浣犲揩閫熷疄鐜颁竴涓猻vg鍔ㄧ敾锛佹墦寮€Codepen锛岀偣鍑荤晫闈腑鐨勫缓閫犳寜閽紝灏卞彲浠ョ敤鍔ㄧ敾寤洪€犳埧瀛愶紝璁╁畠鍗囪捣涓€鐐圭儫锛侌煆璫odepen瀵绘壘婕備寒鐨剆vg鍥炬鏃㈢劧涓嶈兘鑷繁鐢伙紝閭ｅ氨鎵剧幇鎴愮殑搴撳惂銆傛湁寰堝svg搴撱€侳laticon銆乮confont銆両confinder鎴杋cons8绛夌綉绔欏皢鎻愪緵璁稿鍏嶈垂鐨剆vg鍥炬銆傚垎鏋恠vgpattern鎵撳紑devtool瑙傚療svgpattern锛屼細鐪嬪埌濡備笅缁撴灉锛氬厓绱犱腑鐨刾ath鍜宑ircle閮芥槸svgDOM鍏冪礌锛屽垎鍒唬琛╯vgpattern涓殑鐩寸嚎鍜屽渾銆備緥濡傪煂帮細涓婇潰浠ｇ爜涓璬鐨勫唴瀹癸細M浠ｈ〃鎶婄瑪绉诲埌(10,25)锛岀劧鍚嶭鐢讳竴鏉＄嚎鍒?10,75)锛屾渶鍚庡洖鍒拌捣鐐圭敾涓夎褰€傞€氳繃devtool锛屾垜浠彲浠ョ湅鍒版瘡鏉¤矾寰勫搴攑attern鐨勫摢涓€閮ㄥ垎锛氳繖涓椂鍊欙紝鎴戜滑搴旇褰㈡垚涓€涓猧dea銆傚洜涓烘垜浠彲浠ョ煡閬撴瘡涓厓绱犲搴斾簬妯″紡鐨勫摢涓€閮ㄥ垎锛屾墍浠ユ垜浠彲浠ュ鎴戜滑鎯宠鍔ㄧ敾鐨凞OM鍏冪礌杩涜鎿嶄綔锛佸鏋淭imelineLite/TimelineMax宸ュ叿浣跨敤CSS鎴栬€匤avaScript閫氳繃id鍜宑lassName鑷澶勭悊鍔ㄧ敾锛岃繕鏄瘮杈冨洶闅剧殑锛屾洿閲嶈鐨勬槸浼氭秷鑰楀ぇ閲忕殑鏃堕棿锛屾墍浠ユ垜浠笉寰椾笉鍊熺敤宸ュ叿銆俆imeline(Lite|Max)鍜孴weenMax鏄憲鍚嶇殑GreenSockAnimationPlatform锛堢畝绉癎SAP锛夊紩鍏ョ殑鏃堕棿绾匡紝鍙互浣滀负鍔ㄧ敾鎴栧叾浠栨椂闂寸嚎鐨勫鍣紝鏂逛究鎺у埗鏁翠釜鍔ㄧ敾鍜岀簿纭鐞嗘椂闂淬€侴SAP鐢氳嚦涓烘垜浠彁渚涗簡涓€涓狤aseVisualizer鏉ュ睍绀烘瘡涓狤ase鍑芥暟鐨勬晥鏋滐紝椤轰究闄勪笂浠ｇ爜锛歝odepen涓婄殑鍑犺浠ｇ爜鍙互瀹炵幇浠ヤ笅鏁堟灉锛欸SAP鍏ラ棬GSAP鐨凙PI闈炲父寮哄ぇ馃憤锛屽苟鏈夌浉鍏崇ぞ鍖猴細瀹樼綉鏂囨。銆佽鍧涖€乀imelineMax涓枃鎵嬪唽銆傚湪鏈€鍒濈殑寤烘埧馃尠涓紝鎴戜富瑕佷娇鐢ㄤ簡TimelineMax鐨刦rom鍜宻taggerFrom銆傝繖涓や釜API鍙渶瑕佽缃垵濮嬪€硷紝浠栧氨浼氬湪鎸囧畾鏃堕棿鍐呭畬鎴愯ˉ闂村姩鐢伙細tl.from("#House>rect:nth-child(24)",1,{scaleX:0,transformOrigin:"center",ease:Power2.easeOut})杩欎竴姝ユ垜浠皢CSSSelector#House>rect:nth-child(24)杩欎釜鍏冪礌锛屼互scaleX涓?寮€濮嬶紝浠ヤ腑蹇冿紙center锛変负鍙樺舰璧风偣锛屼娇鐢≒ower2.easeOut锛屼竴绉掑唴鎭㈠鍘熺姸锛岃繘琛岃ˉ闂村姩鐢汇€?staggerFrom(["#House>path:nth-child(34)","#House>path:nth-child(32)"],0.8,{scaleY:0,transformOrigin:"bottom",ease:鍙嶅脊銆俥aseOut,stagger:0.2},0,"scene1+=0.5")鍜宖rom绫讳技锛屽彧鏄痵taggerFrom鍙互涓€娆℃斁澶氫釜CSSSelector锛屼娇鐢╯tagger灞炴€ц缃暟缁勪腑Selectors搴旇鐨勬椂闂村樊鍑虹幇銆傝缁嗙殑API鍙傛暟璇峰弬鑰冨畼鏂规枃妗ｏ紝鐒跺悗杩斿洖鎴戜滑鐨凷VG銆傚湪devtool鐨勫府鍔╀笅锛屽緢瀹规槗鍘绘帀svg鍐呴儴鍏冪礌鐨凜SSSelector銆傚湪鍏冪礌闈㈡澘涓壘鍒板搴旂殑DOM鍏冪礌鐐瑰嚮鍙抽敭锛岄€夋嫨Copy->Copyselector锛屽彲浠ョ洿鎺ュ鍒跺埌鍏冪礌鐨凜SSSelector涓細鐜板湪鎴戜滑鍙互寰楀埌svg涓换鎰忛儴鍒嗙殑CSSSelector锛岀煡閬撲簡濡備綍浣跨敤GSAPAPI鍋氳ˉ闂村姩鐢伙紝鐜板湪鏄椂鍊欑粨鍚堣捣鏉ヤ簡锛佽鎴戜滑鍏堣皟鏁村熀鏈竷灞€銆備竴鑸湪绌虹櫧鐨凥tml涓洿鎺ユ斁缃畇vg鏃讹紝澶ч儴鍒嗙殑鍥炬閮戒細闈犺繎椤甸潰鐨勫乏涓婅銆傛垜浠彲浠ュ簲鐢╩argin:0auto浣垮叾灞呬腑锛岀湅璧锋潵浼氭洿椤虹溂锛屼篃鍙互娣诲姞涓€浜沺adding銆傛垜浠湪椤甸潰涓坊鍔犱竴涓寜閽潵璋冪敤鍔ㄧ敾锛?!--htmlpart-->鏋勫缓锛?/button>鐒跺悗鎴戜滑浣跨敤TimelineMax鎻愪緵鐨剆taggerFrom鍑芥暟锛屼娇鐢╠evtool鎵惧嚭婊戞澘杞︾殑杞瓙锛屽鍒朵粬浠殑CSSSelector锛屽苟杈撳叆staggerFrom鍑芥暟鍙傛暟锛岃缃畑鐨剆cale鍜寉杞翠粠0寮€濮嬶紝浠庝腑蹇冨鍔狅紝浣跨敤Bounce.easeOut鐨別ase鍑芥暟锛屼娇鐢╯tagger鐨勫睘鎬у€硷細鍥涗釜Selector涔嬮棿鐨?.2浣滀负tween鍔ㄧ敾鍑虹幇鐨勬椂闂村樊锛歝onsttl=鏂扮殑鏃堕棿绾挎渶澶у€硷紙锛夛紱tl.staggerFrom(["#Capa_1>g>path:nth-child(1)","#Capa_1>circle:nth-child(7)","#Capa_1>path:nth-child(6)","#Capa_1>circle:nth-child(5)"],1,{scaleY:0,scaleX:0,transformOrigin:"center",ease:Bounce.easeOut,stagger:0.2})閫氳繃鍑犺浠ｇ爜锛屾垜浠彲浠ヨ鎴戜滑鐨勬粦鏉胯溅鍔ㄨ捣鏉ワ紒浠ｇ爜绗旇ˉ闂存槸涓€涓湳璇紝鐢ㄤ簬鎻忚堪閫愬抚搴忓垪锛屾湁鏃剁О涓衡€滀腑闂粹€濄€傚湪杩欎竴鐐逛笂锛屼竴涓姩浣滃鑷翠笅涓€涓祦鐣呯殑鍔ㄤ綔銆備负浜嗗畬鍠勫姩鐢伙紝鍙互鎶奣imelineMax鐪嬫垚涓€涓椂闂磋酱锛屾寜鐓ф寚瀹氱殑椤哄簭鎵ц鍔ㄧ敾锛岃€宻taggerFrom鍙互璁╁涓狣OM鍏冪礌鍚屾椂鎸夋椂闂寸◢鏈変笉鍚岀殑椤哄簭寮€濮嬶紝鎴戜滑涔熷彲浠ヨ缃竴浜汧lags鎸囧畾绛夊緟鍝簺鍔ㄧ敾瀹屾垚鍚庯紝鍏朵粬鍔ㄧ敾灏嗙户缁€傛渶鍚庯紝鍙戞尌鑷繁鐨勫垱鎰忥紝鍒╃敤鍚勭AP鈥嬧€婭鎵撻€犱竴濂楃粍鍚堟嫵馃憡锛歝odepen缁撹馃帀鐪嬪埌杩欓噷锛屾槸涓嶆槸杩笉鍙婂緟鎯宠瘯璇曚簡鍛紵鎬讳箣锛屾垜瑙夊緱杩樻槸铔湁鎰忔€濈殑锛屽笇鏈涘鐪嬭繖绡囨枃绔犵殑浜烘垨澶氭垨灏戞湁鎵€甯姪銆傛渶鍚庯紝鎴戞兂涓庢偍鍒嗕韩鎴戠殑鏂囩珷灏侀潰鍙傝€冩枃绔狆煋淕reenSockAnimationPlatformHowtoCreateBeautifulSVGAnimationsEasierly涓殑涓€涓緢閰风殑婕旂ず
