Question

我想制作一个动画，当您单击浮动操作栏时 + 变为 x，再次单击时 x 变为 +。但这是代码的结果。enter image description here

-> x -> + 我想编写代码，以便每次单击时都可以更改。任何帮助将不胜感激。

fab_rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <rotate
        android:duration="500"
        android:pivotY="50%"
        android:pivotX="50%"
        android:toDegrees="45"
        android:fromDegrees="0"/>

</set>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">






<com.google.android.material.floatingactionbutton.FloatingActionButton

    android:id="@+id/fab_sub1"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_above="@+id/fab_sub2"

    android:layout_alignParentRight="true"

    android:layout_marginBottom="15dp"

    android:layout_marginRight="20dp"

    android:backgroundTint="#ffffff"

    android:visibility="invisible"

    app:borderWidth="0dp"

    app:fabSize="normal" />



<com.google.android.material.floatingactionbutton.FloatingActionButton

    android:id="@+id/fab_sub2"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_above="@+id/fab_main"

    android:layout_alignParentRight="true"

    android:layout_marginBottom="15dp"

    android:layout_marginRight="20dp"

    android:backgroundTint="#ffffff"

    android:visibility="invisible"

    app:borderWidth="0dp"

    app:fabSize="normal" />



<com.google.android.material.floatingactionbutton.FloatingActionButton

    android:id="@+id/fab_main"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_alignParentBottom="true"

    android:layout_alignParentRight="true"

    android:layout_marginBottom="20dp"

    android:layout_marginRight="20dp"

    android:backgroundTint="#009688"

    android:src="@drawable/ic_add"

    app:borderWidth="0dp"

    app:fabSize="normal"

    />



</RelativeLayout>

MainActivity.java

import android.content.Context;

import android.os.Bundle;



import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.floatingactionbutton.FloatingActionButton;


public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private Context mContext;



private FloatingActionButton fab_main, fab_sub1, fab_sub2;

private Animation fab_open, fab_close, fab_rotate;

private boolean isFabOpen = false;



@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    mContext = getApplicationContext();



    fab_open = AnimationUtils.loadAnimation(mContext, R.anim.fab_open);

    fab_close = AnimationUtils.loadAnimation(mContext, R.anim.fab_close);

    fab_rotate = AnimationUtils.loadAnimation(mContext, R.anim.fab_rotate);



    fab_main = (FloatingActionButton) findViewById(R.id.fab_main);

    fab_sub1 = (FloatingActionButton) findViewById(R.id.fab_sub1);

    fab_sub2 = (FloatingActionButton) findViewById(R.id.fab_sub2);



    fab_main.setOnClickListener(this);

    fab_sub1.setOnClickListener(this);

    fab_sub2.setOnClickListener(this);

}



@Override

public void onClick(View v) {

    switch (v.getId()) {

        case R.id.fab_main:

            toggleFab();
            fab_main.startAnimation(fab_rotate);

            break;

        case R.id.fab_sub1:

            toggleFab();

            Toast.makeText(this, "Camera Open-!", Toast.LENGTH_SHORT).show();

            break;



        case R.id.fab_sub2:

            toggleFab();

            Toast.makeText(this, "Map Open-!", Toast.LENGTH_SHORT).show();

            break;

    }

}



private void toggleFab() {

    if (isFabOpen) {

        fab_sub1.startAnimation(fab_close);

        fab_sub2.startAnimation(fab_close);

        fab_sub1.setClickable(false);

        fab_sub2.setClickable(false);

        isFabOpen = false;

    } else {

        fab_sub1.startAnimation(fab_open);

        fab_sub2.startAnimation(fab_open);

        fab_sub1.setClickable(true);

        fab_sub2.setClickable(true);

        isFabOpen = true;

    }

}

}

Answer 1

我看到您正在努力实现这样的目标：https://github.com/kelmer44/fabmenus/blob/master/art/demo.gif

如果是，那么在您当前的代码中，您可以添加一个 fab_normal 动画，将您的 fab 图标置于其原始位置。

现在使用 fab_rotate 您每次只需将其旋转 45 度。你不会把它带回 0。

这就是为什么你需要一个 fab_normal.xml 如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <rotate
        android:duration="500"
        android:pivotY="50%"
        android:pivotX="50%"
        android:toDegrees="0"
        android:fromDegrees="45"/>

</set>

注意 fromDegrees 和 toDegrees 值是如何相互交换的。

然后在您的 MainActivity 中使用它：

import android.content.Context;

import android.os.Bundle;



import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.floatingactionbutton.FloatingActionButton;


public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Context mContext;



    private FloatingActionButton fab_main, fab_sub1, fab_sub2;

    private Animation fab_open, fab_close, fab_rotate,fab_normal;

    private boolean isFabOpen = false;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mContext = getApplicationContext();



        fab_open = AnimationUtils.loadAnimation(mContext, R.anim.fab_open);

        fab_close = AnimationUtils.loadAnimation(mContext, R.anim.fab_close);

        fab_rotate = AnimationUtils.loadAnimation(mContext, R.anim.fab_rotate);

        fab_normal = AnimationUtils.loadAnimation(mContext, R.anim.fab_normal);



        fab_main = (FloatingActionButton) findViewById(R.id.fab_main);

        fab_sub1 = (FloatingActionButton) findViewById(R.id.fab_sub1);

        fab_sub2 = (FloatingActionButton) findViewById(R.id.fab_sub2);



        fab_main.setOnClickListener(this);

        fab_sub1.setOnClickListener(this);

        fab_sub2.setOnClickListener(this);

    }



    @Override

    public void onClick(View v) {

        switch (v.getId()) {

            case R.id.fab_main:

                fab_main.startAnimation(isFabOpen ? fab_normal : fab_rotate);
                toggleFab();

                break;

            case R.id.fab_sub1:

                toggleFab();

                Toast.makeText(this, "Camera Open-!", Toast.LENGTH_SHORT).show();

                break;



            case R.id.fab_sub2:

                toggleFab();

                Toast.makeText(this, "Map Open-!", Toast.LENGTH_SHORT).show();

                break;

        }

    }



    private void toggleFab() {

        if (isFabOpen) {

            fab_sub1.startAnimation(fab_close);

            fab_sub2.startAnimation(fab_close);

            fab_sub1.setClickable(false);

            fab_sub2.setClickable(false);

            isFabOpen = false;

        } else {

            fab_sub1.startAnimation(fab_open);

            fab_sub2.startAnimation(fab_open);

            fab_sub1.setClickable(true);

            fab_sub2.setClickable(true);

            isFabOpen = true;

        }

    }

}

如果您需要更多高级用法，请查看此项目：https://github.com/kelmer44/fabmenus

我想连续旋转动画

1 个答案: