褰撶涓€娆続ppleWatch鍦?015骞存帹鍑烘椂锛屾垜琚玏atchOS鐨勪富灞忓箷璁捐鎵€闇囨捈銆傚畠鐨勫竷灞€涓嶅悓浜庢爣鍑嗙殑缃戞牸甯冨眬锛岃€屾槸鎻愬嚭浜嗕竴涓師濮嬬殑瑙嗚鍔ㄦ€佺晫闈€備簲骞村悗锛屽綋鎴戞墦寮€杩欏潡鎵嬭〃鐨勫寘瑁呮椂锛屽畠鐨刄I闈炲父婕備寒锛屾垜浠嶇劧鎯婂徆涓嶅凡銆備絾鏄紝浠庡伐绋嬬殑瑙掑害鏉ョ湅锛屾垜浠嶇劧瀵硅繖绉嶅竷灞€鐨勫熀鏈師鐞嗘劅鍒板洶鎯戙€備綔涓轰竴鍚嶇粡楠屼赴瀵岀殑搴旂敤绋嬪簭寮€鍙戜汉鍛橈紝鎴戠煡閬撴瀯寤哄鑸祦鍜屽竷灞€瀵逛簬浠讳綍搴旂敤绋嬪簭鐨勫熀纭€閮芥槸鑷冲叧閲嶈鐨勩€侫pple鍋氬埌浜嗚繖涓€鍒囷紝骞朵笖鍏锋湁涓€瀹氱殑鐏垫椿鎬с€佺敤鎴锋弧鎰忓害鍜屽ソ濂囧績銆傚綋鐒讹紝鎴戝枩娆娇鐢–SSGrid銆丗lexbox鍜屽叾浠栫綉缁滃拰绉诲姩鎶€鏈潵鏋勫缓鍙潬鐨勫簲鐢ㄧ▼搴忓竷灞€锛屼絾鐢变簬AppleWatchBubbleUI鑳屽悗鐨勫鏉傛€э紝杩欎簺鏂规硶骞朵笉閫傜敤銆傛垜鍐冲畾鐮旂┒杩欎釜甯冨眬鐨勫悇涓柟闈紝鐗瑰埆鏄帰绱㈣瑙夎璁＄殑鍑犱綍瀛﹀拰鍙互鍗忚皟甯冨眬鐨勮璁℃暟瀛︺€傚厤璐ｅ０鏄庯細鍏充簬鐢ㄦ埛鐣岄潰鐨勫熀鏈姛鑳藉拰璁捐鐨勮璁哄畬鍏ㄥ熀浜庢垜涓汉鐨勬剰瑙侊紱Apple寰堝彲鑳藉凡缁忓疄鐜颁簡杩欑甯冨眬锛岀敋鑷冲彲鑳芥湁寰堝ぇ鐨勪笉鍚屻€傚竷灞€鐨勫熀鏈嚑浣曞舰鐘惰鎴戜滑浠庡熀鏈殑姘旀场铚傜獫缃戞牸寮€濮嬨€傜◢鍚庢垜浠皢澶勭悊璋冩暣甯冨眬涓殑姘旀场澶у皬鍜屽叾浠栫浉鍏虫晥鏋溿€傚涓嬪浘锛屾瘡闅斾竴涓畬鏁寸殑姘旀场鎺掑氨鍑虹幇灏戜竴涓皵娉＄殑鎺掞紝鏈€鍚庝竴鎺掓皵娉℃槸涓嶅畬鏁寸殑灞呬腑姘旀场鎺掋€傚涓嬪浘鎵€绀猴紝UI鍙互鍒嗕负涓変釜鍚屽績鍦嗗尯鍩燂細center锛堜腑蹇冿級銆乫ringe锛堣竟缂橈級銆乷uter锛堝鍖猴級銆傚湪瀵规皵娉″湪灞忓箷涓婄殑澶у皬鍜屼綅缃浣曞彉鍖栬繘琛屽缓妯℃椂锛屽墠涓や釜鍖哄煙鑷冲叧閲嶈銆傚悓鏃讹紝鍦ㄦ墍鏈夋皵娉℃粦鍔ㄧ殑鎯呭喌涓嬶紝濡傛灉鏌愪釜鍖哄煙鍖呭惈姘旀场鐨勪腑蹇冪偣锛屽垯鍒ゅ畾姘旀场鍦ㄨ鍖哄煙鍐呫€備腑蹇冨尯鍩熻瀹氫箟涓轰竴涓綅浜庝腑蹇冪殑锛堝渾瑙掞級鐭╁舰锛岀敱x鍗婂緞鍜寉鍗婂緞鐣屽畾锛屽苟鐢ㄨ鍗婂緞瑁呴グ銆備腑蹇冨尯鍩熺殑鎵€鏈夋皵娉￠兘浠ユ渶澶у昂瀵告覆鏌撱€傝竟缂樺尯鍩熻竟缂樺尯鍩熷畾涔変负涓績鍖哄煙澶栧湪鍏跺杈圭紭涓€瀹氳竟缂樺搴﹀唴鐨勭┖闂淬€傝鍖哄煙鐢ㄤ簬鍖呭惈姣忎釜姘旀场浠庡叾鏈€灏忓昂瀵稿埌鏈€澶у昂瀵哥殑杩囨浮銆傚綋姘旀场浠庡鍥磋繘鍏ヨ鍖哄煙鏃讹紝姘旀场浠ュ叾鏈€灏忓昂瀵哥Щ鍔紝璇ュ昂瀵哥嚎鎬у鍔狅紝鐩村埌鍒拌揪涓績鍖哄煙鏃惰揪鍒版渶澶у昂瀵搞€傚閮ㄥ尯鍩熷閮ㄥ尯鍩熷畾涔変负2D鐢诲竷涓婇櫎涓績鍜岃竟缂樺尯鍩熶箣澶栫殑鎵€鏈夌┖闂淬€傚湪杩欎釜鍖哄煙鍐咃紝鎵€鏈夌殑姘旀场閮借鏈€灏忓寲浜嗐€傚浣曞鐞嗗渾褰㈠拰闈炲渾褰㈢煩褰㈠尯鍩燂紵褰搙鍗婂緞銆亂鍗婂緞鍜岃鍗婂緞閮界浉绛夋椂锛屼腑蹇冨拰杈圭紭鍖哄煙鏄渾褰㈢殑銆傚彟澶栵紝褰撴嫄瑙掑崐寰勪负闆舵椂锛屼腑蹇冨尯鍩熷彉涓洪潪鍦嗗舰锛涚劧鑰岋紝杈圭紭鍖哄煙鐨勬嫄瑙掍粛灏嗕互杈圭紭瀹藉害鐨勫崐寰勮繘琛屽€掑渾锛堟嫄瑙掕鍒囧壊鎴愬渾瑙掗潰锛夈€傛牴鎹皵娉′綅缃绠楁皵娉″ぇ灏忚鎴戜滑娣卞叆鐮旂┒甯冨眬鐨勫熀鏈妧宸э紝璁╂垜浠娇鐢ㄥ畾涔夌殑鍖哄煙鏉ュ紑鍙戜竴涓暟瀛︽ā鍨嬶紝鏍规嵁姘旀场鍦ㄥ睆骞曚笂鐨勪綅缃绠楁皵娉＄殑澶у皬銆傞鍏堬紝鎴戜滑闇€瑕佸畾涔夊彟涓€涓叧閿殑瑙嗚鍦版爣锛氳钀藉尯鍩熴€傝鍖哄煙瀹氫箟涓虹敱鐢诲竷鐨勮鍜屼腑蹇冨尯鍩熺殑鍐呰锛堜粠杈圭紭鎻掑叆瑙掑崐寰勶級鐣屽畾鐨勫洓涓尯鍩熴€傚湪鎷愯鍖哄煙锛屽昂瀵哥浉瀵逛簬鍐呮嫄瑙掑湪寰勫悜锛堝嵆娌垮崐寰勶級淇濇寔涓嶅彉銆傜浉鍙嶏紝瀵逛簬鎭掑畾鐨剎鎴杫浣嶇疆锛岃鍖哄煙澶栫殑姘旀场淇濇寔鐩稿悓澶у皬銆傛敞鎰忥細濡傛灉涓績鍖哄煙鏄渾褰紝鍒欐墍鏈夊洓涓唴瑙掗兘浣嶄簬涓績銆傚惁鍒欙紝濡傛灉涓績鍖哄煙褰㈡垚涓€涓笉甯﹀渾瑙掔殑鐭╁舰锛屽垯鍐呰涓嶄細鍋忕鐭╁舰鐨勫杈圭紭銆傜1姝ワ細纭畾姘旀场鏄惁鍦ㄨ钀藉尯鍩熶箥涓€鐪嬶紝杩欎技涔庨渶瑕佸洓涓崟鐙殑鎿嶄綔銆傜劧鑰岋紝鎴戜滑鍙互瀵绘壘鎵€鏈夎鍖哄煙涔嬮棿鐨勭浉浼兼€э紝杩欏皢浜х敓涓€涓〃杈惧紡锛氬鏋滄皵娉″湪瑙掑尯鍩熷唴锛屽垯abs(bubble.x)>x_radius鍜宎bs(bubble.y)>y_radius鍥犱负鍙橀噺x鍗婂緞鍜寉鍗婂緞鏈川涓婃槸姝ｇ殑銆傜2姝ワ細纭畾鍖呭惈姘旀场鐨勫悓蹇冨尯鍩熷鍓嶆墍杩帮紝姘旀场鐨勫ぇ灏忛儴鍒嗗彇鍐充簬鍝釜鍚屽績鍖哄煙鍖呭惈姘旀场鐨勪腑蹇冦€傚鏋滄皵娉″湪鎷愯鍖哄煙锛岄鍏堟牴鎹嬀鑲¤窛绂诲叕寮忚绠楀畠鍒板搴斿唴瑙掔殑璺濈锛歞istance_to_internal_corner=sqrt((abs(bubble.x)-(x_radius-corner_radius))^2+(abs(bubble.y)-(y_radius-corner_radius))^2)濡傛灉杩欎釜璺濈灏忎簬瑙掑崐寰勶紝鍒欏垽鏂皵娉″湪涓績鍖哄煙锛涘鏋滆繖涓窛绂诲皬浜庤鍗婂緞鍜岃竟缂樺搴︿箣鍜岋紝鍒欏垽鏂皵娉″湪杈圭紭鍖哄煙銆傚惁鍒欙紝姘旀场浣嶄簬澶栭儴鍖哄煙銆傚鏋滄皵娉′笉灞€闄愪簬瑙掕惤鍖哄煙锛屽垯浣跨敤浠ヤ笅琛ㄨ揪寮忚绠楀畠鍒扮敾甯冧腑蹇冪殑璺濈锛歞istance_to_center=max(abs(bubble.x),abs(bubble.y))濡傛灉璺濈灏忎簬鐩稿簲鐨勫崐寰勶紙x鎴杫锛夛紝瀹冨湪涓績鍖哄煙銆傚惁鍒欙紝濡傛灉璺濈浠嶇劧灏忎簬鍗婂緞鍜岃竟缂樺搴︿箣鍜岋紝鍒欐皵娉″湪杈圭紭鍖哄煙銆傚惁鍒欙紝姘旀场浣嶄簬澶栭儴鍖哄煙銆傜3姝ワ細璁＄畻姘旀场澶у皬涓績鍖哄煙鐨勬皵娉′互鏈€澶у昂瀵告覆鏌擄紝鑰屽閮ㄥ尯鍩熺殑姘旀场鏍规湰娌℃湁鎸夋瘮渚嬫斁澶с€傝竟缂樺尯鍩熸槸涓€涓湁瓒ｇ殑鍖哄煙锛屽洜涓鸿鍖哄煙璐熻矗姘旀场澶у皬鍜岀姸鎬佷箣闂寸殑杞崲銆傛墍鏈夋皵娉＄殑褰撳墠澶у皬鍙樺寲涓庢皵娉￠€氳繃杈圭紭鍖哄煙鐨勮繘搴︽垚姝ｆ瘮銆備篃灏辨槸璇达紝璺濈澶栫紭30%鐨勬皵娉¤鏀惧ぇ浜?0%锛岃窛绂诲唴缂?0%鐨勬皵娉¤鏀惧ぇ浜?0%銆傚洜姝わ紝閫氳繃浠庤寖鍥达紙0锛岃竟缂樺搴︼級鍒拌寖鍥达紙鏈€澶у昂瀵革紝鏈€灏忓昂瀵革級锛夊唴鎻掓皵娉″埌涓棿鍖哄煙鐨勮窛绂绘潵璁＄畻姘旀场鐨勫綋鍓嶅ぇ灏忋€傝绠楀涓嬶細current_size=max_size+distance_to_middle_region/fringe_width*(min_size-max_size)**distance_to_middle_region**杩欓噷鍙互琛ㄧず涓篸istance_to_internal_corner-corner_radius濡傛灉姘旀场鍦ㄨ鍖哄煙锛屽惁鍒檓ax(abs(bubble.x)-x_radius,abs(bubble.y)-y_radius))澶浜嗭紒姣忔鐢ㄦ埛婊氬姩鏃讹紝閮介渶瑕佷负姣忎釜姘旀场閲嶅姝よ绠椼€傜湅璧锋潵寰堝鏄擄紝瀵瑰惂锛熶絾瀹為檯涓婏紝杩欏彧鏄啺灞变竴瑙掋€傝櫧鐒跺緢澶氫汉浼氬妯″瀷鐨勭幇鐘舵劅鍒版弧鎰忥紝浣嗘垜鎯宠繘涓€姝ュ畬鍠勬ā鍨嬶紝浣垮叾鑳藉瀹屾垚澶嶅埗鑻规灉鐣岄潰鐨勫．涓俱€侫dvancedFeatureCompactness鎴戞棤鎰忎腑娉ㄦ剰鍒癆ppleWatchUI浼樺寲浜嗘皵娉＄殑绱у噾搴︺€傛瘡褰撴皵娉″湪杈圭紭鍖哄煙杞彉灏哄鏃讹紝瀹冧滑浼氫繚鎸佷笌鏈€杩戞皵娉＄浉鍚岀殑娌熸Ы瀹藉害銆傜洰鍓嶏紝鎴戜滑鐨勬ā鍨嬪缁堜繚鎸佹皵娉′箣闂寸殑鎭掑畾璺濈銆備笅鍥炬樉绀轰簡鎴戜滑涓庢渶缁堢洰鏍囷紙灞曟湜鏈潵锛夌浉姣旂殑褰撳墠杩涘睍銆傚疄鐜版渶浣崇揣鍑戞€у紩鍏ヤ簡鏂扮殑澶嶆潅鎬э紝浠庣幇鍦ㄥ紑濮嬶紝闄や簡鎿嶇旱灏哄澶栵紝鎴戜滑杩橀渶瑕佺洿鎺ユ搷绾垫皵娉＄殑浣嶇疆銆備笌涔嬪墠绫讳技锛屾垜浠皢鏍规嵁姘旀场鏄惁鍖呭惈鍚屽績鍖哄煙浠ュ強姘旀场鏄惁浣嶄簬瑙掑尯鍩熸潵骞崇Щ姣忎釜姘旀场銆備腑蹇冨尯鍩熺殑姘旀场宸茬粡绱у瘑鍫嗙Н锛屽洜姝ゆ棤闇€绉诲姩銆傚閮ㄥ尯鍩熺殑姘旀场鍚戝唴绉诲姩锛岀洿鍒拌揪鍒拌姘旀场鐨勬渶澶у昂瀵搞€傚鏋滆繖浜涙皵娉′綅浜庤钀藉尯鍩燂紝瀹冧滑灏嗗钩绉诲埌鐩稿簲鐨勫唴瑙掓垨鐢诲竷鐨勪腑蹇冦€傝竟缂樺尯鍩熷啀娆¤礋璐ｈ繖涓ょ鐘舵€佷箣闂寸殑杞崲銆備笌姘旀场鐨勫ぇ灏忎竴鏍凤紝姘旀场骞崇Щ鐨勫ぇ灏忕敱涓績鍖哄煙锛堣寖鍥达紙杈圭紭瀹藉害锛?锛夊埌鑼冨洿锛堟渶澶у昂瀵革紝0锛夛級鐨勮窛绂绘彃鍊肩粰鍑恒€傦紙鎻掑€兼垨鍐呮彃娉曪紙鑻辨枃锛歩nterpolation锛夋槸閫氳繃宸茬煡鐨勩€佺鏁ｇ殑鏁版嵁鐐癸紝鍦ㄤ竴涓寖鍥村唴璁＄畻鍑烘柊鐨勬暟鎹偣鐨勮繃绋嬫垨鏂规硶銆傦級translation_magnitude=distance_to_middle_region/fringe_width*max_size涔嬪墠鐨勬柟鍚戣鍒欎篃閫傜敤銆傞噸鍔涜繖涓壒寰佹槸鎴戝嚟鐫€鑷繁鐨勬兂璞″姏鎯宠薄鍑烘潵鐨勪竴涓蹇碘€斺€旇嫻鏋滅殑姘旀场甯冨眬骞朵笉涓€瀹氳兘琛ㄧ幇鍑烘潵銆傚敖绠″姝わ紝鎴戞兂閫氳繃灏嗚繙澶勭殑姘旀场鍚稿紩鍒颁腑蹇冨尯鍩熸潵杩涗竴姝ユ彁楂樻皵娉′箣闂寸殑绱у瘑搴︺€備护浜烘儕璁剁殑鏄紝瀹炵幇閲嶅姏灞炴€ф瘮杩勪粖涓烘鎵ц鐨勪换浣曞叾浠栬В鏋勫彉鎹㈤兘瀹规槗銆傜畝鑰岃█涔嬶紝閲嶅姏鏁堝簲娑夊強灏嗗閮ㄥ尯鍩熺殑姘旀场骞崇Щ鍒拌竟缂樺尯鍩燂紝涓庢皵娉′笌杈圭紭鐨勮窛绂绘垚姝ｆ瘮銆傚嚭浜庢垜浠殑鐩殑锛屾垜浠畾涔変簡姘旀场鍒拌竟缂樼殑璺濈涓庝綅绉讳箣闂寸殑绾挎€у叧绯伙紝浣嗚繖鍙互閫氳繃璁稿涓嶅悓鐨勬柟寮忓疄鐜帮紙鎸囨暟銆佸钩鏂广€佸钩鏂规牴绛夛級銆傚閮ㄥ尯鍩熺殑姘旀场绉诲姩鐨勮窛绂诲彲浠ユ弿杩颁负鐢扁€滅揣鍑戞€р€濊〃绀虹殑鏁伴噺鍊硷紝鍔犱笂涓€涓檮鍔犲€硷細distance_to_fringe_region*gravitation鍏朵腑鍒拌竟缂樺尯鍩熺殑璺濈鍙互琛ㄧず涓篸istance_to_middle_region-fringe_width鍜実ravity鏄竴涓瘮鐜囧父鏁般€傚€间负0琛ㄧず娌℃湁閲嶅姏锛屽€间负1琛ㄧず澶栭儴姘旀场涔嬮棿娌℃湁鍒嗙銆傚綋閲嶅姏浠嬩簬杩欎袱涓€间箣闂存椂鏁堟灉鏈€浣炽€備粠鐞嗚鍒板簲鐢ㄤ綔涓轰竴鍚嶅React.js鐫€杩风殑Web寮€鍙戜汉鍛橈紝鎴戞兂灏嗘垜鐨勫彂鐜板紑婧愮粰璁捐鍜屽紑鍙戠ぞ鍖恒€傛寜鐓ф湰鏂囨弿杩扮殑姝ラ锛屾垜瀹炵幇浜嗕竴涓簮鐮丷eact缁勪欢锛屼緵澶у浣跨敤銆傝繖绉嶅寘鍚墍鏈夎璁虹殑鍙帶鍙橀噺锛堜互鍙婃洿澶氾級鐨勬娊璞℃槸楂樺害鍙厤缃殑銆傝甯冨眬杩樺厑璁镐娇鐢ㄨ嚜瀹氫箟姘旀场缁勪欢鏉ュ疄鐜板熀鏈殑鍙畾鍒舵€с€傛垜杩笉鍙婂緟鍦版兂鐪嬬湅浣犵敤杩欎釜甯冨眬鍒涢€犱簡浠€涔堬紒缁撹鎰熻阿鎮ㄩ槄璇绘垜鐨勬枃绔狅紝甯屾湜鎮ㄦ湁鎵€鍚彂锛佽闅忔椂鍦ㄨ瘎璁洪儴鍒嗙暀涓嬪弽棣堟垨闂銆傝祫婧愬湪绾緿emoGithub浠撳簱馃寛浠婂ぉ鐨勬枃绔犲垎浜埌姝ょ粨鏉熴€傚鏋滃枩娆㈡湰鏂囷紝璇风偣璧炪€乻tar銆佸叧娉ㄦ垜锛堝叕浼楀彿锛氬墠绔搧铔嬶級馃幆鍘熸枃鍦板潃锛氳В鏋勮嫻鏋滄墜琛ㄧ殑鏍囧織鎬ф场娉I鍘熸枃浣滆€咃細BlakeSanie缈昏瘧鑷細鎺橀噾缈昏瘧椤圭洰姘镐箙閾炬帴鍒版湰鏂囷細https://github.com/xitu/gold-miner/blob/master/article/2021/deconstructing-the-iconic-apple-watch-bubble-ui.md璇戣€咃細ZhiZhuZhu锛堣泲閾佽泲鍚屽锛夋牎瀵癸細Hoarfroster
