一種以基于視差原理的組合動畫實現(xiàn)用戶行為引導(dǎo)的方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明屬于軟件應(yīng)用中用戶行為引導(dǎo)領(lǐng)域，尤其涉及一種基于視差原理的組合動畫實現(xiàn)用戶行為引導(dǎo)的方法。
【背景技術(shù)】
[0002]用戶行為引導(dǎo)是為了聚焦用戶的焦點，對用戶進(jìn)行視覺優(yōu)化，提前讓用戶預(yù)知一個產(chǎn)品的部分界面以及功能體驗。但是目前在普遍的用戶行為引導(dǎo)當(dāng)中，大多數(shù)的處理方式就是通過文字與圖片組合或者是文字與界面插圖組合的方式以及引導(dǎo)用戶去點擊按鈕進(jìn)行操作的方式，來引導(dǎo)用戶，通過這些圖片與文字的介紹或者通過引導(dǎo)用戶點擊按鈕，讓用戶對應(yīng)用有了部分認(rèn)知，提升應(yīng)用在用戶眼中的第一印象。
[0003]但是，這種在一張圖片配上幾段文字、或是在一張應(yīng)用的截圖上配上相關(guān)文字描述、或是在應(yīng)用里放些文字按鈕要求用戶去點擊體驗、更或是拍一個視頻進(jìn)行簡短播放的引導(dǎo)方式存在許多不足。圖文顯示有時候會顯得整個用戶引導(dǎo)行為非常雜亂，而且不能一下子讓用戶進(jìn)行視覺聚焦，如果當(dāng)引導(dǎo)文字過多，用戶還很容易遺忘、出現(xiàn)記憶偏差；而對于視頻播放，就會顯得應(yīng)用過大，產(chǎn)生用戶等待視頻加載的時間，甚至有時候在播放時候出現(xiàn)卡頓現(xiàn)象。這些方式過于模式化，顯得千篇一律，不能夠讓用戶對產(chǎn)品產(chǎn)生情感上的聯(lián)系，增加產(chǎn)品粘度。

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

[0004]為了解決上述問題，本發(fā)明提供一種以基于視差原理的組合動畫實現(xiàn)用戶行為引導(dǎo)的方法。
[0005]為了達(dá)到上述目的，本發(fā)明采用的技術(shù)方案是:
一種以基于視差原理的組合動畫實現(xiàn)用戶行為引導(dǎo)的方法，包括以下步驟:
51、準(zhǔn)備一個組裝動畫的翻頁容器；
52、將無限自動循環(huán)動畫置放在翻頁容器的第一頁；
53、將圖片播放展示動畫置放在翻頁容器的第二頁；
54、將圖片延遲飛入動畫置放在翻頁容器的第三頁；
55、將刷圖分割對比效果動畫置放在翻頁容器的第四頁；
56、翻頁到翻頁容器的第一頁，執(zhí)行無限自動循環(huán)動畫；
57、翻頁到翻頁容器的第二頁，執(zhí)行圖片播放展示動畫；
58、翻頁到翻頁容器的第三頁，執(zhí)行圖片延遲飛入動畫；
59、翻頁到翻頁容器的第四頁，執(zhí)行刷圖分割對比效果動畫。
[0006]進(jìn)一步的，所述翻頁容器至少有四頁，每頁可以進(jìn)行左右切換，且每頁的大小等于應(yīng)用的顯示區(qū)域大小，每翻到一頁就會執(zhí)行當(dāng)前頁的動畫。
[0007]進(jìn)一步的，步驟S2中將無限自動循環(huán)動畫置放在翻頁容器的第一頁的過程如下:
S21、在翻頁容器的第一頁上設(shè)定第一動畫可視區(qū)域的位置及大?。? S22、設(shè)定圖片容器ImageViewl和ImageView2并放入第一動畫可視區(qū)域，ImageView2默認(rèn)顯不在ImageViewl最底部。
[0008]進(jìn)一步的，步驟S3中將圖片播放展示動畫置放在翻頁容器的第二頁的過程如下:
531、在翻頁容器的第二頁上設(shè)定第二動畫可視區(qū)域的位置及大??；
532、設(shè)定一個圖片容器ImageVieW并把該容器放入第二動畫可視區(qū)域；
S33、準(zhǔn)備四張圖片以及四張圖片對應(yīng)的圖片說明文字描述，并依次按順序排好，默認(rèn)把第一張圖片和與其對應(yīng)的文字描述添加顯示到ImageView3中。
[0009]進(jìn)一步的，步驟S4中將圖片延遲飛入動畫置放在翻頁容器的第三頁的過程如下:
541、在翻頁容器的第三頁上設(shè)定第三動畫可視區(qū)域的位置及大小，并對第三動畫可視區(qū)域設(shè)置背景圖片；
542、準(zhǔn)備三個圖片容器ImageView4、ImageView5、ImageView6，在每一個圖片容器內(nèi)放置一張圖片，并將這三個圖片容器放置在翻頁容器第三頁上的第三動畫可視區(qū)域外。
[0010]進(jìn)一步的，步驟S5中將刷圖分割對比效果動畫置放在翻頁容器的第四頁的過程如下:
551、在翻頁容器的第四頁上設(shè)定第四動畫可視區(qū)域的位置及大小為(0，0，640，640)，其中前兩個數(shù)分別是橫坐標(biāo)X和縱坐標(biāo)1，坐標(biāo)位置是相對于當(dāng)前頁的起點坐標(biāo)，后兩個數(shù)分別是寬width和高h(yuǎn)eight ；
552、準(zhǔn)備一個圖片容器ImageView7，將其放入第四動畫可視區(qū)域，并把原圖放入到該圖片容器中，默認(rèn)設(shè)置該圖片容器的位置及大小為(0，0，640，640);準(zhǔn)備效果圖容器ImageView8，并把對比的效果圖放入到ImageView8中，默認(rèn)設(shè)置ImageView8的位置及大小也為(0，0，640，640);準(zhǔn)備一個分割容器View，并把ImageView8放入到View中，View放入第四動畫可視區(qū)域，默認(rèn)設(shè)置分割容器View的位置及大小(0，0，0，640)，由于View此時默認(rèn)的寬度為0，所以分割容器View里面的ImageView8是不可見的。
[0011]更進(jìn)一步的，步驟S6中翻頁到翻頁容器的第一頁，執(zhí)行無限自動循環(huán)動畫具體過程如下:
561、圖片容器ImageViewl開始向上滾動；
562、圖片容器ImageView2跟隨圖片容器ImageViewl—起向上滾動；
563、若圖片容器ImageViewl完全滾動出第一動畫可視區(qū)域，則進(jìn)入下一步，否則繼續(xù)執(zhí)行上一步；
564、移動圖片容器ImageViewl至圖片容器ImageVieW的底部；
565、圖片容器ImageViewl跟隨圖片容器ImageView2—起向上滾動；
566、若圖片容器ImageVieW完全滾動出第一動畫可視區(qū)域，則進(jìn)入下一步，否則繼續(xù)執(zhí)行上一步；
567、移動圖片容器ImageVieW至圖片容器ImageViewl的底部；
568、重新執(zhí)行步驟S61-S67。
[0012]更進(jìn)一步的，步驟S7翻頁到翻頁容器的第二頁，執(zhí)行圖片播放展示動畫的具體過程如下:
S71、第一張圖片開始在規(guī)定時間進(jìn)行Scale放大動畫，并展示與其對應(yīng)的文字描述，完成后ImageVieW切換至第二張圖片； 572、第二張圖片開始在規(guī)定時間進(jìn)行Scale縮小動畫，并展示與其對應(yīng)的文字描述，完成后ImageVieW切換至第三張圖片；
573、第三張圖片開始在規(guī)定時間進(jìn)行Scale放大動畫，并展示與其對應(yīng)的文字描述，完成后ImageVieW切換至第四張圖片；
574、第四張圖片開始在規(guī)定時間進(jìn)行Scale縮小動畫，并展示與其對應(yīng)的文字描述；
575、若重新展示播放動畫，則重新執(zhí)行步驟S71-S74，否則，結(jié)束。
[0013]更進(jìn)一步的，步驟S8翻頁到翻頁容器的第三頁，執(zhí)行圖片延遲飛入動畫具體過程如下:
581、ImageView4開始飛入到第三動畫可視區(qū)域內(nèi)的指定位置，當(dāng)ImageView4動畫執(zhí)行完畢，等待0.3秒；
582、ImageView5開始飛入到第三動畫可視區(qū)域內(nèi)的指定位置，當(dāng)ImageView5動畫執(zhí)行完畢，等待0.3秒；
583、ImageView6開始飛入到第三動畫可視區(qū)域內(nèi)的指定位置，當(dāng)ImageView6動畫執(zhí)行完畢，結(jié)束。
[0014]更進(jìn)一步的，步驟S9翻頁到翻頁容器的第四頁，執(zhí)行刷圖分割對比效果動畫具體過程如下:
591、將分割容器View的寬度在規(guī)定的時間內(nèi)由O變成640，此時View里的ImageView8完全顯不并覆蓋ImageView7 ；
592、再將分割容器View的寬度在規(guī)定的時間內(nèi)由640變成320，此時View里的ImageView8可見范圍是一半并顯示在左邊，ImageView7可見范圍也是一半并顯示右邊。
[0015]采用本技術(shù)方案的有益效果:
通過實現(xiàn)四種視差動畫，進(jìn)行組合應(yīng)用于用戶行為引導(dǎo)中，使得整個行為引導(dǎo)過程更緊湊有序，減少了過多的文字引導(dǎo)，通過動畫增強了用戶對引導(dǎo)的印象，而且不會有視頻引導(dǎo)加載時間長的問題，采用本發(fā)明的行為引導(dǎo)方法可以向用戶傳達(dá)更明確的信息，體驗更吸引人，讓用戶在體驗時感覺更有趣，注意力更為集中，而且可以讓用戶非常直觀的感受應(yīng)用所帶來的活力，讓用戶感覺應(yīng)用更貼近生活，使用戶對產(chǎn)品產(chǎn)生情感上的聯(lián)系，增加產(chǎn)品粘度。
【附圖說明】
[0016]圖1是本發(fā)明的整體流程示意圖；
圖2是執(zhí)行無限自動循環(huán)動畫的流程示意圖；
圖3是執(zhí)行圖片播放展示動畫的流程示意圖；
圖4是執(zhí)行圖片延遲飛入動畫的流程示意圖；
圖5是執(zhí)行刷圖分割對比效果動畫的流程示意圖。
【具體實施方式】
[0017]為了更好的理解本發(fā)明，下面結(jié)合附圖對本發(fā)明作進(jìn)一步闡述。
[0018]如圖1所示，一種以基于視差原理的組