анимация встряхивания / качания в android

84

Я создал файл anim.xml, как показано ниже, чтобы встряхнуть изображение, как значок iOS в Android. Однако это не дает мне такого же результата. Есть идея получше?

<?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" />
Уинстон
источник

Ответы:

172

Попробуй настроить android:repeatMode="reverse". Анимация ниже дает очень разумную имитацию на моем Galaxy Nexus. Очевидно, вы можете настроить параметры по своему вкусу.

<?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" />
MH.
источник
Я новичок в разработке Android, я использую Xamarin, не могли бы вы рассказать мне, как я могу применить эту анимацию к изображению / кнопке при любом событии, таком как щелчок и т. д.
NK
@NK: он должен работать так же, как в Java: загрузить анимацию по идентификатору ресурса и сообщить вашему представлению о запуске анимации, передав ее в качестве параметра. Должно выглядеть примерно так: view.StartAnimation(AnimationUtils.LoadAnimation(Resource.Animation.wobble)). Подробнее здесь и здесь .
MH.
3
Как добавить задержку между встряхиванием. например, покажите встряхивание на 500 мс, затем задержку на 1000 мс, затем повторите снова?
Дамир Майлыбаев
76

Приятная анимация встряхивания ;

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));
Сэм
источник
3
android:duration="50"на мой взгляд, выглядит намного менее изменчивым и выглядит намного лучше
Али Бдейр
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" />
надпочечник
источник
10
эй, я думаю, cycle_7.xmlможно заменить android:repeatCount="7"атрибут в<translate .../>
Anup
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();
Lincolnq
источник
6
/**
 *
 * @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
Безветренный
источник
Работает отлично и очень быстро.
Георгий Вриниос
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);

Этот код был разработан для применения внутри gridview адаптера (getView), но вы можете применить его к любому представлению, изменив последнюю строку на:

yourViewName.setAnimations (s);

Адриано Моутиньо
источник
кажется, это ничего не делает
user25
Имейте в виду, что это будет работать только в том случае, если оно itemViewеще не было добавлено в ViewGroup. Если он уже был добавлен, используйте itemView.startAnimation(s)вместо него.
Alex Semeniuk
2

Для пользователей Kotlin:

Сначала создайте файл ресурсов анимации с именем shake.xml . Щелкните правой кнопкой мыши папку res в Android Studio, затем нажмите «Создать»> «Файл ресурсов Android»> введите « встряхивание» в качестве имени файла и выберите « Анимация». для типа ресурса» в раскрывающемся списке. Щелкните ОК.

Внутри 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это идентификатор, присвоенный представлению, которое вы хотите анимировать)

Если вы хотите настроить анимацию, просто измените значения в shake.xml.

Джо
источник
startAnimationи anim(внутри R.anim.shake) - это неразрешенные ссылки, не могли бы вы помочь? спасибо
Maff
вам нужно создать папку с анимацией в каталоге res @Maff
Адитья Патил
0

Анимация колебания iOS не так проста, попробуйте изменить ось x и y случайным образом при вращении. Однако вам следует изменить значение программно. Возможно, вы также можете использовать перевод анимации одновременно

Wooram Jung
источник
0

Ударяясь головой больше двух часов, я знал, как трясти и раскачивать вид.

К сожалению, принятый ответ не будет работать, кроме onCreateView фрагмента.

Пример, если у вас есть метод onClick и внутри него. У вас есть анимация, как показано ниже, она не будет работать.

Пожалуйста, введите код.

    DoneStart.setOnClickListener(new OnClickListener() {

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

        }
    });

Метод регистрации имеет некоторые проверки, как показано ниже.

 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 (); никогда не назовут,

РЕШЕНИЕ: Используйте PropertyAnimator как ObjectAnimator.

EngineSense
источник
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);
    }
}
Делиганли
источник