基于属性动画，实现咔嚓截屏（收藏）动画

最新推荐文章于 2021-08-19 10:04:19 发布

夜尽天明89

最新推荐文章于 2021-08-19 10:04:19 发布

阅读量521

点赞数

分类专栏： Android笔记 Android kotlin 文章标签： android animation

本文链接：https://blog.csdn.net/u014620028/article/details/113529034

版权

本文介绍如何利用Android属性动画实现一种模拟截屏的收藏动画效果。当点击按钮后，屏幕内容逐渐透明、缩小并沿抛物线路径移动至按钮位置，通过贝塞尔曲线实现平滑过渡。代码简洁易懂，包含关键步骤的详细说明和示例效果图。

摘要由CSDN通过智能技术生成

写在前面：这里的截屏，其实不是真正意义上的截屏。而是把数据先设置到一些控件上，让控件做透明度、缩小、位移等动画。只是看起来像截屏。为了方便描述，下面还是采用截屏这种说法。

需求：做一个咔嚓截屏收藏功能。点击“按钮”后，把屏幕截屏，然后把截下来的内容，做缩小、透明度、位移等动画，飞到按钮上。

因为代码简单，就没放到GitHub上，直接全部放出来了。复制了就能用。

代码中已经有一些注释了，但是有一些地方因为简单的文字描述不清除，需要在博客中详细说。

先来2张简单的效果图
在这里插入图片描述

注意最后的说明。
注意最后的说明。
注意最后的说明。

上代码：
1、引入三方CardView，因为项目用需要带阴影，且阴影要自由指定颜色，就找了个三方的

//可以指定阴影颜色的卡片view
implementation 'com.zyp.cardview:cardview:1.0.1'

2、UiUtils

import android.content.Context;
import android.content.res.Resources;

public class UiUtils {

    public static int dip2px(Context context, float dpValue) {
        final float scale = getResources(context).getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    private static Resources getResources(Context context) {
        return context.getResources();
    }

    public static int getScreenWidth(Context context) {
        return getResources(context).getDisplayMetrics().widthPixels;
    }
    
    public static int getScreenHeight(Context context) {
        return getResources(context).getDisplayMetrics().heightPixels;
    }

}

3、因为要做抛物线，需要用到贝塞尔曲线。BezierUtil

import android.graphics.PointF;

public class BezierUtil {

    /**
     * B(t) = (1 - t)^2 * P0 + 2t * (1 - t) * P1 + t^2 * P2, t ∈ [0,1]
     *
     * @param t  力度步长
     * @param p0 起始点
     * @param p1 控制点
     * @param p2 终止点
     * @return t对应的点
     */
    public static PointF getPointFromQuadBezier(float t, PointF p0, PointF p1, PointF p2) {
        PointF point = new PointF();
        float temp = 1 - t;
        point.x = temp * temp * p0.x + 2 * t * temp * p1.x + t * t * p2.x;
        point.y = temp * temp * p0.y + 2 * t * temp * p1.y + t * t * p2.y;
        return point;
    }

    /**
     * B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3, t ∈ [0,1]
     *
     * @param t  力度步长
     * @param p0 起始点
     * @param p1 控制点1
     * @param p2 控制点2
     * @param p3 终止点
     * @return t对应的点
     */
    public static PointF getPointFromCubicBezier(float t, PointF p0, PointF p1, PointF p2, PointF p3) {
        PointF point = new PointF();
        float temp = 1 - t;
        point.x = p0.x * temp * temp * temp + 3 * p1.x * t * temp * temp + 3 * p2.x * t * t * temp + p3.x * t * t * t;
        point.y = p0.y * temp * temp * temp + 3 * p1.y * t * temp * temp + 3 * p2.y * t * t * temp + p3.y * t * t * t;
        return point;
    }
}

4、BezierEvaluator

import android.animation.TypeEvaluator;
import android.graphics.PointF;

public class BezierEvaluator implements TypeEvaluator<PointF> {

    private PointF mControlPoint;

    public BezierEvaluator(PointF controlPoint) {
        this.mControlPoint=controlPoint;
    }

    @Override
    public PointF evaluate(float v, PointF pointF, PointF t1) {
        return BezierUtil.getPointFromQuadBezier(v,pointF,mControlPoint,t1);
    }
}

5、布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:lay