浠嬬粛濡備笅LearnD3:Shapes绗叚閮ㄥ垎锛屼粎涓鸿嫳鏂囩炕璇戯紝鍙慨鏀归儴鍒嗘浛鎹负闈欐€佸浘鐗囷紝濡傞渶璇烽槄璇诲師鏂囧疄鏃朵簰鍔ㄣ€傚師鏂囷細LearnD3:Animation鐗堟湰锛?020骞?鏈?4鏃ュ彂甯僌riginMyGitHubText涓庡湪绾镐笂缁樺埗鐨勫浘褰笉鍚岋紝璁＄畻鏈哄浘褰笉蹇呮槸闈欐€佺殑锛涘氨鍍忓紬鍏拌偗鏂潶鐨勬€墿涓€鏍凤紝浠栦滑鍙互閫氳繃鍔ㄧ敾娲昏繃鏉ワ紒鉁ㄤ笂闈㈢殑鎶樼嚎鍥句竴姝ユ鏄剧ず銆傝繖涓彲閫夋晥鏋滃簲璇ヨ皑鎱庝娇鐢紝鍥犱负瀹冧細寮曡捣娉ㄦ剰锛屼絾瀹冭嚦灏戝姞寮轰簡x鐨勬椂闂达紝骞剁粰鍘熸湰娌夐椃鐨勫浘琛ㄥ甫鏉ヤ簡涓€鐐规偓蹇点€傝繖閲岀殑浠ｇ爜绫讳技浜庢垜浠箣鍓嶇湅鍒扮殑杞存覆鏌擄細鎴戜滑閫夋嫨涓€涓猄VG璺緞鍏冪礌锛岃皟鐢ㄤ竴涓嚱鏁帮紙鏄剧ず锛夋潵搴旂敤杞崲锛屾渶鍚庡皢璇ュ厓绱犲祵鍏ュ埌HTML妯℃澘鏂囨湰涓€傚湪鎴戜滑杩涘叆鎶€鏈粏鑺備箣鍓嶏紝璁╂垜浠€€鍚庝竴姝ワ紝鏇村叏闈㈠湴鑰冭檻鍔ㄧ敾銆傚姩鐢讳笉鏄崟涓浘褰紝鑰屾槸闅忔椂闂村彉鍖栫殑涓€绯诲垪鍥惧舰銆傝搴忓垪鍙互琛ㄧず涓鸿繑鍥炵粰瀹氭椂闂磘鐨勫浘褰㈢殑鍗曞厓鏍硷紙鎴栧嚱鏁帮級銆備负浜嗙畝鍗曡捣瑙侊紝鎴戜滑閫氬父浣跨敤甯歌鏃堕棿锛屽叾涓璽=0鏄姩鐢荤殑寮€濮嬶紝t=1鏄粨鏉熴€傛垜浠殑鍗曞厓鐞嗚涓婂彲浠ヨ繑鍥炵粰瀹氭椂闂磘鐨勪换浣曞浘褰紝浣嗘椂闂磘鐨勫浘褰㈤€氬父涓庢椂闂磘+蔚鐨勫浘褰㈢浉浼笺€傚抚涓庡抚涔嬮棿鐨勮繖绉嶇浉浼兼€ф湁鍔╀簬瑙傜湅鑰呰窡闅忥紙鍦ㄤ笂闈紝鍙湁stroke-dasharray灞炴€ц繘琛屽姩鐢诲鐞嗭紱鍥惧舰鐨勫叾浣欓儴鍒嗕繚鎸佷笉鍙樸€傦級鍥犳锛岃繛缁殑鍔ㄧ敾閫氬父鐢辩鏁ｇ殑鍏抽敭甯у畾涔夛紝涓棿鐢辨彃鍊兼垨鐢熸垚浜掕ˉ銆傛煡鐪媠troke-dasharray灞炴€с€傚畠鏄袱涓€楀彿鍒嗛殧鐨勬暟瀛楋細绗竴涓槸鐮存姌鍙风殑闀垮害锛岀浜屼釜鏄牬鎶樺彿涔嬮棿鐨勯棿闅欑殑闀垮害銆傚鏋滅牬鎶樺彿闀垮害涓洪浂锛屽垯璇ョ嚎灏嗕笉鍙锛涘鏋滅牬鎶樺彿鐨勯暱搴︿笌绾夸竴鏍烽暱锛屽垯绾夸笉浼氭柇寮€銆傞€氳繃璋冩暣鐮存姌鍙风殑闀垮害骞朵娇闂撮殭鑷冲皯涓庣嚎鏉′竴鏍烽暱锛屾垜浠彲浠ユ帶鍒剁粯鍒剁殑绾挎潯鏁般€傛垜浠彧闇€瑕佷袱涓叧閿抚锛氶浂铏氱嚎闀垮害鍜岀嚎铏氱嚎闀垮害銆備负浜嗚緟鍔╁姩鐢伙紙浠ュ強鍏朵粬鐢ㄩ€旓級锛孌3鎻愪緵浜嗘彃鍊煎櫒銆傚叾涓渶閫氱敤鐨勬槸d3.interpolate锛屽畠鎺ュ彈鏁板瓧銆侀鑹层€佹暟瀛楀瓧绗︿覆锛岀敋鑷虫暟缁勫拰瀵硅薄銆傜粰瀹氳捣濮嬪€煎拰鍊硷紝d3.interpolate杩斿洖涓€涓嚱鏁帮紝璇ュ嚱鏁伴噰鐢ㄦ椂闂?鈮鈮?骞惰繑鍥炵浉搴旂殑涓棿鍊笺€傚畾涔夎繃娓℃椂锛屾偍鍙互鏄庣‘鎸囧畾涓€涓彃鍊煎櫒锛堝涓婃墍杩颁娇鐢╰ransition.attrTween锛夋垨璁〥3閫夋嫨锛堜娇鐢╰ransition.attr鎴杢ransition.style锛夈€傛樉寮忔寚瀹氬厑璁镐娇鐢ㄦ洿楂樼骇鐨勬彃鍊兼柟娉曪紝渚嬪缂╂斁銆佷冀鐜涙牎姝GB娣峰悎锛岀敋鑷冲舰鐘舵贩鍚堛€傜劧鑰岋紝鍔ㄧ敾涓嶄粎浠呮槸鎻掑€硷細瀹冧篃鏄椂闂淬€傛垜浠渶瑕佹瘡绉掗噸缁?0娆★紝骞舵牴鎹墍闇€鐨勫疄鏃跺拰鍔ㄧ敾鐨勫紑濮嬫椂闂村拰鎸佺画鏃堕棿璁＄畻褰掍竴鍖栨椂闂磘銆傚埌鐩墠涓烘锛屾垜浠凡缁忕湅鍒颁簡涓ょ璁℃椂鏂规硶銆傜涓€涓緷璧栦簬D3鐨勫彉鎹紝鍒涘缓鍒濆褰㈢姸锛岀劧鍚庡紑濮嬪彉鎹互瀵瑰叾杩涜淇敼锛堟彃鍏troke-dasharray鏁扮粍锛夈€傜浜屼釜渚濊禆浜庢暟鎹祦鐨凮bservable锛屾瘡娆″紩鐢ㄧ殑t鍙樺寲鏃堕噸鏂板垱寤哄浘褰紝骞朵緷璧栦簬scrubber杩涜璁℃椂銆傝繖姣斾互鍓嶇殑鏂规硶鏁堢巼浣庯紝鍥犱负鍥惧舰鏄瘡涓€甯ч兘浠庡ご寮€濮嬪垱寤虹殑锛屼絾鏇村鏄撶紪鍐欍€侽bservables鏈夊彟涓€涓帶鍒跺姩鐢荤殑寮哄ぇ宸ュ叿锛氱敓鎴愬櫒銆傚綋涓€涓敓鎴愬櫒鍗曞厓浜х敓涓€涓€兼椂锛屽畠鐨勬墽琛屼細鏆傚仠鍒颁笅涓€涓姩鐢诲抚锛屾瘡绉掓渶澶?0娆°€傜粨鏋滃€煎彲浠ュ儚鏁存暟涓€鏍风畝鍗曪紝涔熷彲浠ユ槸澧為噺鏇存柊鐨凷VG鍏冪礌锛侀壌浜嶰bservable涓彲鐢ㄧ殑鍚勭鍔ㄧ敾鏂规硶锛屾偍搴旇浣跨敤鍝竴绉嶏紵杩欏彇鍐充簬锛佸鏋滃浘褰㈣冻澶熺畝鍗曪紝鎮ㄥ彲浠ヤ粠澶村紑濮嬮噸鏂板垱寤烘瘡涓€甯э紝鎴栬€呭鏋滄偍瀹為檯涓婁笉闇€瑕佸姩鐢昏繃娓★紝鍒欎互澹版槑鏂瑰紡缂栧啓鍥惧舰銆傛崲鍙ヨ瘽璇达紝浠€涔堥兘涓嶅仛锛佸緱鐩婁簬Observable鐨勬暟鎹祦锛屸€滈潤鎬佲€濆浘鍙互鍦ㄤ笉鏇存敼浠ｇ爜鐨勬儏鍐典笅杩涜鍝嶅簲銆佷氦浜掓垨鍔ㄧ敾銆傚彟涓€鏂归潰锛屽浜庢€ц兘闇€瑕侀珮鏁堝閲忔洿鏂扮殑鏇村鏉傜殑鍔ㄦ€佸浘褰紝璇蜂娇鐢ㄨ浆鎹㈡垨鐢熸垚鍣ㄣ€傛偍杩樺彲浠ョ粍鍚堟柟娉曘€備笅闈㈢殑鍥捐〃鏈€鍒濇槸闈欐€佺殑锛屼絾缁檟瀛楁涓€涓浆鎹㈠悗鐨刢hart.update鏂规硶锛涘綋鏃犵嚎鐢靛€兼敼鍙樻椂锛岃鏂规硶琚彟涓€涓皬鍖鸿皟鐢ㄣ€傦紙杩欐浠ｇ爜鏄娇鐢╠3閫夋嫨鍣ㄥ啓鐨勶紝鑰屼笉鏄疕TML妯℃澘鏂囨湰锛屼絾鏄浘缁撴瀯鍜屽墠闈㈢殑渚嬪瓙鏄竴鏍风殑锛屾墍浠ュ皾璇曢€氳繃姣旇緝鏉ユ帹瀵间唬鐮佺殑鎰忔€濄€傦級閫氳繃鎻愪緵涓€绉嶆垨澶氱鏇存柊鏂规硶锛屽浘鍙互鏈夐€夋嫨鍦拌缃负鐗瑰畾鐨凙nimate杩囨浮鍊兼洿鏀广€傚鏋滄湁浠讳綍鍏朵粬鏇存敼锛屽浘琛ㄥ皢杩斿洖鍙嶅簲寮忓苟浠庡ご寮€濮嬮噸鏂扮粯鍒躲€傦紙濡傛灉鎮ㄦ兂鐭ラ亾锛氭偍鍙互鍦ㄥ崟鐙殑鍗曞厓涓畾涔夋洿鏂帮紝鑰屼笉鏄皢鍏朵綔涓烘柟娉曞叕寮€銆備絾鏄紝涓嶆帹鑽愯繖鏍峰仛锛屽洜涓虹紪杈戞洿鏂颁唬鐮佷笉浼氫粠澶村紑濮嬮噸鏂扮粯鍒跺浘琛紝杩欏彲鑳戒細瀵艰嚧涓嶇‘瀹氭€х殑琛屼负銆傪煒遍€氳繃鍦ㄥ浘琛ㄥ崟鍏冩牸涓畾涔夋洿鏂帮紝瀹冨彲浠ヨ闂洿鏂版湡闂存寔缁瓨鍦ㄧ殑灞€閮ㄥ彉閲忋€?杩欎釜渚嬪瓙婕旂ず浜咲3杞寸殑鍙︿竴涓柟渚跨殑鐗规€э細閫氳繃鍒囨崲鍒皌ransition.call鑰屼笉鏄痵election.call锛寈杞寸殑鍙樺寲鐜板湪鏄姩鎬佺殑鑰屼笉鏄灛鏃剁殑锛屽苟涓斾笌杩囨浮璺緞鍚屾锛佷笂闈㈢殑鍔ㄧ敾鍙秹鍙婁竴涓厓绱狅細鍥捐〃鐨勭嚎鏉°€傚鏋滀綘鎯充负澶氫釜鍏冪礌璁剧疆鍔ㄧ敾鎬庝箞鍔烇紵濡傛灉鍏冪礌闆嗛殢鏃堕棿鍙戠敓鍙樺寲锛屾柊鍏冪礌杩涘叆鏃у厓绱犻€€鍑烘€庝箞鍔烇紵缁х画闃呰锛佷笅涓€涓檮褰曞鏋滄偍瀵硅璁℃湁鏁堢殑鍔ㄧ敾鎰熷叴瓒ｏ紝鎴戝己鐑堝缓璁偍闃呰Heer鍜孯obertson2007骞村彂琛ㄧ殑璁烘枃銆婄粺璁℃暟鎹浘褰腑鐨勫姩鐢昏浆鎹€嬨€傛牴鎹簮鐮佸幓闄ゅ钩鍙颁緷璧栵紝鎻愬彇涓昏浠ｇ爜锛岀ず渚嬪涓嬶細绀轰緥1绀轰緥2绀轰緥3绀轰緥4鍙傝€冨涔燚3锛氬姩鐢?/p>
