Animacja szerokości ImageView bez skalowania

Question

Próbuję animować obraz, aby był powoli pokazywany od lewej do prawej. Kiedy I asked this before miałem kłopot, aby wyjaśnić to, co chciałem, więc tym razem stworzony pożądany efekt przy użyciu HTML/JS:

http://jsfiddle.net/E2uDE/

Jaki byłby najlepszy sposób, aby uzyskać ten efekt w Androidzie?

Próbowałem zmieniając scaleType a następnie nakładanie ScaleAnimation bezpośrednio do tego ImageView:

Układ:

<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); 

Ale stil skaluje obraz.

Próbowałem też owijanie ImageView w FrameLayout, mając nadzieję, mogę tylko animować 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> 

ten będzie nadal próbować skalować mój ImageView aby zmieścić wewnątrz FrameLayout.

Answer 1

Istnieje kilka sposobów, aby to zrobić - jednym ze sposobów jest po prostu zmiana klipu na obszarze roboczym (tj. Obszaru, w którym można narysować widok) rysowania obrazu. Powolne zwiększanie prawych krawędzi linii remisowych da taki sam efekt jak w przykładowym łączu.

Napisałem trochę example code, która ilustruje tę technikę. Jeśli pobierzesz/zbudujesz/uruchomisz projekt, kliknięcie obrazu uruchomi animację ujawnienia.

Wystarczy popatrzeć na metodzie onDraw klasy CoveredImageView, który posiada następującą podstawową strukturę:

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

Klip zostanie skorygowany, a następnie unieważnienia() jest wywoływana, powodując OnDraw(), aby nazwać ponownie .

Napisałem również kod interpolujący właściwą wartość klipu z czasu, który nie jest zależny od konkretnej wersji Androida. Jednak, na marginesie, z Androida 3.0 jest nowa struktura animacji i klasa ValueAnimator, która może pomóc w wykonaniu takich zadań.

Answer 2

Możesz pokrywać swój obraz z innym, na przykład jednym z prostym białym ciągiem. Następnie możesz animować nakładający się obraz bez martwienia się o skalę, aż ma szerokość 0 i ją usunąć. Aby to działało, musisz umieścić swój imageView w RelativeLayout ofc.