android - 我怎样才能实现这个 ListView 动画？

Question

大家好，我需要一些帮助。我正在尝试在正在滚动的 ListView 上实现一个简单的(但不是真正的)折叠动画。基本上，我试图将 ListView 的第一个可见子项向后折叠，就好像一张纸沿 X 轴向下折叠一样。当用户上下滚动列表时，这种情况会持续进行。这是我第一次使用 Matrix 动画和图形 api 中的 Android 相机，所以我在这里肯定不对。

这是我想要达到的效果

这就是我得到的效果。

我希望动画从原点 (0,0) 开始，但从左侧和右侧开始，从列表项的顶部而不是左上角开始动画。我对矩阵转换或动画不是很熟悉，所以如果有人比我更熟悉这些技术，可以分享一些知识，我将不胜感激。

基本上我重写了 ListView 的 onDrawChild 方法，从绘图缓存中抓取 child 的位图，并使用矩阵来执行动画。照明和相机实现是我从另一个示例应用程序中获取的代码，目的是让动画看起来尽可能像 3D。

我尝试使用 ListView animations图书馆，但运气不佳。我还尝试使用开发人员指南中的代码拼凑出一个解决方案 here它使用对象动画师来实现一个漂亮的小卡片翻转动画，但它开始感觉有点老套，我无法完全按照我想要的方式进行。

这是我当前的实现。如果有人可以阐明这一点或方向，或者如果有人写了一个我在搜索中没有遇到的很棒的库，请随时分享。谢谢

   @Override
protected boolean drawChild(Canvas canvas, View child, long drawingTime) {

    View first = getChildAt(0);

    if (child == first) {
        if (child.getTop() < 0) {

            Bitmap bitmap = getChildDrawingCache(child);
            final int top = child.getTop();
            child.getRight();
            child.getBottom();
            child.getLeft();

            final int childCenterY = child.getHeight() / 2;
            // final int childCenterX = child.getWidth() / 2;
            final int parentCenterY = getHeight() / 2; // center point of
            // child relative to list

            final int absChildCenterY = child.getTop() + childCenterY;

            // final int bottom = child.getBottom();

            // distance of child center to the list center final int
            int distanceY = parentCenterY - absChildCenterY;

            final int r = getHeight() / 2;

            if (mAnimate) {

                prepareMatrix(mMatrix, distanceY, r);



                mMatrix.preTranslate(0, top);

                mMatrix.postTranslate(0, -top);



            }
            canvas.drawBitmap(bitmap, mMatrix, mPaint);

        }

        else {
            super.drawChild(canvas, child, drawingTime);
        }
    } else {
        super.drawChild(canvas, child, drawingTime);
    }
    return false;

}

private void prepareMatrix(final Matrix outMatrix, int distanceY, int r) { // clip
                                                                            // the
                                                                            // distance

    final int d = Math.min(r, Math.abs(distanceY)); //
    // circle formula
    final float translateZ = (float) Math.sqrt((r * r) - (d * d));

    double radians = Math.acos((float) d / r);
    double degree = 45 - (180 / Math.PI) * radians;

    // double degree = -180;

    mCamera.save();
    mCamera.translate(0, 0, r - translateZ);
    mCamera.rotateX((float) degree);
    if (distanceY < 0) {
        degree = 360 - degree;
    }
    mCamera.rotateY((float) degree);
    mCamera.getMatrix(outMatrix);
    mCamera.restore();

    // highlight elements in the middle
    mPaint.setColorFilter(calculateLight((float) degree));
}

private Bitmap getChildDrawingCache(final View child) {
    Bitmap bitmap = child.getDrawingCache();
    if (bitmap == null) {
        child.setDrawingCacheEnabled(true);
        child.buildDrawingCache();
        bitmap = child.getDrawingCache();
    }
    return bitmap;
}

private LightingColorFilter calculateLight(final float rotation) {
    final double cosRotation = Math.cos(Math.PI * rotation / 180);
    int intensity = AMBIENT_LIGHT + (int) (DIFFUSE_LIGHT * cosRotation);
    int highlightIntensity = (int) (SPECULAR_LIGHT * Math.pow(cosRotation,
            SHININESS));
    if (intensity > MAX_INTENSITY) {
        intensity = MAX_INTENSITY;
    }
    if (highlightIntensity > MAX_INTENSITY) {
        highlightIntensity = MAX_INTENSITY;
    }
    final int light = Color.rgb(intensity, intensity, intensity);
    final int highlight = Color.rgb(highlightIntensity, highlightIntensity,
            highlightIntensity);
    return new LightingColorFilter(light, highlight);
}

Answer 1

JazzyListView

有很多与您想要的东西相似的东西，即使不是您想要的东西。看看它们是如何在爵士效果下定义和混合搭配的。我认为 reverse fly 或者 flip 接近你想要的。