本技術(shù)涉及智能終端，尤其涉及一種開(kāi)關(guān)控件的顯示方法及電子設(shè)備。

背景技術(shù)：

1、開(kāi)關(guān)，英文為switch，常常被翻譯為開(kāi)關(guān)、滑動(dòng)開(kāi)關(guān)、切換開(kāi)關(guān)等。開(kāi)關(guān)控件，作為終端界面中可直接操作的控件，為用戶提供了兩個(gè)互斥選項(xiàng)(如開(kāi)/關(guān)、是/否、啟動(dòng)/禁用)以供選擇。

2、開(kāi)關(guān)控件最重要的作用就是立即打開(kāi)或關(guān)閉某個(gè)功能，并向用戶清晰地展示開(kāi)關(guān)狀態(tài)。因此，如何在開(kāi)關(guān)控件上增加讓用戶感興趣的視覺(jué)效果，尤為重要。

技術(shù)實(shí)現(xiàn)思路

1、為了解決上述技術(shù)問(wèn)題，本技術(shù)實(shí)施例提供一種開(kāi)關(guān)控件的顯示方法及電子設(shè)備。該方法中，在開(kāi)關(guān)控件上增加了能讓用戶感興趣的視覺(jué)效果，提升了用戶對(duì)開(kāi)關(guān)控件的使用體驗(yàn)。

2、第一方面，本技術(shù)實(shí)施例提供一種開(kāi)關(guān)控件的顯示方法。其中，開(kāi)關(guān)控件包括軌道和第一圖標(biāo)，第一圖標(biāo)在軌道中滑動(dòng)，第一圖標(biāo)上顯示有第二圖標(biāo)；當(dāng)?shù)谝粓D標(biāo)位于軌道中第一位置時(shí)，開(kāi)關(guān)控件處于開(kāi)啟狀態(tài)或關(guān)閉狀態(tài)，第二圖標(biāo)的形狀為第一形狀；當(dāng)?shù)谝粓D標(biāo)位于軌道中第二位置時(shí)，開(kāi)關(guān)控件處于關(guān)閉狀態(tài)或開(kāi)啟狀態(tài)，第二圖標(biāo)的形狀為第二形狀。該開(kāi)關(guān)控件的顯示方法，應(yīng)用于電子設(shè)備中，包括：第一圖標(biāo)在軌道中滑動(dòng)的過(guò)程中，第二圖標(biāo)的形狀隨第一圖標(biāo)的滑動(dòng)偏移量線性變化。

3、示例性的，軌道可以是圖4中所示的背景軌道201，第一圖標(biāo)可以是圖4中所示的圓形手柄202，第二圖標(biāo)可以是圖4中所示的io標(biāo)識(shí)。

4、示例性的，第一位置和第二位置可以是軌道中滑動(dòng)區(qū)域的兩端。例如，參照?qǐng)D6a，第一位置是t0時(shí)刻圓形手柄所在的位置，第二位置可以是t7時(shí)刻圓形手柄所在的位置。再例如，參照?qǐng)D6a，第一位置是t7時(shí)刻圓形手柄所在的位置，第二位置可以是t0時(shí)刻圓形手柄所在的位置。

5、示例性的，第一圖標(biāo)在軌道中滑動(dòng)的過(guò)程中，第二圖標(biāo)的形狀尺寸與第一圖標(biāo)的滑動(dòng)偏移量呈線性關(guān)系。又示例性的，第一圖標(biāo)在軌道中滑動(dòng)的過(guò)程中，第二圖標(biāo)的某一方向上的尺寸(如寬或高等)與第一圖標(biāo)的滑動(dòng)偏移量呈線性關(guān)系。

6、其中，第一圖標(biāo)的滑動(dòng)偏移量可以是指第一圖標(biāo)相對(duì)于某初始位置(如第一位置或第二位置)的偏移量。

7、這樣，開(kāi)關(guān)控件中第一圖標(biāo)滑動(dòng)的過(guò)程中，第一圖標(biāo)上顯示的第二圖標(biāo)的形狀隨第一圖標(biāo)的滑動(dòng)偏移量線性變化，以此增加了能讓用戶感興趣的視覺(jué)效果，提升了用戶對(duì)開(kāi)關(guān)控件的使用體驗(yàn)。

8、根據(jù)第一方面，當(dāng)?shù)谝粓D標(biāo)位于第一位置時(shí)，軌道和第二圖標(biāo)的顏色為第一顏色；當(dāng)?shù)谝粓D標(biāo)位于第二位置時(shí)，軌道和第二圖標(biāo)的顏色為第二顏色；該顯示方法還包括：當(dāng)?shù)谝粓D標(biāo)從第三位置滑動(dòng)至第一位置時(shí)，軌道和第二圖標(biāo)的顏色由第二顏色逐漸變換為第一顏色；當(dāng)?shù)谝粓D標(biāo)從第三位置滑動(dòng)至第二位置時(shí)，軌道和第二圖標(biāo)的顏色由第一顏色逐漸變換為第二顏色；其中，第三位置為第一位置與第二位置的中點(diǎn)位置。

9、這樣，第一圖標(biāo)在軌道中滑動(dòng)的過(guò)程中，第一圖標(biāo)滑動(dòng)至軌道中點(diǎn)位置觸發(fā)開(kāi)關(guān)控件的顏色變化動(dòng)效，進(jìn)一步提升了用戶視覺(jué)體驗(yàn)。

10、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，第一形狀和第二形狀的高度相等；在第一圖標(biāo)在軌道中滑動(dòng)的過(guò)程中，第二圖標(biāo)的形狀變化量與第一圖標(biāo)的滑動(dòng)偏移量呈線性關(guān)系，包括：在第一圖標(biāo)在軌道中滑動(dòng)的過(guò)程中，第二圖標(biāo)的寬度隨第一圖標(biāo)的滑動(dòng)偏移量線性變化。

11、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，開(kāi)關(guān)控件處于關(guān)閉狀態(tài)時(shí)，第二圖標(biāo)的形狀為圓形；開(kāi)關(guān)控件處于開(kāi)啟狀態(tài)時(shí)，第二圖標(biāo)的形狀為圓角矩形。

12、這樣，將機(jī)械開(kāi)關(guān)上用于標(biāo)識(shí)開(kāi)啟或關(guān)閉狀態(tài)的“i”、“o”符號(hào)，應(yīng)用于開(kāi)關(guān)控件的顯示中，分別用于指示功能(終端功能或應(yīng)用功能等)的開(kāi)啟狀態(tài)或關(guān)閉狀態(tài)，以此提升了用戶對(duì)開(kāi)關(guān)控件的狀態(tài)感知。

13、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，第一圖標(biāo)和第二圖標(biāo)的中心點(diǎn)重合。這樣，開(kāi)關(guān)控件的外觀更加美觀。

14、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，該顯示方法還包括：電子設(shè)備響應(yīng)于對(duì)開(kāi)關(guān)控件的點(diǎn)擊操作，開(kāi)關(guān)控件的第一圖標(biāo)由第一位置滑動(dòng)至第二位置，或者第一圖標(biāo)由第二位置滑動(dòng)至第一位置。這樣，用戶通過(guò)點(diǎn)擊操作即可觸發(fā)開(kāi)關(guān)控件狀態(tài)的切換。

15、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，電子設(shè)備響應(yīng)于對(duì)開(kāi)關(guān)控件的點(diǎn)擊操作，第一圖標(biāo)由第一位置滑動(dòng)至第二位置，或者第一圖標(biāo)由第二位置滑動(dòng)至第一位置，包括：電子設(shè)備響應(yīng)于對(duì)開(kāi)關(guān)控件的觸摸操作，縮小第一圖標(biāo)和第二圖標(biāo)的尺寸；電子設(shè)備響應(yīng)于觸摸操作取消，第一圖標(biāo)由第一位置滑動(dòng)至第二位置，或者第一圖標(biāo)由第二位置滑動(dòng)至第一位置，放大還原第一圖標(biāo)和第二圖標(biāo)的尺寸。

16、這樣，在開(kāi)關(guān)控件狀態(tài)切換的過(guò)程中，增加了開(kāi)關(guān)控件第一圖標(biāo)和第二圖標(biāo)的縮小動(dòng)效和放大動(dòng)效，進(jìn)一步提升了用戶視覺(jué)體驗(yàn)和使用體驗(yàn)。

17、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，第一圖標(biāo)由第一位置滑動(dòng)至第二位置，包括：在第一圖標(biāo)沿第一方向由第一位置滑動(dòng)至軌道的邊界處之后，第一圖標(biāo)沿第二方向滑動(dòng)至第二位置。相應(yīng)的，第一圖標(biāo)由第二位置滑動(dòng)至第一位置，包括：在第一圖標(biāo)沿第二方向由第二位置滑動(dòng)至軌道的邊界處之后，第一圖標(biāo)沿第一方向滑動(dòng)至第一位置。其中，第一方向?yàn)橛傻谝晃恢弥赶虻诙恢玫姆较颍诙较驗(yàn)橛傻诙恢弥赶虻谝晃恢玫姆较?。這樣，在第一圖標(biāo)在軌道中滑動(dòng)的過(guò)程中，增加了第一圖標(biāo)滑動(dòng)回彈的動(dòng)畫效果，進(jìn)一步提升了用戶視覺(jué)體驗(yàn)。

18、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，第一圖標(biāo)滑動(dòng)動(dòng)畫的關(guān)鍵幀曲線為過(guò)阻尼振動(dòng)的位移變化曲線。

19、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，電子設(shè)備響應(yīng)于對(duì)開(kāi)關(guān)控件的點(diǎn)擊操作，第一圖標(biāo)由第一位置滑動(dòng)至第二位置，或者第一圖標(biāo)由第二位置滑動(dòng)至第一位置，包括：電子設(shè)備響應(yīng)于對(duì)開(kāi)關(guān)控件的熱區(qū)的點(diǎn)擊操作，第一圖標(biāo)由第一位置滑動(dòng)至第二位置，或者第一圖標(biāo)由第二位置滑動(dòng)至第一位置；其中，開(kāi)關(guān)控件的熱區(qū)尺寸大于開(kāi)關(guān)控件的尺寸，開(kāi)關(guān)控件的熱區(qū)區(qū)域包括或部分包括與開(kāi)關(guān)控件對(duì)應(yīng)的文字描述區(qū)域。這樣，將開(kāi)關(guān)控件熱區(qū)增大，更加便于用戶對(duì)開(kāi)關(guān)控件進(jìn)行操作。

20、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，該顯示方法還包括：電子設(shè)備響應(yīng)于在開(kāi)關(guān)控件中的滑動(dòng)操作，第一圖標(biāo)根據(jù)操作偏移量在軌道中滑動(dòng)；電子設(shè)備響應(yīng)于滑動(dòng)操作停止，第一圖標(biāo)停止滑動(dòng)；電子設(shè)備響應(yīng)于滑動(dòng)操作取消，第一圖標(biāo)移動(dòng)至第一位置或第二位置。這樣，用戶通過(guò)滑動(dòng)操作也可觸發(fā)開(kāi)關(guān)控件狀態(tài)的切換。而且，第一圖標(biāo)的滑動(dòng)動(dòng)畫呈現(xiàn)的是跟手滑動(dòng)的狀態(tài)，提升了用戶對(duì)開(kāi)關(guān)控件的操控感。

21、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，電子設(shè)備響應(yīng)于在開(kāi)關(guān)控件中的滑動(dòng)操作，第一圖標(biāo)根據(jù)操作偏移量在軌道中滑動(dòng)，包括：電子設(shè)備響應(yīng)于對(duì)開(kāi)關(guān)控件的觸摸操作，縮小第一圖標(biāo)和第二圖標(biāo)的尺寸；電子設(shè)備響應(yīng)于在開(kāi)關(guān)控件中的滑動(dòng)操作，圓形手柄根據(jù)操作偏移量在軌道中滑動(dòng)；電子設(shè)備響應(yīng)于滑動(dòng)操作取消，第一圖標(biāo)移動(dòng)至第一位置或第二位置，包括：響應(yīng)于滑動(dòng)操作取消，第一圖標(biāo)移動(dòng)至第一位置或第二位置，放大還原第一圖標(biāo)和第二圖標(biāo)的尺寸。這樣，在開(kāi)關(guān)控件狀態(tài)切換的過(guò)程中，增加了開(kāi)關(guān)控件第一圖標(biāo)和第二圖標(biāo)的縮小動(dòng)效和放大動(dòng)效，進(jìn)一步提升了用戶視覺(jué)體驗(yàn)和使用體驗(yàn)。

22、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，電子設(shè)備響應(yīng)于滑動(dòng)操作取消，第一圖標(biāo)移動(dòng)至第一位置或第二位置，包括：電子設(shè)備響應(yīng)于滑動(dòng)操作取消，獲取第一圖標(biāo)在軌道中的當(dāng)前位置；在當(dāng)前位置為第一位置或第二位置時(shí)，第一圖標(biāo)停止滑動(dòng)；在當(dāng)前位置處于第一位置與第三位置之間時(shí)，第一圖標(biāo)由當(dāng)前位置移動(dòng)至第一位置；在當(dāng)前位置處于第二位置與第三位置之間時(shí)，第一圖標(biāo)由當(dāng)前位置移動(dòng)至第二位置；其中，第三位置為第一位置與第二位置的中點(diǎn)位置。這樣，在用戶通過(guò)觸摸滑動(dòng)操作或按壓滑動(dòng)操作控制開(kāi)關(guān)控件時(shí)，開(kāi)關(guān)控件的顯示動(dòng)畫與用戶離手位置有關(guān)。而且，無(wú)論用戶何時(shí)離手，開(kāi)關(guān)控件均可保持或切換其開(kāi)關(guān)狀態(tài)。

23、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，第一圖標(biāo)由當(dāng)前位置移動(dòng)至第一位置，包括：在第一圖標(biāo)沿第二方向由當(dāng)前位置滑動(dòng)至軌道的邊界處之后，第一圖標(biāo)沿第一方向滑動(dòng)至第一位置；相應(yīng)的，第一圖標(biāo)由當(dāng)前位置移動(dòng)至第二位置，包括：在第一圖標(biāo)沿第一方向由當(dāng)前位置滑動(dòng)至軌道的邊界處之后，第一圖標(biāo)沿第二方向滑動(dòng)至第二位置；其中，第一方向?yàn)橛傻谝晃恢弥赶虻诙恢玫姆较?，第二方向?yàn)橛傻诙恢弥赶虻谝晃恢玫姆较颉＿@樣，在第一圖標(biāo)跟手滑動(dòng)的過(guò)程中，若用戶離手時(shí)第一圖標(biāo)還未滑動(dòng)至第一位置或第二位置，則顯示第一圖標(biāo)滑動(dòng)動(dòng)效，且增加了第一圖標(biāo)滑動(dòng)回彈的動(dòng)畫效果，進(jìn)一步提升了用戶視覺(jué)體驗(yàn)。

24、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，第一圖標(biāo)滑動(dòng)動(dòng)畫的關(guān)鍵幀曲線為過(guò)阻尼振動(dòng)的位移變化曲線；其中，第一圖標(biāo)滑動(dòng)動(dòng)畫為第一圖標(biāo)由當(dāng)前位置移動(dòng)至第一位置或第二位置的動(dòng)畫。

25、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，電子設(shè)備響應(yīng)于在開(kāi)關(guān)控件中的滑動(dòng)操作，第一圖標(biāo)根據(jù)操作偏移量在軌道中滑動(dòng)，包括：電子設(shè)備響應(yīng)于在開(kāi)關(guān)控件的熱區(qū)中的滑動(dòng)操作，第一圖標(biāo)根據(jù)操作偏移量在軌道中滑動(dòng)；其中，開(kāi)關(guān)控件的熱區(qū)尺寸大于開(kāi)關(guān)控件的尺寸，開(kāi)關(guān)控件的熱區(qū)區(qū)域包括或部分包括與開(kāi)關(guān)控件對(duì)應(yīng)的文字描述區(qū)域。這樣，將開(kāi)關(guān)控件熱區(qū)增大，更加便于用戶對(duì)開(kāi)關(guān)控件進(jìn)行操作。

26、根據(jù)第一方面，或者以上第一方面的任意一種實(shí)現(xiàn)方式，開(kāi)關(guān)控件的顯示顏色和/或透明度，與電子設(shè)備的顯示模式匹配。這樣，開(kāi)關(guān)控件的適用性更強(qiáng)，用戶視覺(jué)效果也更佳。

27、第二方面，本技術(shù)實(shí)施例提供一種電子設(shè)備。該電子設(shè)備包括：一個(gè)或多個(gè)處理器；存儲(chǔ)器；以及一個(gè)或多個(gè)計(jì)算機(jī)程序，其中一個(gè)或多個(gè)計(jì)算機(jī)程序存儲(chǔ)在存儲(chǔ)器上，當(dāng)計(jì)算機(jī)程序被一個(gè)或多個(gè)處理器執(zhí)行時(shí)，使得電子設(shè)備執(zhí)行第一方面以及第一方面中任意一項(xiàng)的開(kāi)關(guān)控件的顯示方法。

28、第二方面以及第二方面的任意一種實(shí)現(xiàn)方式分別與第一方面以及第一方面的任意一種實(shí)現(xiàn)方式相對(duì)應(yīng)。第二方面以及第二方面的任意一種實(shí)現(xiàn)方式所對(duì)應(yīng)的技術(shù)效果可參見(jiàn)上述第一方面以及第一方面的任意一種實(shí)現(xiàn)方式所對(duì)應(yīng)的技術(shù)效果，此處不再贅述。

29、第三方面，本技術(shù)實(shí)施例提供一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)。該計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)包括計(jì)算機(jī)程序，當(dāng)計(jì)算機(jī)程序在電子設(shè)備上運(yùn)行時(shí)，使得電子設(shè)備執(zhí)行第一方面以及第一方面中任意一項(xiàng)的開(kāi)關(guān)控件的顯示方法。

30、第三方面以及第三方面的任意一種實(shí)現(xiàn)方式分別與第一方面以及第一方面的任意一種實(shí)現(xiàn)方式相對(duì)應(yīng)。第三方面以及第三方面的任意一種實(shí)現(xiàn)方式所對(duì)應(yīng)的技術(shù)效果可參見(jiàn)上述第一方面以及第一方面的任意一種實(shí)現(xiàn)方式所對(duì)應(yīng)的技術(shù)效果，此處不再贅述。

31、第四方面，本技術(shù)實(shí)施例提供一種計(jì)算機(jī)程序產(chǎn)品，包括計(jì)算機(jī)程序，當(dāng)計(jì)算機(jī)程序被運(yùn)行時(shí)，使得計(jì)算機(jī)執(zhí)行如第一方面或第一方面中任意一項(xiàng)的開(kāi)關(guān)控件的顯示方法。

32、第四方面以及第四方面的任意一種實(shí)現(xiàn)方式分別與第一方面以及第一方面的任意一種實(shí)現(xiàn)方式相對(duì)應(yīng)。第四方面以及第四方面的任意一種實(shí)現(xiàn)方式所對(duì)應(yīng)的技術(shù)效果可參見(jiàn)上述第一方面以及第一方面的任意一種實(shí)現(xiàn)方式所對(duì)應(yīng)的技術(shù)效果，此處不再贅述。

33、第五方面，本技術(shù)提供了一種芯片，該芯片包括處理電路、收發(fā)管腳。其中，該收發(fā)管腳和該處理電路通過(guò)內(nèi)部連接通路互相通信，該處理電路執(zhí)行如第一方面或第一方面中任意一項(xiàng)的開(kāi)關(guān)控件的顯示方法，以控制接收管腳接收信號(hào)，以控制發(fā)送管腳發(fā)送信號(hào)。

34、第五方面以及第五方面的任意一種實(shí)現(xiàn)方式分別與第一方面以及第一方面的任意一種實(shí)現(xiàn)方式相對(duì)應(yīng)。第五方面以及第五方面的任意一種實(shí)現(xiàn)方式所對(duì)應(yīng)的技術(shù)效果可參見(jiàn)上述第一方面以及第一方面的任意一種實(shí)現(xiàn)方式所對(duì)應(yīng)的技術(shù)效果，此處不再贅述。