一只賤賤的小鬼糖儡,信誓旦旦地沖去揭绑,灰頭土臉地回來递鹉。
代碼下載
靈感來于dribbble盟步,主要是利用貝塞爾曲線畫裙邊,先上圖
效果.png
效果.gif
主要步驟
drawShadow(canvas);//畫陰影
drawHead(canvas);//畫頭部
drawBody(canvas);//畫身體
drawHand(canvas);//畫小手
重點是畫帶有裙邊的身體躏结,利用path.quadTo,至于二階貝塞爾曲線網(wǎng)上一搜一大把...
private void drawBody(Canvas canvas) {
path.reset();
float x = (float) ((rectFGhost.width() / 2 - 15) * Math.cos(5 * Math.PI / 180f));
float y = (float) ((rectFGhost.width() / 2 - 15) * Math.sin(5 * Math.PI / 180f));
float x2 = (float) ((rectFGhost.width() / 2 - 15) * Math.cos(175 * Math.PI / 180f));
float y2 = (float) ((rectFGhost.width() / 2 - 15) * Math.sin(175 * Math.PI / 180f));
path.moveTo(rectFGhost.left + rectFGhost.width() / 2 - x, rectFGhost.width() / 2 - y + rectFGhost.top);
path.lineTo(rectFGhost.left + rectFGhost.width() / 2 - x2, rectFGhost.width() / 2 - y2 + rectFGhost.top);
path.quadTo(rectFGhost.right + wspace / 2, rectFGhost.bottom
, rectFGhost.right - wspace, rectFGhost.bottom - hspace);
float a = mskirtH;//(mskirtH/2);
float m = (rectFGhost.width() - 2 * wspace) / 7f;//波動7次
for (int i = 0; i < 7; i++) {
if (i % 2 == 0) {
path.quadTo(rectFGhost.right - wspace - m * i - (m / 2), rectFGhost.bottom - hspace - a
, rectFGhost.right - wspace - (m * (i + 1)), rectFGhost.bottom - hspace);
} else {
path.quadTo(rectFGhost.right - wspace - m * i - (m / 2), rectFGhost.bottom - hspace + a
, rectFGhost.right - wspace - (m * (i + 1)), rectFGhost.bottom - hspace);
}
}
path.quadTo(rectFGhost.left - 5, rectFGhost.bottom
, rectFGhost.left + rectFGhost.width() / 2 - x, rectFGhost.width() / 2 - y + rectFGhost.top);
path.close();
canvas.drawPath(path, mPaint);
}
最后加入動畫效果却盘。控制裙邊的張和媳拴,運動的軌跡以及小手的位置黄橘。
代碼下載