动画（缩放和翻译）android画布视图上的图像的一部分

Posted 2023-02-22

【中文标题】动画（缩放和翻译）android画布视图上的图像的一部分

【英文标题】：Animate (Zoom and Translate) a part of image on android canvas view

【发布时间】：2013-09-16 12:27:51

【问题描述】：

我有一张图片，例如如下图所示：

此图像有两个部分，第 1 部分的大小宽度 W 和高度 L 以及宽度 w 和高度的第 2 部分（较小的部分） h（将第 1 部分称为源，将第 2 部分称为目标）。让第一个矩形的坐标为（从左上角测量）：顶部：100 左侧：10 右侧：200 底部：300 和第二个矩形的坐标（从左上角测量）：顶部 50 左：500底部：100 右侧：700

我想制作从源到目的地的动画，以便图像从源到目的地平移和放大。

所以我的第一个屏幕如下所示：

我的第二张图片看起来像：

如何在这两者之间进行补间？ 我的代码（没有动画）如下所示：

public class SuperGame extends View implements OnGestureListener

    int sreenHeight, screenWidth;
    int drawCount = 0;
    Bitmap bg;

    public SuperGame(Context context, Bitmap bmp)
    
        this.screenWidth = getContext().getResources().getDisplayMetrics().widthPixels;
    this.screenHeight = getContext().getResources().getDisplayMetrics().heightPixels;
        bg = BitmapFactory.decodeResource(getResources(),R.drawable.bg_img);
    

    @Override
    /* this function triggers the image change
    */
    public boolean onDown(MotionEvent e) 
    invalidate(0,0,screenWidth, screenHeight);
    return true;


    @Override
    public void onDraw(Canvas canvas)
    
        Rect dest = new Rect(0,0,screenWidth, screenHeight);
        if (count==0) //draw the first image part
        
            count=1;
            Rect src = new Rect(100,10,200,300);//coordinates of rectangle 1       
            canvas.drawBitmap(bg,  src, dest, new Paint());
        
        else //draw the second image part - (I'd like to show movement/ transition between these)
        
            Rect src = new Rect(50,500,100,700);//coordinates of rectangle 2       
            count=0;
            canvas.drawBitmap(bg,  src, dest, new Paint());
        
    

如何制作过渡动画（包括放大和平移）？

【问题讨论】：

嗨@User42，我有同样的功能要实现。我必须在屏幕上显示图像的一部分，当用户滑动时，我必须更新屏幕的其他部分，正如你在屏幕中提到的那样。从一个位置移动到另一个位置时，它应该具有动画。您能否分享您的代码，因为我正在寻找解决方案的时间不多了？

【参考方案1】：

您可能需要创建一个 Rect/RectF 类型的自定义 valueAnimator。 代码示例如下：

public class RectFEvaluator 
    implements TypeEvaluator<RectF>


    @Override
    public RectF evaluate(float fraction, RectF srcRect, RectF destRect) 
        RectF betweenRect = new RectF();
        betweenRect.bottom = srcRect.bottom + fraction*(destRect.bottom-srcRect.bottom);
        betweenRect.top = srcRect.top + fraction*(destRect.top-srcRect.top);
        betweenRect.left = srcRect.left + fraction*(destRect.left-srcRect.left);
        betweenRect.right = srcRect.right + fraction*(destRect.right-srcRect.right);
        return betweenRect;
    

value animator 将为您提供 src Rect 和 dest Rect 之间的中间值。 获得这些值后，使用动画更新它们

【讨论】：

我只是想把选中的矩形部分放大一点。我该怎么做？

也许将destRect 设置得大一点？