如何创建可绘制的右侧动画按钮 [英] How to create a drawable right animation button

问题描述

我如何创建一个正确的旋转按钮动画，我尝试了下面的代码，但它一直崩溃.

How do I create a right spinning button animation, I tried below code but it kept crashing.

button_spin_animation.xml

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

使用

 @Override
    public void onStart() {
        super.onStart();

        account_login.setCompoundDrawablesWithIntrinsicBounds(null, null, ContextCompat.getDrawable(getApplicationContext(), R.drawable.button_spin_animation), null);
        Drawable[] sb = account_login.getCompoundDrawables();
        AnimationDrawable animDrawable = (AnimationDrawable) sb[0];
        animDrawable.start();
    }

错误

java.lang.RuntimeException: Unable to start activity ComponentInfo{com.app.android.buyer/com.app.android.buyer.Login}: android.content.res.Resources$NotFoundException: Drawable 
     Caused by: android.content.res.Resources$NotFoundException: Drawable com.app.android.buyer:drawable/button_spin_animation with resource ID #0x7f080146
     Caused by: android.content.res.Resources$NotFoundException: File res/drawable/button_spin_animation.xml from drawable resource ID #0x7f080146
        at 
     Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #8: <rotate> tag requires a 'drawable' attribute or child tag defining a drawable
        at android.graphics.drawable.RotateDrawable.verifyRequiredAttributes(RotateDrawable.java:106)
        at android.graphics.drawable.RotateDrawable.inflate(RotateDrawable.java:76)
        at android.graphics.drawable.DrawableInflater.inflateFromXmlForDensity(DrawableInflater.java:145)
        at android.graphics.drawable.Drawable.createFromXmlInnerForDensity(Drawable.java:1295)
        at android.graphics.drawable.Drawable.createFromXmlForDensity(Drawable.java:1254)
        at 

推荐答案

我为您编写了一个解决方案.MainActivity.java 类包含 2 个运行动画和停止动画的函数.看看这里:

I coded a solution for you. The MainActivity.java class contains 2 functions that will run the animation and also stop it. Take a look here:

public class MainActivity extends AppCompatActivity {

    public static ImageView ImageIcon;
    public static boolean aBoolean = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageIcon = findViewById(R.id.imageView);
        Button button = findViewById(R.id.btn);
        button.setOnClickListener(v -> {
            if(!aBoolean) {
                runBtnAnimation();
                aBoolean = true;
            }
            else {
                stopBtnAnimation();
                aBoolean = false;
            }
        });
        
    }

    private void runBtnAnimation() {
        ImageIcon.setImageResource(R.drawable.ic_baseline_flutter_dash_24);
        Animation rotation = AnimationUtils
                .loadAnimation(getApplicationContext(),
                        R.anim.rotation_animation);
        ImageIcon.startAnimation(rotation);
    }

    private void stopBtnAnimation() {
        ImageIcon.clearAnimation();
        ImageIcon.setImageResource(R.drawable.ic_baseline_flutter_dash_24);
    }
}

之后，您将创建 activity_main.xml 布局.我想指出的是，您需要将 Button 和 ImageView 以不同的 elevation 级别放在彼此之上，放入一个 frame(这里是FrameLayout):

After that you are going to create the activity_main.xml layout. I want to point out that you need to put the Button and the ImageView above each other with different elevation level, into a frame (here FrameLayout):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">
        <Button
            android:id="@+id/btn"
            android:layout_width="200dp"
            android:layout_height="100dp"
            android:elevation="0dp"/>
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="200dp"
            android:layout_height="80dp"
            android:layout_gravity="center"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_baseline_flutter_dash_24"
            android:elevation="4dp"/>
    </FrameLayout>
</RelativeLayout>

最后一部分是在位于 res/anim 文件夹中的 rotation_animation.xml 中配置动画行为:

The final part is to configure the animation behaviour in your rotation_animation.xml located into your res/anim folder:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        android:toDegrees="359"/>
</set>

结果

在这个例子中，ImageView 将在被点击后旋转 infinite.动画在再次点击后停止，set 是之前的 ImageResource.但是您可以随意使用 function runBtnAnimation() 和 stopBtnAnimation() .干杯！

In this example the ImageView will rotate infinite after being clicked. The animation is stopping after another click and set it's previous ImageResource. But you can use the function runBtnAnimation() and stopBtnAnimation() as you like to. Cheers!

这篇关于如何创建可绘制的右侧动画按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！