アンドロイドの揺れ/ぐらつきビューアニメーション


82

以下のようなanim.xmlファイルを作成して、AndroidでIOSアイコンが揺れるようにimageviewを揺らします。しかし、それは私に同じ結果を提供しません。もっと良いアイデアはありますか?

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"

    android:fromDegrees="-2"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:toDegrees="2" />

回答:


171

設定してみてくださいandroid:repeatMode="reverse"。以下のアニメーションは、私のギャラクシーネクサスで非常に合理的な模倣を与えます。もちろん、パラメータを自分の好みに合わせて微調整することができます。

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="100"
    android:fromDegrees="-5"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:toDegrees="5" />

私はあなたが私はなど、クリックのような任意のイベントに画像/ボタンにこのアニメーションを適用する方法を教えてくださいすることができ、私はXamarinを使用しています、アンドロイドの開発に新しいです
NK

@NK:Javaの場合と同じように機能するはずです。リソースIDでアニメーションをロードし、パラメーターとして渡すことでアニメーションを開始するようにビューに指示します。次のようになりますview.StartAnimation(AnimationUtils.LoadAnimation(Resource.Animation.wobble))。詳細はこちらこちら
MH。

3
振とう間の遅延をどのように追加できますか。たとえば、500ミリ秒のシェイクを表示してから1000ミリ秒の遅延を表示してから、もう一度繰り返しますか?
Damir Mailybayev 2017年

73

素敵なシェイクアニメーション;

res / anim / shake.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate android:duration="150"
        android:fromXDelta="-10%"
        android:repeatCount="5"
        android:repeatMode="reverse"
        android:toXDelta="10%"/>
</set>

それを使用する方法

final Animation animShake = AnimationUtils.loadAnimation(this, R.anim.shake);
btn_done = (Button) findViewById(R.id.btn_act_confirm_done); 
btn_done.startAnimation(animShake);

使い方(簡易版):

btn_done.startAnimation(AnimationUtils.loadAnimation(this,R.anim.shake));

2
android:duration="50"私の意見では道少なく途切れルックスとルックスmuichより良い
アブ

45

あなたはこれを試すことができます:

shake.xml

<translate xmlns:android="http://schemas.android.com/apk/res/android" 
           android:fromXDelta="0" 
           android:toXDelta="10" 
           android:duration="1000" 
           android:interpolator="@anim/cycle_7" />

cycle_7.xml

<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android" 
                   android:cycles="7" />

9
ねえ、私は推測cycle_7.xmlするandroid:repeatCount="7"属性に置き換えることができます<translate .../>
Anup 2015

28

これを使用してみてください:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="70"
        android:fromDegrees="-5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="5"
        android:repeatMode="reverse"
        android:interpolator="@android:anim/linear_interpolator"
        android:toDegrees="5" />
    <translate
        android:fromXDelta="-10"
        android:toXDelta="10"
        android:repeatCount="5"
        android:repeatMode="reverse"
        android:interpolator="@android:anim/linear_interpolator"
        android:duration="70" />
</set>

19

このようなシェイク効果を出すには

ここに画像の説明を入力してください

まず、animフォルダー内のシェイクアニメーションをshake.xmlとして定義します

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="70"
        android:fromDegrees="-5"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="5"
        android:repeatMode="reverse"
        android:toDegrees="5" />
    <translate
        android:duration="70"
        android:fromXDelta="-10"
        android:interpolator="@android:anim/linear_interpolator"
        android:repeatCount="5"
        android:repeatMode="reverse"
        android:toXDelta="10" />
</set>

次にコードで

if (TextUtils.isEmpty(phone.getText())
 || phone.getText().length() < 10)
    {
     //shake animation
    phone.startAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.shake));
     }

14

Androidでシェイクエフェクトを作成し、GitHubに投稿しました。それがうまく機能するかどうかを確認してください。

https://github.com/teoinke/ShakeAnimation

関連コード:

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/overshoot_interpolator"
    android:fillAfter="true">

    <translate
        android:startOffset="100"
        android:fromXDelta="0%p"
        android:toXDelta="10%p"
        android:duration="50" />

    <translate
        android:startOffset="150"
        android:fromXDelta="0%p"
        android:toXDelta="-25%p"
        android:duration="110" />


    <translate
        android:startOffset="260"
        android:fromXDelta="0%p"
        android:toXDelta="25%p"
        android:duration="120" />


    <translate
        android:startOffset="380"
        android:fromXDelta="0%p"
        android:toXDelta="-20%p"
        android:duration="130" />


    <translate
        android:startOffset="510"
        android:fromXDelta="0%p"
        android:toXDelta="10%p"
        android:duration="140" />

</set>

1
私にとって、これは最良の答えです。中心からアニメーション化し、他のいくつかの提案のように画像を即座にオフセットしないためです。プロ!
ジョナサンダン

13

これは、iOSの「不正なPIN」シェイククローンとして(完全ではありませんが)かなりうまく機能します。

    final float FREQ = 3f;
    final float DECAY = 2f;
    // interpolator that goes 1 -> -1 -> 1 -> -1 in a sine wave pattern.
    TimeInterpolator decayingSineWave = new TimeInterpolator() {
                @Override
                public float getInterpolation(float input) {
                    double raw = Math.sin(FREQ * input * 2 * Math.PI);
                    return (float)(raw * Math.exp(-input * DECAY));
                }
            };

    shakeField.animate()
            .xBy(-100)
            .setInterpolator(decayingSineWave)
            .setDuration(500)
            .start();

5
/**
 *
 * @param view      view that will be animated
 * @param duration  for how long in ms will it shake
 * @param offset    start offset of the animation
 * @return          returns the same view with animation properties
 */
public static View makeMeShake(View view, int duration, int offset) {
    Animation anim = new TranslateAnimation(-offset,offset,0,0);
    anim.setDuration(duration);
    anim.setRepeatMode(Animation.REVERSE);
    anim.setRepeatCount(5);
    view.startAnimation(anim);
    return view;
}

使用する:

TextView tv;
makeMeShake(tv,20,5);    // it will shake quite fast

完璧にそして非常に速く動作します。
GeorgeVrynios19年

3

私はiOSの揺れの非常に良い近似を作成しました(ホーム画面からアプリを削除するためにアイコンを長押ししたとき)。乱数の生成が必要なため、プログラムでコード内に適用する必要があります。

int dur1 = 70 + (int)(Math.random() * 30);
int dur2 = 70 + (int)(Math.random() * 30);

// Create an animation instance
Animation an = new RotateAnimation(-3, 3, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

// Set the animation's parameters
an.setDuration(dur1);               // duration in ms
an.setRepeatCount(-1);                // -1 = infinite repeated
an.setRepeatMode(Animation.REVERSE);
an.setFillAfter(true);               // keep rotation after animation


// Create an animation instance
Animation an2 = new TranslateAnimation(-TranslateAnimation.RELATIVE_TO_SELF,0.02f,
        TranslateAnimation.RELATIVE_TO_SELF,0.02f,
        -TranslateAnimation.RELATIVE_TO_SELF,0.02f,
        TranslateAnimation.RELATIVE_TO_SELF,0.02f);

// Set the animation's parameters
an2.setDuration(dur2);               // duration in ms
an2.setRepeatCount(-1);                // -1 = infinite repeated
an2.setRepeatMode(Animation.REVERSE);
an2.setFillAfter(true);               // keep rotation after animation

AnimationSet s = new AnimationSet(false);//false means don't share interpolators
s.addAnimation(an);
s.addAnimation(an2);

// Apply animation to image view
itemView.setAnimation(s);

このコードは、アダプターのグリッドビュー(getView)内に適用されるように設計されていますが、最後の行を次のように変更することで、任意のビューに適用できます。

yourViewName.setAnimations(s);


何もしないようです
user 2519年

これはitemView、ViewGroupにまだ追加されていない場合にのみ機能することに注意してください。すでに追加されている場合は、itemView.startAnimation(s)代わりに使用してください。
Alex Semeniuk

2

Kotlinユーザーの場合:

まず、shake.xmlというアニメーションリソースファイルを作成します。Android Studioのresフォルダーを右クリックし、[新規]> [Androidリソースファイル]をクリックして、ファイル名にshakeと入力し、[アニメーション]を選択します。リソースタイプ]ドロップダウンに]。[OK]をクリックします。

shake.xmlに次を貼り付けます。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:duration="200"
               android:fromXDelta="-5%"
               android:repeatCount="3"
               android:repeatMode="reverse"
               android:toXDelta="5%"/>
</set>

今、それをビューで呼び出すだけです!

フラグメント内から:

myView.startAnimation(AnimationUtils.loadAnimation(view!!.context, R.anim.shake))

アクティビティ内から:

myView.startAnimation(AnimationUtils.loadAnimation(this, R.anim.shake))

(注-myViewアニメーション化するビューに与えられたIDです)

アニメーションを微調整する場合は、の値を変更するだけshake.xmlです。


startAnimationおよびanim(内R.anim.shake)は両方とも未解決の参照です。お手伝いできますか?おかげで
マフ

resディレクトリ@Maffにanimフォルダを作成する必要があります
Aditya Patil

0

IOSのぐらつきアニメーションは、回転時にピボットxとyをランダムに変更しようとするほど単純ではありません。ただし、プログラムで値を変更する必要があります。アニメーションの翻訳を同時に使用することもできます


0

2時間以上頭を叩いて、私は景色を揺らしてぐらつく方法を知っていました。

残念ながら、受け入れられた回答は、フラグメントのonCreateView以外では機能しません。

onClickメソッドとその内部がある場合の例。以下のようなアニメーションがありますが、機能しません。

コードを確認してください。

    DoneStart.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View view) {
           register(view);

        }
    });

registerメソッドには、以下のコードのようないくつかのチェックがあります

 private void register(View view) {
    String type = typedThings.getText.toString(); 
   String  km = Km_Now.getText().toString();

    if (serviceType == null) {
        animationServiceList = AnimationUtils.loadAnimation(getActivity(), R.anim.shake_wobble);
        silverServiceButton.setAnimation(animationServiceList);
        generalServiceButton.setAnimation(animationServiceList);
        platinumServiceButton.setAnimation(animationServiceList);
        animationServiceList.start();
    } else if (km == null) {
        animationEditText = AnimationUtils.loadAnimation(getActivity(), R.anim.shake_wobble);
        Km_Now.setAnimation(animationEditText);
        animationEditText.start();
    }

呼び出しanimationServiceList.start(); 呼び出されることはありません、

解決策:ObjectAnimatorのようなPropertyAnimatorを使用します。


0

他の答えも正しいですが、補間器を使用して前後の動きに滑らかな数値を生成するため、これはそれらよりも少しスムーズです

    public class WobblyView extends ImageView implements ValueAnimator.AnimatorUpdateListener {
    private final ValueAnimator va = ValueAnimator.ofInt(-10, 10);

    public WobblyView(Context context) {
        this(context, null);
    }

    public WobblyView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WobblyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setAdjustViewBounds(true);
        setImageResource(R.drawable.ic_logo);
        va.setInterpolator(new AccelerateDecelerateInterpolator());
        va.setRepeatMode(ValueAnimator.REVERSE);
        va.setRepeatCount(ValueAnimator.INFINITE);
        va.setDuration(1000);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        va.addUpdateListener(this);
        va.start();
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        va.removeUpdateListener(this);
    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        int heading = (int) animation.getAnimatedValue();
        setRotation(heading);
    }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.