带您完成神秘的涟漪按钮效果-提高篇
初级
7038人学
9.3分
-
-
骑猪看夕阳
2018-02-20
- Drawable的绘制流程
-
截图
0赞 · 0采集
-
-
吴悔mk
2018-01-03
- 透明度过滤光计算
-
截图
0赞 · 0采集
-
-
吴悔mk
2018-01-03
- 透明度过滤光计算
-
截图
0赞 · 0采集
-
-
natan
2017-08-15
- Drawable绘制流程
-
截图
0赞 · 0采集
-
-
natan
2017-08-15
- 动画机制
-
截图
0赞 · 0采集
-
-
qq_Ranc鹏_0
2017-05-31
- 1、首先确定点击位置,设置为启动时的圆心
2、圆心是逐渐移动的,结束位置为控件的中心区域
3、圆的半径最大值为中心到边缘的最大长度
4、背景颜色透明度逐渐加深的过程
-
0赞 · 0采集
-
-
xzhang76
2017-05-24
- 完成退出动画
1.退出动画的runnable
private Runnable mExitRunnable = new Runnable() {
@Override
public void run() {
mExitProgress = mExitProgress + EXIT_INCREMENT;
if (mExitProgress > 1) {
Log.d("zxt", "exit runnable done");
onExitProgressChanged(1);
return;
}
float realProgress = mExitInterpolator.getInterpolation(mExitProgress);
onExitProgressChanged(realProgress);
// 延迟16毫秒再重绘, 保证洁面刷新频率接近60fps
scheduleSelf(mExitRunnable, SystemClock.uptimeMillis() + 16);
}
};
2.在onExitProgressChanged()要完成两个工作
(1)背景色由深变淡
(2)涟漪的圆颜色减淡
private void onExitProgressChanged(float realProgress) {
// 第一个参数是初始值, 背景色减淡
mBackgroundColor = changeColorAlpha(0x30000000, 1 - realProgress);
// 涟漪的圆减淡
mAlpha = (int) (INIT_ALPHA * (1 - realProgress));
onColorOrAlphaChanged();
invalidateSelf();
}
3.其他的地方好好看一下代码
-
0赞 · 0采集
-
-
xzhang76
2017-05-19
- 增强涟漪动画效果
1.按钮背景色逐渐变深
(1)使用下面的方法改变颜色的透明度
private int changeColorAlpha(int color, float progress) {
int alpha = (color >> 24) & 0xFF;
alpha = (int) (alpha * progress);
int red = (color >> 16) & 0xFF;
int green = (color >> 8) & 0xFF;
int blue = color & 0xFF;
return (alpha << 24) | (red << 16) | (green << 8) | blue;
}
其实就是变化了alpha值,其他三色都不变。
(2)进度值变化时调用这个方法来改变背景色
private void onProgressChanged(float realProgress) {
mRadius = mMaxRadius * realProgress;
mDrawableX = mDownCenterX + (mCenterX - mDownCenterX) * realProgress;
mDrawableY = mDownCenterY + (mCenterY - mDownCenterY) * realProgress;
mBackgoundColor = changeColorAlpha(0x40000000, realProgress);
invalidateSelf();
}
-
截图
0赞 · 1采集
-
-
xzhang76
2017-05-19
- 增强涟漪动画效果
1.效果图
(1)背景色变深
(2)圆心位置向中心位置移动
(3)圆半径变大
2.先实现后面两点
1.圆半径随进度变大,这个已经实现
2.涟漪效果的圆心向控件中心靠拢——根据按下位置和控件中心位置 再结合进度来计算
private float mDrawableX, mDrawableY; // 涟漪效果的圆心
private float mDownCenterX, mDownCenterY; // 按下时的点
private float mCenterX, mCenterY; // 控件的中心位置
计算方法:
mDrawableX = mDownCenterX + (mCenterX - mDownCenterX) * realProgress;
mDrawableY = mDownCenterY + (mCenterY - mDownCenterY) * realProgress;
综上,可以抽出一个方法:
private void onProgressChanged(float realProgress) {
mRadius = mMaxRadius * realProgress;
mDrawableX = mDownCenterX + (mCenterX - mDownCenterX) * realProgress;
mDrawableY = mDownCenterY + (mCenterY - mDownCenterY) * realProgress;
invalidateSelf();
}
在runnable中进度值变化时调用。
-
截图
0赞 · 0采集
-
-
xzhang76
2017-05-18
- 了解drawable如何实现动画
1.drawable的动画机制
(1)常规动画:逐帧动画,补间动画
仅仅改变动画效果,不改变控件参数值
(2)属性动画
改变控件的参数值
这两种动画都是通过handler来实现的
2.如何实现动画
按下的时候启动一个runnable,并在这个runnable里面继续schedule这个runnable
private void startEnterRunnable() {
mProgress = 0;
mRadius = 0;
unscheduleSelf(mEnterRunnable);
scheduleSelf(mEnterRunnable, SystemClock.uptimeMillis());
}
private Interpolator mEnterInterpolator = new DecelerateInterpolator(1.5f);
private Runnable mEnterRunnable = new Runnable() {
@Override
public void run() {
mProgress = mProgress + 0.03f;
if (mProgress > 1.2) {
return;
}
float realProgress = mEnterInterpolator.getInterpolation(mProgress);
mRadius = 400 * realProgress;
invalidateSelf();
// 延迟16毫秒再重绘, 保证洁面刷新频率接近60fps
scheduleSelf(mEnterRunnable, SystemClock.uptimeMillis() + 16);
}
};
关于插值器,我已经懂了
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- !!!
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- !!!
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- !!!
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- !!!!
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- !!!设置默认值
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- !!!
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- !!!
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- !!!
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- 将颜色值传进来
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- !!!
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- !!!
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- !!!
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- 去掉即可
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- ***当多个半透明颜色块叠加的算法的方法有了之后,那么之前写的那些更改颜色的方法也就没用了。
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- 第四点
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- !!!
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- !!!给背景一个颜色值
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- 配置好退出应消耗的时间,即改变16f的分母的值
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- 把颜色加深一点,加深到60
-
截图
0赞 · 0采集
-
-
最後的最後_
2017-04-14
- 这里还需要进行判断,如果进入动画没有完成的话,就直接return,防止代码继续向下运行
-
截图
0赞 · 0采集