廢話唱遭，可以跳過
在這個(gè)色彩斑斕的時(shí)代，各種app疫鹊、各式各樣的特效充斥著我們的眼球司致。在我看來，炫酷的特效在很大程度上是能夠博取用戶的好感锈拨，提高用戶體驗(yàn)的羹唠。而這些酷炫的交互方式是沒有界限的娄昆，所以一些好的app特效也可以為網(wǎng)頁所用萌焰。以此為宗旨谷浅，我以vue為基礎(chǔ)，將QQ空間的一些特效進(jìn)行了重現(xiàn)撼玄，一來鍛煉自己組件化開發(fā)的思維墩邀，熟悉vue的使用，二來也是希望為大家在一些特效的實(shí)現(xiàn)上提供一些思路荔茬。（本文重點(diǎn)討論特效的實(shí)現(xiàn)原理竹海，不作任何代碼的解析）
本來是想用vue全家桶仿一個(gè)完整的QQ空間，但是寫著寫著孔飒，感覺這樣做的意義其實(shí)并不大（其實(shí)就是犯懶了许起，還得花時(shí)間準(zhǔn)備面試）园细。但又不想荒廢掉原來的代碼接校，所以就改吧改吧，然后做一個(gè)特效的分享鹿寻。
技術(shù)棧
vuex： 沒什么卵用诽凌，就是想證明我會(huì)用。
better-scroll：本來想用原生方法來做一些滑動(dòng)的痢法，事實(shí)證明這就是在浪費(fèi)時(shí)間，因?yàn)槲腋靖悴欢?:(
正文
彈出層特效
先講一個(gè)最簡單的特效蘸炸，簡單到我都不知道要怎么描述：
最中間的+圖標(biāo)是本體尖奔，點(diǎn)擊之后顯示一個(gè)彈層提茁，然后播放8個(gè)圖標(biāo)的動(dòng)畫，控制8個(gè)圖標(biāo)的速度不同稀拐，達(dá)到一種動(dòng)態(tài)丹弱，活潑的特效。第二次點(diǎn)擊彈出層消失躲胳，值得注意的是彈出層必須要在動(dòng)畫播放完成之后才能消失坯苹，不然效果會(huì)很突兀，所以需要用到animationend事件恐仑。
窗戶特效
我管它叫作窗戶特效为鳄，因?yàn)樗o我感覺就像一扇窗戶：
這個(gè)特效主要做的事就使圖片在頂部可以下拉刷新孤钦，而在向上滾動(dòng)時(shí)又會(huì)跟隨滾動(dòng)，經(jīng)過再三思考我決定這樣實(shí)現(xiàn)這個(gè)效果：
真相就是這樣0.0静袖，兩張相同的圖片俊扭！只需要在滑動(dòng)到頂部時(shí)使上層的圖片透明，就可以輕松實(shí)現(xiàn)這個(gè)效果了喘帚。
這里還有一個(gè)特效就是頂部的標(biāo)題欄的漸變畅姊、收縮、下拉刷新的效果吹由，故意放慢了動(dòng)態(tài)圖的速度若未，就是想讓大家注意到它。雖然實(shí)現(xiàn)的邏輯很容易理解倾鲫，但是真正實(shí)現(xiàn)還是需要花一番功夫的粗合，這里用到了作用域插槽slot將組件的狀態(tài)傳遞給slot。
可編輯導(dǎo)航列表
一個(gè)可編輯的導(dǎo)航列表乌昔，接受一組列表數(shù)據(jù)和初始需要顯示的列表長度：
這個(gè)特效就花了我較多時(shí)間了隙疚，主要是卡在了如何切換彈出狀態(tài)和正常狀態(tài)，目前主要思路是--分離編輯狀態(tài)和正常狀態(tài)磕道。具體的意思就是供屉，給每個(gè)項(xiàng)再額外添加一個(gè) index屬性和translateY來記錄它在編輯時(shí)的序號(hào)和位移溺蕉。然后在切回正常狀態(tài)時(shí)伶丐，再按照編輯后的序號(hào)重新排列每個(gè)項(xiàng)，重置位移疯特，使列表的真實(shí)序列變?yōu)榫庉嫼蟮男蛄谢┗辏唧w還有許多細(xì)節(jié)，大家想了解的話可以去看代碼(有注釋) ( :
簡約彈框
這就是一個(gè)帶有遮罩層的彈窗漓雅。值得一提的是录别，它是一個(gè)全局組件，可以顯示傳入的不同數(shù)據(jù)邻吞，這也是唯一一個(gè)有必要用到vuex的組件组题。彈窗的位置是根據(jù)點(diǎn)擊的位置是否在屏幕的上半部分（下半部分），如果內(nèi)容超過屏幕的一半--我也不知道會(huì)發(fā)生什么抱冷，反正不會(huì)好看就是了崔列。最后那個(gè)小角就是一個(gè)旋轉(zhuǎn)的小正方形：)
廢話
這次的QQ空間特效分享就結(jié)束了，還有一些小特效沒有實(shí)現(xiàn)徘层，并且原本想解決一下移動(dòng)端軟鍵盤的問題的峻呕，最后還是不了了之（懶癌又犯了）利职。這是代碼趣效，大家拿去玩吧，萬一玩出個(gè)什么bug就可以回來噴我了猪贪，反正我也不會(huì)鳥：>
QQ跷敬、郵箱：774061539--無業(yè)游民
