Android 中的晃动/摆动视图动画

Question

我创建了一个如下所示的 anim.xml 文件来摇动 imageview，就像 Android 中的 IOS 图标摇动一样。 但是它没有给我提供相同的结果。 还有更好的主意吗？

<?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" />

Answer 1

如果你想晃动你的视野那就慢慢停下来，我们可以在每轮之后减少平移值。
这是一个辅助函数

fun animateHorizontalShake(
    view: View,
    offset: Float,
    repeatCount: Int = 3,
    dampingRatio: Float? = null,
    duration: Long = 1000L,
    interpolator: Interpolator = AccelerateDecelerateInterpolator()
) {
    val defaultDampingRatio = dampingRatio ?: (1f / (repeatCount + 1))
    val animValues = mutableListOf<Float>()
    repeat(repeatCount) { index ->
        animValues.add(0f)
        animValues.add(-offset * (1 - defaultDampingRatio * index))
        animValues.add(0f)
        animValues.add(offset * (1 - defaultDampingRatio * index))
    }
    animValues.add(0f)

    val anim: ValueAnimator = ValueAnimator.ofFloat(*animValues.toFloatArray())
    anim.addUpdateListener {
        view.translationX = it.animatedValue as Float
    }
    anim.interpolator = interpolator
    anim.duration = duration
    anim.start()
}

示例缓慢

animateHorizontalShake(imageView, 200f, repeatCount = 4, duration = 10000L)

快速示例

animateHorizontalShake(imageView, 50f, repeatCount = 4, duration = 1000L)

或者即使您不希望抖动显示下降

animateHorizontalShake(imageView, 50f, dampingRatio = 0f, interpolator = LinearInterpolator())

使用上面的代码，也请记住使用 dp 值用于支持多个设备而不是硬编码的 offset

Answer 2

我创建了一个非常好的 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）；

Answer 3

lincolnq 答案的 Kotlin 版本

val FREQ = 3f
val DECAY = 2f
            
val decayingSineWave = TimeInterpolator { input ->
   val raw = sin(FREQ * input * 2 * Math.PI)
   (raw * exp((-input * DECAY).toDouble())).toFloat()
}

// where binding.loginFrame is the view you wanna shake
binding.loguinFrame.animate()
 .withEndAction{
    // here you can clear the fields after the shake
 }
 .xBy(-100f)
 .setInterpolator(decayingSineWave)
 .setDuration(500)
 .start()

Answer 4

iOS 摆动动画并不是那么简单，尝试在旋转时随机改变轴 x 和 y。不过，您应该以编程方式更改该值。也许你也可以同时使用平移动画

Answer 5

两个多小时以来，我一直在敲着头，我知道如何摇动和摇摆视图。

不幸的是，除了片段的 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。

Answer 6

其他答案也是正确的，但这比它们更平滑一些，因为它使用插值器为前后运动产生平滑的数字

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

Answer 7

尝试设置 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" />

Answer 8

漂亮的摇动动画；

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

Answer 9

你可以试试这个：

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" />

Answer 10

尝试使用这个：

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

Answer 11

要制作这样的抖动效果

首先在 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));
     }

Answer 12

我在 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>

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

Answer 14

/**
 *
 * @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

Answer 15

对于 Kotlin 用户：

首先创建一个名为 shake.xml 的动画资源文件。右键点击Android Studio中的res文件夹，然后点击New > Android资源文件>输入shake作为文件名，并选择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(requireContext(), R.anim.shake))

从活动中：

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

（注意 - myView 是为要设置动画的视图指定的 ID）

如果您想要微调动画，只需修改 shake.xml 中的值即可。