# 自定义View：播放、暂停按钮优雅的过渡

## 测量及初始化

``````
mWidth = MeasureSpec.getSize(widthMeasureSpec);
mHeight = MeasureSpec.getSize(heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
switch (widthMode) {
case MeasureSpec.EXACTLY:
mWidth = mHeight = Math.min(mWidth, mHeight);
setMeasuredDimension(mWidth, mHeight);
break;
case MeasureSpec.AT_MOST:
float density = getResources().getDisplayMetrics().density;
mWidth = mHeight = (int) (50 * density); //默认50dp
setMeasuredDimension(mWidth, mHeight);
break;
}

``````

``````
canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mPaint);

``````

## 计算Path

1、初始化完毕后，怎么实现两个竖条到一个三角形的过渡呢？这里首先想到的就是自定义 View 常用的 drawPath 方法，抛开动画不谈，整个 View 变化过程其实就是两个矩形变成两个直角三角形的过程。

``````
float distance = mGapWidth;  //暂停时左右两边矩形距离
float barWidth = mRectWidth / 2 - distance / 2;     //一个矩形的宽度
float leftLeftTop = barWidth;       //左边矩形左上角

float rightLeftTop = barWidth + distance;       //右边矩形左上角
float rightRightTop = 2 * barWidth + distance;  //右边矩形右上角
float rightRightBottom = rightRightTop; //右边矩形右下角

``````

bottom 的话直接加上矩形的高度即可。

``````
mLeftPath.moveTo(0, 0);
mLeftPath.lineTo(leftLeftTop, mRectHeight);
mLeftPath.lineTo(barWidth, mRectHeight);
mLeftPath.lineTo(barWidth, 0);
mLeftPath.close();

mRightPath.moveTo(rightLeftTop, 0);
mRightPath.lineTo(rightLeftTop, mRectHeight);
mRightPath.lineTo(rightRightBottom, mRectHeight);
mRightPath.lineTo(rightRightTop, 0);
mRightPath.close();

``````

2、在一开始写的时候就写了这么多计算的方法，但是这时候矩形的边角会超出 View 的范围，所以后来计算了一波位置：

``````
float space = (float) (mRadius / Math.sqrt(2));
mRectLT = (int) (mRadius - space);
int rectRB = (int) (mRadius + space);
mRect.top = mRectLT;
mRect.bottom = rectRB;
mRect.left = mRectLT;
mRect.right = rectRB;

``````

``````
mLeftPath.moveTo(mRectLT, mRectLT);
mLeftPath.lineTo(leftLeftTop + mRectLT, mRectHeight + mRectLT);
mLeftPath.lineTo(barWidth + mRectLT, mRectHeight + mRectLT);
mLeftPath.lineTo(barWidth + mRectLT, mRectLT);
mLeftPath.close();

mRightPath.moveTo(rightLeftTop + mRectLT, mRectLT);
mRightPath.lineTo(rightLeftTop + mRectLT, mRectHeight + mRectLT);
mRightPath.lineTo(rightRightBottom + mRectLT, mRectHeight + mRectLT);
mRightPath.lineTo(rightRightTop + mRectLT, mRectLT);
mRightPath.close();

``````

``````
canvas.drawPath(mLeftPath, mPaint);
canvas.drawPath(mRightPath, mPaint);

``````

## 动画实现

``````
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0 , 1);
valueAnimator.setDuration(200);
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mProgress = (float) animation.getAnimatedValue();
invalidate();
}
});

``````

``````
float distance = mGapWidth * (1 - mProgress);  //暂停时左右两边矩形距离
float barWidth = mRectWidth / 2 - distance / 2;     //一个矩形的宽度
float leftLeftTop = barWidth * mProgress;       //左边矩形左上角

float rightLeftTop = barWidth + distance;       //右边矩形左上角
float rightRightTop = 2 * barWidth + distance;  //右边矩形右上角
float rightRightBottom = rightRightTop - barWidth * mProgress; //右边矩形右下角

``````

``````
canvas.rotate(rotation, mWidth / 2f, mHeight / 2f);

``````

√（( r / √2 ) ^ 2 + OF ^ 2） = √2 * r - OF

``````radius * Math.sqrt(2) / 8f
``````

``````mRectHeight / 8f
``````

``````
canvas.translate((float) (mRectHeight / 8f * mProgress), 0);

``````

## 总结

``````
<declare-styleable name="PlayPauseView">
<attr name="bg_color" format="color"/>
<attr name="btn_color" format="color"/>
<attr name="gap_width" format="float"/>
<attr name="anim_duration" format="integer"/>
<attr name="anim_direction">
<enum name="positive" value="1"/>
<enum name="negative" value="2"/>
</attr>
</declare-styleable>

``````

• 序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 118,170评论 1 238
• 序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 51,474评论 1 200
• 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 73,398评论 0 167
• 文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
开封第一讲书人阅读 36,051评论 0 127
• 正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 42,849评论 1 205
• 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 35,584评论 1 124
• 那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
沈念sama阅读 27,553评论 2 206
• 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 26,693评论 0 119
• 想象着我的养父在大火中拼命挣扎，窒息，最后皮肤化为焦炭。我心中就已经是抑制不住地欢快，这就叫做以其人之道，还治其人...
爱写小说的胖达阅读 25,658评论 5 172
• 序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 29,717评论 0 178
• 正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
茶点故事阅读 26,965评论 1 167
• 正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 28,219评论 1 177
• 白月光回国，霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前， 不然我有一百种方法让你生不如死。]我...
爱写小说的胖达阅读 22,537评论 0 25
• 序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 25,126评论 2 163
• 正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 28,968评论 3 172
• 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 23,960评论 0 4
• 文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
开封第一讲书人阅读 24,029评论 0 113
• 我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
沈念sama阅读 30,163评论 2 188
• 正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 30,592评论 2 188