一種立方體顯示方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計(jì)算機(jī)技術(shù)領(lǐng)域，尤其涉及一種立方體顯示方法及裝置。
【背景技術(shù)】
[0002]現(xiàn)有技術(shù)中，在終端的展示類應(yīng)用程序中，可以以立方體形式進(jìn)行立體效果的項(xiàng)目展示。但是，現(xiàn)有技術(shù)的立方體展示多應(yīng)用在電腦端，作為單調(diào)的立方體展示，缺乏應(yīng)用性；特別容易出現(xiàn)用戶滑動(dòng)一次，滾動(dòng)多個(gè)面的現(xiàn)象；而且在立方體的上、下面添加圖片時(shí)，會出現(xiàn)多余留白，不美觀；立方體的每個(gè)面也不能再嵌套動(dòng)畫，用戶體驗(yàn)度較差。

【發(fā)明內(nèi)容】

[0003]為克服相關(guān)技術(shù)中存在的問題，本發(fā)明實(shí)施例提供一種立方體顯示方法及裝置。
[0004]一種立方體顯示方法，包括:
[0005]接收在屏幕上對立方體結(jié)構(gòu)中至少一個(gè)面的選定操作；
[0006]獲取所要插入到所述至少一個(gè)面的動(dòng)畫的鏈接地址；
[0007]將所述鏈接地址添加到所述立方體結(jié)構(gòu)的css3動(dòng)畫屬性中；
[0008]根據(jù)所述css3動(dòng)畫屬性將所述動(dòng)畫插入到所述立方體結(jié)構(gòu)的至少一個(gè)面。
[0009]可選的，所述方法還包括:
[0010]接收在屏幕上的滑動(dòng)操作；
[0011]獲取所述滑動(dòng)操作的滑動(dòng)距離和滑動(dòng)路徑；
[0012]根據(jù)所述滑動(dòng)距離和滑動(dòng)路徑計(jì)算所述立方體結(jié)構(gòu)的css3旋轉(zhuǎn)屬性值和css3位移屬性值；
[0013]根據(jù)所述css3旋轉(zhuǎn)屬性和css3位移屬性控制所述立方體結(jié)構(gòu)進(jìn)行旋轉(zhuǎn)和/或位移。
[0014]可選的，所述方法還包括:
[0015]接收在屏幕上對立方體結(jié)構(gòu)中一個(gè)面的選定操作；
[0016]當(dāng)接收到對所述選定的面的擦除操作時(shí)，根據(jù)所述擦除操作修改所述立方體結(jié)構(gòu)的html5蒙版屬性值；
[0017]根據(jù)所述修改后的html5蒙版屬性值將所述選定的面的當(dāng)前圖層消除。
[0018]可選的，所述方法還包括:
[0019]當(dāng)所述立方體結(jié)構(gòu)旋轉(zhuǎn)時(shí)，根據(jù)所述css3旋轉(zhuǎn)屬性和css3位移屬性修改所述立方體結(jié)構(gòu)每個(gè)面的css3透明度屬性；
[0020]根據(jù)所述css3透明度屬性調(diào)整所述立方體結(jié)構(gòu)每個(gè)面的顯示透明度。
[0021]—種立方體顯示裝置，包括:
[0022]接收模塊，用于接收在屏幕上對立方體結(jié)構(gòu)中至少一個(gè)面的選定操作；
[0023]第一獲取模塊，用于獲取所要插入到所述至少一個(gè)面的動(dòng)畫的鏈接地址；
[0024]添加模塊，用于將所述鏈接地址添加到所述立方體結(jié)構(gòu)的css3動(dòng)畫屬性中；
[0025]插入模塊，用于根據(jù)所述css3動(dòng)畫屬性將所述動(dòng)畫插入到所述立方體結(jié)構(gòu)的至少一個(gè)面。
[0026]可選的，所述裝置還包括:第二獲取模塊，計(jì)算模塊和控制模塊，
[0027]所述接收模塊，用于接收在屏幕上的滑動(dòng)操作；
[0028]第二獲取模塊，用于獲取所述滑動(dòng)操作的滑動(dòng)距離和滑動(dòng)路徑；
[0029]計(jì)算模塊，用于根據(jù)所述滑動(dòng)距離和滑動(dòng)路徑計(jì)算所述立方體結(jié)構(gòu)的css3旋轉(zhuǎn)屬性值和css3位移屬性值；
[0030]控制模塊，用于根據(jù)所述css3旋轉(zhuǎn)屬性和css3位移屬性控制所述立方體結(jié)構(gòu)進(jìn)行旋轉(zhuǎn)和/或位移。
[0031]可選的，所述裝置還包括:第一修改模塊和消除模塊，
[0032]所述接收模塊，用于接收在屏幕上對立方體結(jié)構(gòu)中一個(gè)面的選定操作；
[0033]第一修改模塊，用于當(dāng)接收到對所述選定的面的擦除操作時(shí)，根據(jù)所述擦除操作修改所述立方體結(jié)構(gòu)的html5蒙版屬性值；
[0034]消除模塊，用于根據(jù)所述修改后的html5蒙版屬性值將所述選定的面的當(dāng)前圖層消除。
[0035]可選的，所述裝置還包括:
[0036]第二修改模塊，用于當(dāng)所述立方體結(jié)構(gòu)旋轉(zhuǎn)時(shí)，根據(jù)所述css3旋轉(zhuǎn)屬性和css3位移屬性修改所述立方體結(jié)構(gòu)每個(gè)面的css3透明度屬性；
[0037]調(diào)整模塊，用于根據(jù)所述css3透明度屬性調(diào)整所述立方體結(jié)構(gòu)每個(gè)面的顯示透明度。
[0038]本發(fā)明實(shí)施例中，用戶選擇終端顯示的立方體結(jié)構(gòu)的六個(gè)面中的一個(gè)面，在該立方體結(jié)構(gòu)CSS3動(dòng)畫屬性中添加想要插入到該面的動(dòng)畫鏈接地址，這樣，在這個(gè)面上，就可以顯示用戶所期望的動(dòng)畫，用戶可以方便快速地為如微信等應(yīng)用程序中的用于展示的立方體結(jié)構(gòu)的每個(gè)面上設(shè)置動(dòng)畫效果，降低立方體動(dòng)畫展示的復(fù)雜度，提高用戶的體驗(yàn)度。
[0039]應(yīng)當(dāng)理解的是，以上的一般描述和后文的細(xì)節(jié)描述僅是示例性和解釋性的，并不能限制本公開。
【附圖說明】
[0040]附圖用來提供對本發(fā)明的進(jìn)一步理解，并且構(gòu)成說明書的一部分，與本發(fā)明的實(shí)施例一起用于解釋本發(fā)明，并不構(gòu)成對本發(fā)明的限制。在附圖中:
[0041]圖1為本發(fā)明實(shí)施例中一種立方體顯示方法的流程圖；
[0042]圖2為本發(fā)明另一實(shí)施例中一種立方體顯示方法的流程圖；
[0043]圖3為本發(fā)明另一實(shí)施例中一種立方體顯示方法的流程圖；
[0044]圖4為本發(fā)明另一實(shí)施例中一種立方體顯示方法的流程圖；
[0045]圖5為本發(fā)明實(shí)施例中一種立方體顯示裝置的框圖；
[0046]圖6為本發(fā)明另一實(shí)施例中一種立方體顯示裝置的框圖；
[0047]圖7為本發(fā)明另一實(shí)施例中一種立方體顯示裝置的框圖；
[0048]圖8為本發(fā)明另一實(shí)施例中一種立方體顯示裝置的框圖。
【具體實(shí)施方式】
[0049]以下結(jié)合附圖對本發(fā)明的優(yōu)選實(shí)施例進(jìn)行說明，應(yīng)當(dāng)理解，此處所描述的優(yōu)選實(shí)施例僅用于說明和解釋本發(fā)明，并不用于限定本發(fā)明。
[0050]圖1為本發(fā)明實(shí)施例中一種立方體顯示方法的流程圖，如圖1所示，該方法應(yīng)用于終端，該方法包括以下步驟:
[0051]步驟S11，接收在屏幕上對立方體結(jié)構(gòu)中至少一個(gè)面的選定操作；
[0052]步驟S12，獲取所要插入到至少一個(gè)面的動(dòng)畫的鏈接地址；
[0053]步驟S13，將鏈接地址添加到立方體結(jié)構(gòu)的css3動(dòng)畫屬性中；
[0054]步驟S14，根據(jù)css3動(dòng)畫屬性將動(dòng)畫插入到立方體結(jié)構(gòu)的至少一個(gè)面。
[0055]例如，css3動(dòng)畫屬性可以包括〖transform屬性、ratate屬性、translate屬性與animat1n屬性。通過transform屬性設(shè)置每個(gè)面的動(dòng)畫效果；而通過ratate (旋轉(zhuǎn))值和taranslate(位移)值得不同，使得六個(gè)面進(jìn)行不同角度的旋轉(zhuǎn)與位移構(gòu)成立方體的六個(gè)面，用animat1n屬性設(shè)置動(dòng)畫變化的過程。
[0056]本實(shí)施例中，用戶選擇終端顯示的立方體結(jié)構(gòu)的六個(gè)面中的一個(gè)面，在該立方體結(jié)構(gòu)css3動(dòng)畫屬性中添加想要插入到該面的動(dòng)畫鏈接地址，這樣，在這個(gè)面上，就可以顯示用戶所期望的動(dòng)畫，用戶可以方便快速地為如微信等應(yīng)用程序中的用于展示的立方體結(jié)構(gòu)的每個(gè)面上設(shè)置動(dòng)畫效果，降低立方體動(dòng)畫展示的復(fù)雜度，提高用戶的體驗(yàn)度。
[0057]可選的，如圖2所示，該方法還包括:
[0058]步驟S21，接收在屏幕上的滑動(dòng)操作；
[0059]步驟S22，獲取滑動(dòng)操作的滑動(dòng)距離和滑動(dòng)路徑；
[0060]步驟S23，根據(jù)滑動(dòng)距離和滑動(dòng)路徑計(jì)算立方體結(jié)構(gòu)的css3旋轉(zhuǎn)屬性值和css3位移屬性值；
[0061]步驟S24，根據(jù)css3旋轉(zhuǎn)屬性和css3位移屬性控制立方體結(jié)構(gòu)進(jìn)行旋轉(zhuǎn)和/或位移。
[0062]例如，應(yīng)用javascript設(shè)置用戶的手勢，添加css3旋轉(zhuǎn)屬性和css3位移屬性，使得用戶滑動(dòng)時(shí)，立方體整體進(jìn)行旋轉(zhuǎn)不同的角度和方向，達(dá)到立方體旋轉(zhuǎn)的立體效果?？梢栽O(shè)置 transit1n:transform 0.8s ease-out 與 transform-style:preserve-3dotransit1n是使得元素本身和她的子集的css屬性值在一定時(shí)間內(nèi)平滑的過渡，圓滑的已動(dòng)畫效果改變css的屬性值。用transform-style屬性定義在3D空間中被嵌套的元素的呈現(xiàn)方式，使子元素保留3D轉(zhuǎn)換。
[0063]在可選方案中，使得立方體結(jié)構(gòu)的展示可以根據(jù)用戶的操作而旋轉(zhuǎn)和/或位移，過渡效果平滑，頁面不會變形，提高用戶體驗(yàn)度。
[0064]可選的，如圖3所示，該方法還包括:
[0065]步驟S31，接收在屏幕上對立方體結(jié)構(gòu)中一個(gè)面的選定操作；
[0066]步驟S32，當(dāng)接收到對選定的面的擦除操作時(shí)，根據(jù)擦除操作修改立方體結(jié)構(gòu)的html5蒙版屬性值；
[0067]步驟S33，根據(jù)修改后的html5蒙版屬性值將選定的面的當(dāng)前圖層消除。
[0068]例如，通過html5 中的 canvas 標(biāo)簽、canvas 的 AP1:getContext、lineCap、lineCap、lineWidth、drawlmage ()、globalCompositeOperat1n、moveTo ()、save ()、IineTo O、stroke O、restore O結(jié)合javascript對這些API的應(yīng)用為立方體的首頁設(shè)置蒙版擦除的效果。
[0069]在可選方案中，通過html5蒙版屬性，使得立方體結(jié)構(gòu)的展示效果更加靈活多樣，用戶體驗(yàn)度更好。
[0070]可選的，如圖4所示，該方