тремтіння / хитання перегляду анімації в 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" />

я новачок у розробці android, я використовую Xamarin, скажіть, будь ласка, як застосувати цю анімацію до зображення / кнопки на будь-якій події, як клацання тощо
— NK

@NK: Він повинен працювати так само, як і в Java: завантажте анімацію за її ідентифікатором ресурсу та скажіть своєму виду, щоб запустити анімацію, передавши її як параметр. Має виглядати приблизно так: view.StartAnimation(AnimationUtils.LoadAnimation(Resource.Animation.wobble)). Детальніше тут і тут .
— МЗ.

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 .../>
— Ануп

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

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


здається, це нічого не робить
— користувач25

Будь ласка, майте на увазі, що це буде працювати, лише якщо itemViewвоно ще не було додано до ViewGroup. Якщо його вже додали, використовуйте itemView.startAnimation(s)замість нього.
— Олексій Семенюк

2

Для користувачів Kotlin:

Спочатку створіть файл ресурсу анімації під назвою shake.xml . Клацніть правою кнопкою миші папку res в Android Studio, а потім клацніть New> Android Resource File> введіть shake для імені файлу та виберіть спадний список Animation for Resource type. Клацніть 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це ідентифікатор, який надається поданню, яке ви хочете анімувати)

Якщо ви хочете налаштувати анімацію, просто змініть значення в shake.xml.


startAnimationі anim(всередині R.anim.shake) - це невирішені посилання, будь ласка, чи можете ви допомогти? подяка
— Мафф

вам потрібно створити папку anim у каталозі res @Maff
— Aditya Patil

0

Анімація коливань IOS - це не така проста спроба випадково змінити повороти x та y при обертанні. Вам слід програмно змінювати значення. Можливо, ви також можете одночасно використовувати анімацію перекладу


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.


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);
    }
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.