上实现效果
3.gif
这个效果是通过两个布局，分别都有动画效果来进行实现的
public class PowerCoolLayout extends View {
private Paint paint;
private Bitmap bitmap;
private int dp250;
private int dp100;
private Rect rect;
private LinearGradient greenShader;
private LinearGradient redShader;
private Paint gradientPaint;
private ValueAnimator valueAnimator;
private Path snowPath;
private Path snowPath2;
private Path snowPath3;
private PathMeasure pathMeasure;
private PathMeasure pathMeasure2;
private PathMeasure pathMeasure3;
private float[] mCurrentPosition = new float[2];
private float[] mCurrentPosition2 = new float[2];
private float[] mCurrentPosition3 = new float[2];
private Bitmap snowBitmap;
private Bitmap snowBitmap2;
private Rect bitmapRect2;
private Rect desBitmapRect2;
private Rect bitmapRect3;
private Rect desBitmapRect3;
//摄氏度的值
private String drawCelsiusText;
private double currentCelsius;
public PowerCoolLayout(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
paint = new Paint();
paint.setColor(Color.WHITE);
paint.setTextSize(UiUtils.dp2px(getContext(), 40));
gradientPaint = new Paint();
bitmap = getBitmap(R.drawable.ic_report_mobile_cool, false);
dp250 = UiUtils.dp2px(getContext(), 150);
dp100 = UiUtils.dp2px(getContext(), 100);
snowPath = new Path();
snowPath2 = new Path();
snowPath3 = new Path();
snowBitmap = getBitmap(R.drawable.ic_snow, false);
snowBitmap2 = getBitmap(R.drawable.ic_snow, true);
drawCelsiusText = String.valueOf(MyApplication.PHONE_CELSIUS) + "°";
currentCelsius = getRandomCool();
}
/**
* 来回降5度多一点
*
* @return
*/
private double getRandomCool() {
return (((int) (new Random().nextDouble() * 100)) / 100.0 + 9);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (valueAnimator == null) {
bitmapRect2 = new Rect(0, 0, snowBitmap.getWidth(), snowBitmap.getHeight());
desBitmapRect2 = new Rect(0, 0, snowBitmap.getWidth() / 2, snowBitmap.getHeight() / 2);
bitmapRect3 = new Rect();
desBitmapRect3 = new Rect();
handlePathMeasure();
rect = new Rect(0, 0, getWidth(), getHeight());
greenShader = new LinearGradient(0, 0, getWidth(), getHeight(), new int[]{getResources().getColor(R.color.c_0043ff), getResources().getColor(R.color.c_008dff)}, null, Shader.TileMode.REPEAT);
redShader = new LinearGradient(0, 0, getWidth(), getHeight(), new int[]{getResources().getColor(R.color.c_FF6A00), getResources().getColor(R.color.c_F49F1F)}, null, Shader.TileMode.REPEAT);
gradientPaint.setShader(redShader);
}
}
private void handlePathMeasure() {
int centerX = (int) (getWidth() / 2.0);
int centerY = (int) (dp250 + bitmap.getHeight() / 2.0f);
snowPath.moveTo(0, 0);
snowPath.lineTo(centerX, centerY);
pathMeasure = new PathMeasure(snowPath, false);
snowPath2.moveTo(getWidth(), 0);
snowPath2.lineTo(centerX, centerY);
pathMeasure2 = new PathMeasure(snowPath2, false);
snowPath3.moveTo(getWidth(), getHeight() - dp250);
snowPath3.lineTo(centerX, centerY);
pathMeasure3 = new PathMeasure(snowPath3, false);
initValueAnim(1, pathMeasure);
initValueAnim(2, pathMeasure2);
initValueAnim(3, pathMeasure3);
}
private void initValueAnim(int type, PathMeasure pathMeasure) {
float length = pathMeasure.getLength();
valueAnimator = ValueAnimator.ofFloat(0, length);
valueAnimator.addUpdateListener(animation -> {
float animatedValue = (float) animation.getAnimatedValue();
//mCurrentPosition 传进去，就被复制了
if (type == 1) {
pathMeasure.getPosTan(animatedValue, mCurrentPosition, null);
} else if (type == 2) {
pathMeasure.getPosTan(animatedValue, mCurrentPosition2, null);
} else {
pathMeasure.getPosTan(animatedValue, mCurrentPosition3, null);
}
onPercent(animatedValue / length);
invalidate();
});
valueAnimator.setDuration(3000);
valueAnimator.start();
}
private void onPercent(float percent) {
drawCelsiusText = getLastDoubleValue(MyApplication.PHONE_CELSIUS - ((currentCelsius) * percent)) + "°";
if (percent > 0.6f) {
gradientPaint.setShader(greenShader);
}
if (coolChangeListener != null) {
coolChangeListener.onChangePercent(percent);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(snowPath, paint);
canvas.drawRect(rect, gradientPaint);
canvas.drawBitmap(bitmap, (getWidth() - bitmap.getWidth()) / 2.0f, dp250, paint);
// String text = "35.1°";
//画摄氏度的变化
paint.setTextAlign(Paint.Align.CENTER);
canvas.drawText(drawCelsiusText, (getWidth()) / 2.0f, dp250 + dp100 + bitmap.getHeight(), paint);
canvas.drawBitmap(snowBitmap, mCurrentPosition[0], mCurrentPosition[1], paint);
canvas.drawBitmap(snowBitmap2, mCurrentPosition2[0], mCurrentPosition2[1], paint);
canvas.drawBitmap(snowBitmap2, mCurrentPosition3[0], mCurrentPosition3[1], paint);
}
private Bitmap getBitmap(int drawableRes, boolean isHalf) {
Drawable drawable = getResources().getDrawable(drawableRes);
return drawableToBitmap(drawable, isHalf);
}
/**
* Drawable转换成一个Bitmap
*
* @param drawable drawable对象
* @return
*/
private Bitmap drawableToBitmap(Drawable drawable, boolean isHalf) {
Bitmap bitmap = null;
if (isHalf) {
bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth() / 2, drawable.getIntrinsicHeight() / 2,
drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888 : Bitmap.Config.RGB_565);
} else {
bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(),
drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888 : Bitmap.Config.RGB_565);
}
Canvas canvas = new Canvas(bitmap);
if (isHalf) {
drawable.setBounds(0, 0, drawable.getIntrinsicWidth() / 2, drawable.getIntrinsicHeight() / 2);
} else {
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
}
drawable.draw(canvas);
return bitmap;
}
private double getLastDoubleValue(double value) {
return ((int) (value * 10)) / 10.0;
}
private PowerCoolChangeListener coolChangeListener;
public void setCoolChangeListener(PowerCoolChangeListener coolChangeListener) {
this.coolChangeListener = coolChangeListener;
}
public interface PowerCoolChangeListener {
void onChangePercent(float percent);
}
}
PowerCoolLayout是进来的时候的，然后带了个界面，电路板界面的动画效果，中间的个电路板是图片
然后通过canvas.drawText来进行温度的绘制，变化是通过动画来进行变化的
public class GoodChangeLayout extends LinearLayout {
private ValueAnimator valueAnimator;
private int currentHeight;
private TextView tvDec;
public GoodChangeLayout(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
setGravity(Gravity.CENTER);
setOrientation(VERTICAL);
View.inflate(getContext(), R.layout.view_good_change_layout, this);
tvDec = findViewById(R.id.tvDec);
// currentHeight = (getResources().getDisplayMetrics().heightPixels * 2) / 3;
currentHeight = UiUtils.dp2px(getContext(), 1080);
valueAnimator = ValueAnimator.ofInt(currentHeight, UiUtils.dp2px(getContext(), 220));
valueAnimator.setDuration(2000);
valueAnimator.addUpdateListener(animation -> {
int animatedValue = (int) animation.getAnimatedValue();
// layout(0, 0, getWidth(), animatedValue);
ViewGroup.LayoutParams layoutParams = getLayoutParams();
layoutParams.height = animatedValue;
setLayoutParams(layoutParams);
});
}
// @Override
// protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// super.onMeasure(widthMeasureSpec, currentHeight);
// }
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// if (gradientPaint == null) {
// gradientPaint = new Paint();
// greenShader = new LinearGradient(0, 0, getWidth(), currentHeight, new int[]{getResources().getColor(R.color.c_0043ff), getResources().getColor(R.color.c_008dff)}, null, Shader.TileMode.REPEAT);
// rect = new Rect(0, 0, getWidth(), currentHeight);
// gradientPaint.setShader(greenShader);
//
// }
}
public void setTvDec(String value) {
tvDec.setText(value);
}
@Override
protected void onDraw(Canvas canvas) {
// canvas.drawRect(rect, gradientPaint);
super.onDraw(canvas);
}
public void startAnim() {
if (valueAnimator.isRunning()) {
return;
}
if (valueAnimator != null) {
valueAnimator.start();
}
}
}
GoodChangeLayout 就是最后显示成功的那个界面，这个界面通过动画改边自己的高度来实现动画，一开始想使用layout来进行实现，发现出现了点问题，只是把本地布局进行了修改
这里记录一下layout，layout的具体是什么意思
public class PowerCoolActivity extends BaseAppCompatActivity {
public static final String TAG = "PowerCoolActivity";
private PowerCoolLayout pclLayout;
private GoodChangeLayout gclLayout;
private Toolbar mToolBar;
public static void start(Context context) {
Intent intent = new Intent(context, PowerCoolActivity.class);
context.startActivity(intent);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window window = getWindow();
// Translucent status bar
window.setFlags(
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
setContentView(R.layout.activity_power_cool);
initToolBar();
initOtherIds();
}
private void initOtherIds() {
gclLayout = findViewById(R.id.gclLayout);
pclLayout = findViewById(R.id.pclLayout);
pclLayout.setCoolChangeListener(percent -> {
if (percent == 1) {
pclLayout.setVisibility(View.GONE);
gclLayout.startAnim();
}
});
}
private void initToolBar() {
mToolBar = findViewById(R.id.toolBar);
mToolBar.setTitle("");
mToolBar.setTitleTextColor(getResources().getColor(R.color.white));
mToolBar.setNavigationIcon(R.drawable.white_return);
setSupportActionBar(mToolBar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
@Override
public boolean onSupportNavigateUp() {
finish();
return super.onSupportNavigateUp();
}
}
PowerCoolActivity实际是一个展示的载体
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/clear_blue_selector"
tools:context=".ui.clear.PowerCoolActivity">
<android.support.v4.widget.NestedScrollView
android:id="@+id/nsvScroll"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.mobi.clearsafe.ui.clear.widget.GoodChangeLayout
android:id="@+id/gclLayout"
android:layout_width="match_parent"
android:layout_height="1080dp" />
<android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/white_cron18_selector"
android:padding="18dp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<com.mobi.clearsafe.ui.clear.widget.PowerCoolLayout
android:id="@+id/pclLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:fitsSystemWindows="true"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
PowerCoolActivity对应的xml
网友评论