Animacja skali obrazu systemu Android względem punktu środkowego

88

Mam ImageView i wykonuję na nim prostą animację skali. Bardzo standardowy kod.

Moje scale_up.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromXScale="1"
           android:fromYScale="1"
           android:toXScale="1.2"
           android:toYScale="1.2"
           android:duration="175"/>
</set>

Mój kod animacji:

Animation a = AnimationUtils.loadAnimation(this, R.anim.scale_up);
((ImageView) findViewById(R.id.circle_image)).startAnimation(a);

Problem:

Kiedy obraz jest skalowany, nie jest skalowany od środka, ale od lewego górnego rogu. Innymi słowy, przeskalowana wersja obrazu nie ma tego samego punktu co środek, ale ma ten sam lewy górny punkt. Oto link, który wyjaśnia, co mam na myśli. Pierwszy obraz to sposób skalowania animacji, a drugi obraz to sposób skalowania. Powinien utrzymać ten sam punkt środkowy. Próbowałem ustawić grawitację na obrazie, na pojemniku, ustawiając w lewo lub w prawo, zawsze skaluje się tak samo. Używam RelativeLayout na ekranie głównym, a ImageView znajduje się w innym RelativeLayout, ale próbowałem innych układów, bez zmian.

android android-layout android-animation scale Tomislav Markovski
źródło

Odpowiedzi:

76

Zapomnij o dodatkowe tłumaczenie, zestaw android:pivotX, android:pivotYdo połowy szerokości i wysokości i będzie skalować od środka obrazu.

Steven Veltema
źródło
2
pivotXi pivotYpowinien być ustawiony na połowę viewportWidthi viewportHeightbyć dokładnym.
toobsco42
162

50% jest środkiem animowanego widoku.

50%p jest centrum rodzica

<scale
    android:fromXScale="1.0"
    android:toXScale="1.2"
    android:fromYScale="1.0"
    android:toYScale="1.2"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="175"/>
Jiang Qi
źródło
30
dla mnie 50% wykonało pracę (bez p)
agamov
5
powinno być bez p, jeśli jest to odnoszące się do szerokości lub wysokości komponentu, do którego stosujesz animację. p odnosi się do elementu nadrzędnego komponentu, do którego jest stosowana animacja.
Alan Deep
Jak używać 50%pw plikach Java zamiast XML?
Nikola K.
6
nowy ScaleAnimation (1.0f, 1.2f, 1.0f, 1.2f, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
Jiang Qi,
Jest też "a" - Animation.ABSOLUTE do ustawienia w px.
Zon
120

Odpowiedź udzielona przez @stevanveltema i @JiangQi jest idealna, ale jeśli chcesz skalować za pomocą kodu, możesz użyć mojej odpowiedzi.

// first 0f, 1f mean scaling from X-axis to X-axis, meaning scaling from 0-100%
// first 0f, 1f mean scaling from Y-axis to Y-axis, meaning scaling from 0-100%
// The two 0.5f mean animation will start from 50% of X-axis & 50% of Y-axis, i.e. from center

ScaleAnimation fade_in =  new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
fade_in.setDuration(1000);     // animation duration in milliseconds
fade_in.setFillAfter(true);    // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
view.startAnimation(fade_in);
Rohan Kandwal
źródło
1
@ T.Todua Jakie błędy? Zadaj nowe pytanie i podaj link do tej odpowiedzi.
Rohan Kandwal,
7

Możesz użyć animacji translacji w swoim zestawie, aby to zrównoważyć. Prawdopodobnie będziesz musiał dostosować wartości toXDelta i toYDelta, aby uzyskać poprawne ustawienie, tak aby obraz był wyśrodkowany.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromXScale="1"
        android:fromYScale="1"
        android:toXScale="1.2"
        android:toYScale="1.2"
        android:duration="175"/>
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="-20%"
        android:toYDelta="-20%"
        android:duration="175"/>
</set>
Aldryd
źródło