如何实现 Android 带有文本模糊和阴影的按钮动画

Question

我想在Android中实现这个按钮动画。下面的示例来自 iOS。我希望阴影在用户单击按钮时消失，并在用户释放按钮后重新出现。

我们将不胜感激任何帮助。

Answer 1

添加一个布局，背景为按钮下方的阴影。在 button.setOnTouchListener 中，按下按钮时隐藏布局，释放时使其可见。然而，它只有在阴影在下方时才有效。

Answer 2

您需要像下面这样添加颜色。例如，颜色名称是 button_text_color.xml。这是需要放在 color 文件夹中的 .xml 文件。如果 color 文件夹不存在，请在 res 目录中创建一个。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#50FFFFFF" android:state_pressed="true" />
    <item android:color="#FFFFFF" android:state_pressed="false" />
</selector>

检查我是否在按下状态下为白色添加了 50% 的透明度。现在只需将此属性添加到声明它的 Button 中。

现在您需要一个可绘制的背景，将其放入您的 drawable 文件夹中。例如，让我们将 drawable 的名称设为 button_state_list_animator.xml。这应该有以下内容。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="@android:color/darker_gray" />
                    <corners android:radius="19dp" />
                </shape>
            </item>
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp" />
                    <gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
                    <corners android:radius="19dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_pressed="true">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#102746" />
                    <corners android:radius="19dp" />

                </shape>
            </item>
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp" />
                    <gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
                    <corners android:radius="19dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

现在你的按钮构造很简单了。

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_margin="32dp"
    android:background="@drawable/button_state_list_animator"
    android:text="Save Changes"
    android:textColor="@color/button_text_color" />

这是我的代码的屏幕截图。

您也可以使用 library 制作下推动画，如此处的答案中所述。

希望对您有所帮助！

Answer 3

自定义按钮点击按钮时使用动画效果（如下代码）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXScale="1"
        android:toXScale="0.8"
        android:fromYScale="1"
        android:toYScale="0.8"
        android:duration="500"
        android:pivotX="50%"
        android:pivotY="50%" >
    </scale>
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0.8"
        android:duration="500">
    </alpha>
</set>

设置按钮点击动画。

 btn_custom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R
                        .anim.animation_btn);
                btn_custom.startAnimation(animation);
            }
        });

尝试根据需要更改 alpha 值并查看效果。

Answer 4

您可以使用这个库：pushdown-anim-click

如何安装：

compile( 'com.github.thekhaeng:pushdown-anim-click:1.1.1' ){
    exclude group: 'com.android.support'
}

使用方法：

Button button = findViewById( R.id.button );

PushDownAnim.setPushDownAnimTo( button, ... )
    .setOnClickListener( new View.OnClickListener(){
        @Override
        public void onClick( View view ){
            Toast.makeText( MainActivity.this, "PUSH DOWN !!", Toast.LENGTH_SHORT ).show();
        }

});

对于阴影：

我看到库文件，只有三个java文件。他只是使用 class 来制作按钮动画。你可以通过this way. Even though I have created issue在你的按钮中添加阴影你可以关注这个。

更多功能，您可以访问github link。

谢谢。

如何实现 Android 带有文本模糊和阴影的按钮动画

How to achieve Android Button Animation with text-blurred and shadow

java

animation

android

android-styles

如何安装：

使用方法：

对于阴影：