中心点を基準にした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);

問題:

画像が拡大縮小される場合、画像は中央からではなく、左上隅から拡大縮小されます。つまり、画像の拡大縮小されたバージョンは、中心と同じポイントを持ちませんが、左上のポイントは同じです。これが私が何を意味するかを説明するリンクです。最初の画像はアニメーションのスケーリング方法であり、2番目の画像はアニメーションのスケーリング方法です。中心点を同じに保つ必要があります。画像、コンテナ、左または右に重力を設定してみましたが、常に同じスケールになります。メイン画面にRelativeLayoutを使用していて、ImageViewは別のRelativeLayoutにありますが、他のレイアウトを試しましたが、変更はありません。

回答:


76

設定の追加、翻訳、忘れてandroid:pivotXandroid:pivotY半分の幅と高さにし、それが画像の中心からスケールします。


2
pivotXそして、pivotY半分に設定する必要がありますviewportWidthし、viewportHeight正確には。
toobsco42 2018

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%が仕事をしました(pなし)
agamov 2014年

5
アニメーションを適用するコンポーネントの幅または高さを基準にしている場合は、pを指定しないでください。pは、アニメーションを適用するコンポーネントの親を指します。
アランディープ

50%pXMLの代わりにJavaファイルで使用するにはどうすればよいですか?
ニコラK.

6
新しいScaleAnimation(1.0f、1.2f、1.0f、1.2f、Animation.RELATIVE_TO_PARENT、0.5f、Animation.RELATIVE_TO_PARENT、0.5f);
Jiang Qi

「a」(pxで設定するAnimation.ABSOLUTE)もあります。
ゾン2018

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どのようなエラー?新しい質問をして、この回答にリンクしてください。
Rohan Kandwal 2017年

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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.