好久沒有寫這個系列的博客了,這里給個電梯吧,照顧新來的同學~~
目前我在廣州出差,一直細雨綿綿,悶得慌,仰望天空,大霧籠罩,看不見藍天白雲甚至太陽,怪不得昆明的房價漲這么高......
最終效果如下:
(特別鳴謝銀光中國提供的免費silverlight空間)
1.總體思路
分析上面效果:一坨可愛的雲一直在下雨。
可愛的雲:就是一些閉合的路徑層疊在一起,加一些漸變和白色造成高光,讓其可愛。
下雨:其實就是一張布滿水滴的圖片在不斷的往下落。
2.設計過程
我就直接入主題了,一些基本的操作可以參看前兩篇,貼圖很累滴~
首先我們來畫出那朵雲,可以按住shift來畫出非橢圓。然后不斷復制、粘貼、改變大小、拖動重復幾次一個雲就出現了。



然后我們來組合一下這么多圓的路徑,因為我們只需要輪廓


得到如下結果,像托棉花糖~~

改變一下顏色,讓其看起來可愛清涼一些


然后再復制一個這個路徑,換個顏色填充,用選擇工具改變其大小,按住ALT鍵來畫出同心雲...

接下來制作高光,把里面的雲改成漸變填充,顏色還是隨感覺,先要畫出高光的那股曲線,畫個橢圓,然后讓雲的路徑✄橢圓的路徑得到高光的部分。



開始有點可愛了吧~~只是怎么看怎么怪怪的,因為過渡不自然。
只需讓高光的結束位置和背景顏色一樣就自然了,改變里面的雲的漸變顏色,用
工具點取這個尖
旁邊的背景顏色,得:

貌似像這么回事了,但是高光不夠,拖動下面藍色的塊,讓高光分界線的棱角清晰一點


這樣就完成啦~
接下來制作雲的倒影,復制一個雲的圖層

把它拖到下面,改變一下大小形狀顏色如下:

接下來制作雨滴,用鋼筆工具勾出雨滴的形狀,用
改變一下路徑的位置,讓其對稱一點,加上背景顏色填充

填充還是加上一點漸變吧,這樣真實一點,讓后移到雲的下面,調整大小


經過對這個雨滴的不斷復制、粘貼、移動。N步之后得到如下效果

接下來要制作下雨的動畫了,把上面的雨滴再全部復制粘貼一遍,拍成一列,讓他們夠長這樣才有得下,然后選擇全部的雨滴路徑進行分組Grid

然后再對Grid再進行分組,得到如下結果。

為什么要分這么多層呢??因為這里我們要做出雨從雲里出來雨落到地上不見了的效果,里面的Grid負責整體雨滴的Y軸位移,而外面的作為一個蒙板來控制雨滴的可顯示范圍,和ps的蒙板差不多,只不過PS是黑與白,而Blend是顏色透明度的0--1,為0的看不到,為1的顯示出來,這點在之前的文章中講過。比如我們把外層的Grid的蒙板做如下設置


這里我是把蒙板Grid的高度拉到雲的底端到陰影的中間,當我們改變里面的Grid的位置的時候發現,移動到蒙板Grid以外的地方就消失了。
我們把蒙板Grid的上面也做一下漸變,免得雨出現在雲的上方。

接下來是添加動畫了,這簡單了吧,就改變一下一堆雨滴Grid的位置讓它從上面運動到下面,這個我就不細說了,不懂的同學可以看一下前面的文章。

選中動畫,改變它的重復屬性為永遠,這樣就雨一直下,氣氛不勝融洽~~~

值得一提的是,要讓動畫的結束和開始能夠完美的銜接起來,需要不斷的點擊
不斷的在開始幀和結束幀之間切換,開始時雨滴的樣子和結束時的樣子越接近,銜接就越完美。
接下來給這個控件添加一個行為,讓其在加載時就動起來,設置如下



最后一步加上點簽名,炫耀一下。(這個路徑字的做法可以看一下我的時鍾篇)

F5看一下您的大作吧~~!
有些步驟我偷了點懶不夠仔細,不過我相信只要看過我之前兩篇的人,看這篇只要看到圖片就知道思路了。
最近銀光中國的空間貌似給力多了有點累了,一直登不上去,所以這篇博客現在才發布出來,喜歡的同學可以關注我哦,我會不定期更新博文滴~~~您的支持是我最大的動力~~
更新:我一直覺得忘記點什么了,原來是源碼:
http://files.cnblogs.com/tong-tong/%E5%8F%AF%E7%88%B1%E4%BA%91.rar
