仿網易郵箱大師進度框

先上效果圖：

這個影象由三段弧線構成。用到的方法是canvas.drawarc()需要注意的是paint的設定。

// 抗鋸齒

paint = new paint(paint.anti_alias_flag);
// 預設顏色
paint.setcolor(color.parsecolor("#b33425"));
// 設定為只畫線不填充
paint.setstyle(paint.style.stroke);
// 設定預設的線寬
paint.setstrokewidth(strokwidth);
// 將線的兩頭設定為半圓
paint.setstrokecap(paint.cap.round);

@override

protected void ondraw(canvas canvas) 
// 設定線寬
paint.setstrokewidth(strokwidth);
// 畫紅色弧線
paint.setcolor(color.parsecolor("#b33425"));
canvas.drawarc(getrectf(), 0f + angle, 80f, false, paint);
// 隔開120度，再畫灰線
paint.setcolor(color.parsecolor("#5d5c5a"));
canvas.drawarc(getrectf(), 0f + angle + 120, 80f, false, paint);
// 隔開240度， 再畫藍線
paint.setcolor(color.parsecolor("#2972a6"));
canvas.drawarc(getrectf(), 0f + angle + 240, 80f, false, paint);
}

1. 旋轉，通過控制弧線起始角度

2. 進度條的粗細變化，通過控制paint的strokewidth

3. 繪畫空間的縮放，通過控制drawarc的rectf引數

定義三個域來儲存資料，並通過動畫操縱它們：

// 繪製角度

private float angle = 0;
// 線寬
private float strokwidth = 5;
// 距離邊框的空白大小
private float padding = 0;

public void startanimation() 

});// 一直正向迴圈
circleanimator.setrepeatmode(valueanimator.restart);
circleanimator.setrepeatcount(valueanimator.infinite);
// 控制線寬，從5畫素到20畫素
valueanimator thickanimator = valueanimator.offloat(5, 20);
thickanimator.addupdatelistener(new valueanimator.animatorupdatelistener() 
});// 反向迴圈
thickanimator.setrepeatmode(valueanimator.reverse);
thickanimator.setrepeatcount(valueanimator.infinite);
// 控制繪製空間的空白變化，會讓弧線變曲
valueanimator paddinganimator = valueanimator.offloat(10, 100);
paddinganimator.addupdatelistener(new valueanimator.animatorupdatelistener() 
});paddinganimator.setrepeatmode(valueanimator.reverse);
paddinganimator.setrepeatcount(valueanimator.infinite);
animatorset = new animatorset();
animatorset.play(circleanimator).with(thickanimator).with(paddinganimator);
animatorset.setduration(1500);
animatorset.start();
}

// 獲取繪製空間，通過padding控制座標

private rectf getrectf() 

/**

* created by jaychen on 2016/10/13.
*/public class tripprogress extends view 
@override
protected void ondraw(canvas canvas) 
// 設定線寬
paint.setstrokewidth(strokwidth);
// 畫紅色弧線
paint.setcolor(color.parsecolor("#b33425"));
canvas.drawarc(getrectf(), 0f + angle, 80f, false, paint);
// 隔開120度，再畫灰線
paint.setcolor(color.parsecolor("#5d5c5a"));
canvas.drawarc(getrectf(), 0f + angle + 120, 80f, false, paint);
// 隔開240度， 再畫藍線
paint.setcolor(color.parsecolor("#2972a6"));
canvas.drawarc(getrectf(), 0f + angle + 240, 80f, false, paint);
}public void startanimation() 
});// 一直正向迴圈
circleanimator.setrepeatmode(valueanimator.restart);
circleanimator.setrepeatcount(valueanimator.infinite);
// 控制線寬，從5畫素到20畫素
valueanimator thickanimator = valueanimator.offloat(5, 20);
thickanimator.addupdatelistener(new valueanimator.animatorupdatelistener() 
});// 反向迴圈
thickanimator.setrepeatmode(valueanimator.reverse);
thickanimator.setrepeatcount(valueanimator.infinite);
// 控制繪製空間的空白變化，會讓弧線變曲
valueanimator paddinganimator = valueanimator.offloat(10, 100);
paddinganimator.addupdatelistener(new valueanimator.animatorupdatelistener() 
});paddinganimator.setrepeatmode(valueanimator.reverse);
paddinganimator.setrepeatcount(valueanimator.infinite);
animatorset = new animatorset();
animatorset.play(circleanimator).with(thickanimator).with(paddinganimator);
animatorset.setduration(1500);
animatorset.start();
}// 獲取繪製空間，通過padding控制座標
private rectf getrectf() 

最好用的網易郵箱工具 網易郵箱助手

我之所以用網易的郵箱，是因為獨到的實時郵件推送功能，而不是簡單通過pop3的方式，等你去查詢，客戶端主要有三款 1 最新的郵件大師windows版 2 之前的閃電郵 這裡要介紹的就是 郵件助手 pushmail技術，無需開啟瀏覽器，新郵件一到，實時在電腦上提醒您！遠勝於其他採用輪詢機制的郵件提醒類軟...

網易郵箱面試覆盤

今年年初第一次面試了網易的前端，不出所料地掛了t t。其實題目很簡單，但是我的基礎實在是太薄弱了而且準備的也不是很充分，所以希望趁假期好好地補一下然後再出手。感覺前兩年半在學校東學一點西學一點，沒有深入地學習過什麼知識，離達到社會對技術崗的要求還有很大的距離。感覺自己現在所剩的時間說不上很充裕，但是...

仿網易nec首頁動畫效果

首先，介紹animation animation檢索或設定物件所應用的動畫特效。animation由 keyframes 這個屬性來實現這樣的效果。keyframes具有其自己的語法規則，他的命名是由 keyframes 開頭，後面緊接著是這個 動畫的名稱 加上一對花括號 括號中就是一些不同時間段樣...