Android에서 흔들림 / 흔들림보기 애니메이션


82

안드로이드에서 IOS 아이콘이 흔들리는 것처럼 imageview를 흔들기 위해 아래와 같은 anim.xml 파일을 만들었습니다. 그러나 그것은 나에게 동일한 결과를 제공하지 않습니다. 더 좋은 아이디어가 있습니까?

<?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". 아래 애니메이션은 내 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" />

저는 안드로이드 개발이 처음입니다. 저는 Xamarin을 사용하고 있습니다.이 애니메이션을 클릭과 같은 이벤트의 이미지 / 버튼에 어떻게 적용 할 수 있는지 알려주세요.
NK

@NK : Java에서와 동일하게 작동해야합니다. 리소스 ID로 애니메이션을로드하고 매개 변수로 전달하여 애니메이션을 시작하도록 뷰에 지시합니다. 다음과 같이 표시되어야 view.StartAnimation(AnimationUtils.LoadAnimation(Resource.Animation.wobble))합니다.. 여기여기에 자세한 내용이 있습니다 .
MH.

3
흔들기 사이의 지연을 어떻게 추가 할 수 있습니까? 예를 들어 500ms 동안 흔들린 다음 1000ms 동안 지연 한 다음 다시 반복 하시겠습니까?
Damir Mailybayev

74

멋진 흔들림 애니메이션 ;

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"내 의견으로는 방법이 덜 고르지 외모와 외모 muich 더 나은
알리 Bdeir

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 애니메이션을 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
저에게는 이것이 가장 좋은 대답입니다. 중앙에서 움직이고 다른 제안처럼 이미지를 즉시 상쇄하지 않기 때문입니다. 찬성!
Jonathan Dunn

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

완벽하고 매우 빠르게 작동합니다.
George Vrynios 19

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 이라는 애니메이션 리소스 파일을 만듭니다 . Android Studio의 res 폴더를 마우스 오른쪽 버튼으로 클릭 한 다음 New> Android Resource File을 클릭 하고 파일 이름으로 shake 를 입력 하고 Resource type 드롭 다운으로 Animation 을 선택합니다. 확인을 클릭하십시오.

내부 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.


startAnimationanim(내 R.anim.shake) 모두 미해결 참조입니다. 도와 주시겠습니까? 감사
MAFF

res 디렉토리 @Maff에 anim 폴더를 생성해야합니다
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 (); 결코 호출되지 않을 것입니다.

해결책 : 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.