Анимация масштаба изображения Android относительно центральной точки


88

У меня есть ImageView, и я делаю для него простую масштабную анимацию. Очень стандартный код.

Мой 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>

Мой код анимации:

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

Проблема:

Когда изображение масштабируется, оно масштабируется не от центра, а от верхнего левого угла. Другими словами, масштабированная версия изображения не имеет той же точки, что и центр, но имеет ту же верхнюю левую точку. Вот ссылка, объясняющая, что я имею в виду. Первое изображение показывает, как масштабируется анимация, а второе изображение - как я хочу его масштабировать. Центральная точка должна оставаться неизменной. Я пробовал настроить гравитацию на изображении, на контейнере, выравнивая влево или вправо, оно всегда масштабируется одинаково. Я использую RelativeLayout для главного экрана, а ImageView находится в другом RelativeLayout, но я пробовал другие макеты, без изменений.

Ответы:


76

Забудьте о дополнительных переводах, установить android:pivotX, android:pivotYна половину ширины и высоты , и она будет масштабироваться от центра изображения.


2
pivotXи pivotYдолжен быть установлен на половину от viewportWidthи, viewportHeightесли быть точным.
toobsco42

162

50% находится в центре анимированного изображения.

50%p центр родителей

<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"/>

30
для меня 50% сделали свою работу (без р)
агамов

5
он должен быть без p, если он относительно ширины или высоты компонента, к которому ur применяет анимацию. p относится к родительскому элементу компонента, к которому ur применяет анимацию.
Алан Дип

Как использовать 50%pв файлах Java вместо XML?
Nikola K.

6
новый ScaleAnimation (1.0f, 1.2f, 1.0f, 1.2f, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
Цзян Ци

Также есть "a" - Animation.ABSOLUTE, который нужно установить в пикселях.
Zon

120

Ответ, предоставленный @stevanveltema и @JiangQi, идеален, но если вы хотите масштабировать с помощью кода, вы можете использовать мой ответ.

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

1
@ T.Todua Какие ошибки? Пожалуйста, задайте новый вопрос и вернитесь к этому ответу.
Рохан Кандвал

7

Вы можете использовать анимацию перевода в своем наборе, чтобы компенсировать это. Вам, вероятно, потребуется настроить значения toXDelta и toYDelta, чтобы сделать это правильно, чтобы изображение оставалось центрированным.

<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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.