具體效果如圖:
還是不試不知道一試嚇一跳啊,這看上去簡單的動畫沒我想象的那麼簡單。
首先這個動畫分兩步:
一是中間的圓像時鐘一樣走一圈;
二是外面的大圓變大到包括整個的大小;
首先是第一步:
這時候大圓外部跟小圓內部都是半透明的,小圓走過的部分會變成透明。
一開始我一直想用mask的方式來實現,結果試了老好久還是不行,就扔那兒了。
過了兩天再看它,發現其實自己想複雜了,從表面看的話,
第一部分的動畫是畫乙個圓,然後用乙個顏色填充它,中間就是畫圓的一部分然後填充,問題是這樣一點點走的動畫好難實現;
所以我就想如果是自己用筆畫的話要怎麼辦?
然後發現用筆畫的話,只要用跟半徑一樣寬的線來畫就很easy了,畫多少就是多少,想停哪兒就停哪兒!
然後跟**一對照才恍然大悟,cashapelayer就有linewidth這個屬性啊,也這麼畫就很簡單了!
(這裡需要注意cashapelayer計算fillcolor的範圍時,是按照線的中心計算的,所以實際在**中線寬是半徑2倍)
透明的問題也是一樣,根本不用什麼mask,畫的時候是覆蓋上去,那畫反過來不就是一點點露出來了嘛!!!
放到**裡的話,讓strokeend從1變到0就ok了。 (這裡需要注意方向的問題,貝塞爾曲線有取反方向的方法,設定path的時候注意)
那剩下的問題是:怎麼畫乙個中間圓透明,圓與邊框之間半透明的圖形出來?
我首先想到的是。。。。做個。。。然後試了試,果然可以!不過第二步的動畫沒法做了。。。
所以還是得用cashapelayer自己畫。。。
這裡經春哥指點才解決了這個問題,用到了乙個比較高階的引數,就是cashapelayer的fillrule引數。
有兩個可選值kcafillruleevenodd 和
kcafillrulenonzero
具體參考:
還有:大致是:
nonzero字面意思是「非零」。按該規則,要判斷乙個點是否在圖形內,從該點作任意方向的一條射線,然後檢測射線與圖形路徑的交點情況。從0開始計數,路徑從左向右穿過射線則計數加1,從右向左穿過射線則計數減1。得出計數結果後,如果結果是0,則認為點在圖形外部,否則認為在內部。下圖演示了nonzero規則:
evenodd字面意思是「奇偶」。按該規則,要判斷乙個點是否在圖形內,從該點作任意方向的一條射線,然後檢測射線與圖形路徑的交點的數量。如果結果是奇數則認為點在內部,是偶數則認為點在外部。下圖演示了evenodd 規則:
利用fillrule讓它圓內部透明,外部半透明。
然後把這個layer add 上去就可以了。
剩下的就是乙個stokeend的動畫,就簡單了。
第二步:讓大圓的半徑變大
這個只是個path動畫,這裡的大圓是上面第一步中最後那個方法畫出來的,只需要設定path為最終的大小就可以了,也比較簡單
還有一些細節見**注釋;
CSS3實現蘋果表撥號動畫
隨著蘋果表的大量生產,我想,用css來實現撥號動畫的時候到了。在這篇文章中,我們將使用keyframe動畫和一點小技巧來實現蘋果標表盤進度條動畫。表的動畫是由3個線條構成的,每個都是進度條。進度條兩邊帶有圓角。我們將使用一點小技巧來實現。我們先來畫半個圓。html 如下 div div 我們使用bo...
iOS 蘋果企業證書通過網頁分發安裝app
這樣就可以將這個 鏈結發給使用者,非常方便,有木有感覺像apk的安裝方式哦o o哈哈 1.ipa和plist的生成步驟 選擇外接裝置選項 實際有無裝置無關 將程式archive。選擇ad hoc用於分發。選擇自己的企業級證書。2.構建 將這些專案上傳到您 上已鑑定的使用者可以訪問的區域 設定伺服器 ...
iOS 蘋果企業證書通過網頁分發安裝app
1.ipa和plist的生成步驟 選擇外接裝置選項 實際有無裝置無關 將程式archive。選擇ad hoc用於分發。選擇自己的企業級證書。2.構建 設定伺服器 mime 型別 您可能需要配置您的 web 伺服器以便正確地傳輸清單檔案和應用程式檔案。對於 os x server,將以下 mime 型...