动画ImageView的宽度不结垢 [英] Animate ImageView width without scaling

问题描述

我想，所以它慢慢地由左到右显示动画的ImageView的。 当我我遇到了麻烦问过这说明什么我想，所以这次我创建使用预期的效果HTML / JS：

I'm trying to animate an ImageView so it's slowly shown from left to right. When I asked this before I was having trouble to explain what I wanted, so this time I created the desired effect using HTML / JS:

http://jsfiddle.net/E2uDE/

什么是获得这种效果在Android的最佳方法是什么？

What would be the best way to get this effect in Android?

我试图改变scaleType，然后应用Sca​​leAnimation直接到ImageView的：

I tried changing the scaleType and then applying a ScaleAnimation directly to that ImageView:

布局：

<ImageView
    android:id="@+id/graphImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:scaleType="centerCrop"
    android:background="@android:color/transparent"
    android:contentDescription="@string/stroom_grafiek"
    />

Java的：

scale = new ScaleAnimation((float)0,
        (float)1, (float)1, (float)1,
        Animation.RELATIVE_TO_SELF, (float)0,
        Animation.RELATIVE_TO_SELF, (float)1);
scale.setDuration(1000);

graphImage.startAnimation(scale);

不过这STIL缩放图像。

But this stil scales the image.

我也试过包裹的ImageView中的FrameLayout，希望我可以动画显示的FrameLayout：

I also tried wrapping the ImageView in a FrameLayout, hoping I could just animate the FrameLayout:

<FrameLayout
    android:layout_width="70dp"
    android:layout_height="fill_parent"
    android:clipChildren="true"">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|left|clip_horizontal" />
</FrameLayout>

这将仍然试图扩大我的ImageView以适合的FrameLayout里面。

This will still try to scale my ImageView to fit inside the FrameLayout.

推荐答案

有几种方法可以做到这一点 - 一个方法是简单地改变夹在画布上（即，其视图被允许绘制的区域）的的ImageView 绘制你的形象。慢慢提高拉伸边界的右边缘将导致相同的效果的例子链路

There are several ways to do this - one way is to simply change the clip on the canvas (i.e. the area where the view is allowed to draw) of the ImageView drawing your image. Slowly increasing the right-hand edge of the draw bounds will result in same effect as in your example link.

我已经写了一些例如code 这说明了这种技术。如果你下载/编译/运行项目，点击图像将运行显示动画。

I have written some example code which illustrates this technique. If you download/build/run the project, clicking on the image will run the reveal animation.

看一看的<一个的的OnDraw 方法href="https://github.com/antonyt/CoveredImageView/blob/master/src/com/antonyt/coveredimageview/CoveredImageView.java">CoveredImageView类，它具有以下基本结构：

Have a look at the onDraw method of the CoveredImageView class, which has the following basic structure:

@Override
protected void onDraw(Canvas canvas) {
    ...
    canvas.getClipBounds(mRect);
    mRect.right = ...;
    canvas.clipRect(mRect);
    ...
    super.onDraw(canvas);
    ...
    invalidate();
}

剪辑被调整，然后无效（）被调用，从而引起的OnDraw（）来再次调用

The clip is adjusted and then invalidate() is called, causing onDraw() to be called again.

我也写了一些code插值经过时间，它不依赖于机器人的任何特定版本的对夹值。但是，作为一个音符，从Android的3.0有一个新的动画框架和 ValueAnimator 类，可以帮助执行这些任务。

I have also written some code to interpolate the right clip value from the elapsed time, which does not depend on any particular version of Android. However, as a note, from Android 3.0 there is a new animation framework and a ValueAnimator class which could help perform such tasks.

这篇关于动画ImageView的宽度不结垢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！