如何在Android中实现一个带有动画/持续发光效果的按钮？

Question

如何在Android中实现一个带有动画/持续发光效果的按钮？

androidandroid-layoutandroid-animationandroid-button

10

我希望两个按钮周围有一个细微的发光效果，类似于脉冲-淡出的效果

按钮周围发光的示例图片

这些按钮有一个背景可绘制图像，我只想在其周围添加一个发光效果，使其与正在播放的音乐产生共鸣

我已经在多个线程中搜索过了，但它们都只是关于imageView、按下时或位图的，不一定是我要找的

这是我的按钮XML：

<Button
android:id="@+id/playEasyMode_Button"
android:layout_width="145dp"
android:layout_height="40dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/play_easy_button"
android:onClick="playEasyMode"
android:layout_margin="15dp"/>

请不要尝试建议在按下和其他情况下使用背景可绘制物，这不是我想要做的。我想以编程方式或在XML中设置这样的效果。

编辑：Object Animator offloat relative layout error image 编辑2：好的，由于Aman Verma的帮助，我已经几乎实现了我想要的效果，这是我的更新XML。

<RelativeLayout
    android:id="@+id/relative_layout_id"
    android:layout_width="160dp"
    android:layout_height="55dp"
    android:layout_alignParentBottom="true"
    android:background="#FFC107"
    android:alpha=".1"
    android:layout_gravity="center_horizontal"
    android:layout_margin="15dp">

    <Button
        android:id="@+id/playEasyMode_Button"
        android:layout_width="145dp"
        android:layout_height="40dp"
        android:layout_marginLeft="8dp"
        android:background="@drawable/play_easy_button"
        android:onClick="playEasyMode"
        android:layout_marginTop="8dp"/>

</RelativeLayout>

这是Java代码：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.home_screen_layout);

    //glowing button effect
    RelativeLayout relativelayout = (RelativeLayout)findViewById(R.id.relative_layout_id);

    ObjectAnimator fadeOut = ObjectAnimator.ofFloat(relativelayout, "alpha", .5f, .1f);
    fadeOut.setDuration(300);
    ObjectAnimator fadeIn = ObjectAnimator.ofFloat(relativelayout, "alpha", .1f, .5f);
    fadeIn.setDuration(300);

    final AnimatorSet mAnimationSet = new AnimatorSet();

    mAnimationSet.play(fadeIn).after(fadeOut);

    mAnimationSet.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            mAnimationSet.start();
        }
    });

    mAnimationSet.start();
}

目前正在相对布局中同时为按钮和黄色背景进行动画处理，我需要将按钮设置为原样而不受相对布局动画的影响。

它目前正在相对布局中同时为按钮和黄色背景进行动画处理。我需要将按钮设置为原样，而不会受到相对布局动画的影响。

- Cataster

2个回答

1

步骤1：创建一个发光的可绘制对象放在按钮后面，并将它们都放在Framelayout中。您需要在按钮周围添加一些填充来使可绘制对象显示出来。

步骤2：创建一个动画资源文件，像这样调整数字以适应您的喜好。

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

    <scale
        android:fromXScale="1"
        android:toXScale="0"
        android:fromYScale="1"
        android:toYScale="0"
        android:duration="400"
        android:pivotX="50%"
        android:pivotY="50%"
        />

    <scale
        android:startOffset="700"
        android:fromXScale="0"
        android:toXScale="1"
        android:fromYScale="0"
        android:toYScale="1"
        android:duration="400"
        android:pivotX="50%"
        android:pivotY="50%"
        />
</set>

- Lincoln White

嗯...您能更强调一下在步骤1中如何“将其放在按钮后面并将它们都放入Framelayout中”吗？还有什么样的发光可绘制物？就像我提供的图片链接一样吗？ - Cataster

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aman Verma · Accepted Answer

你可以将相对布局作为背景，像这样-

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#FFC107"
        android:alpha="0.1"
        android:layout_marginBottom="30dp">


        <Button
            android:layout_width="match_parent"
            android:layout_height="40dp"


            />

    </RelativeLayout>

我最开始在相对布局中将透明度设置为0.1。

现在在活动中，您可以编写淡入和淡出的动画-

ObjectAnimator fadeOut = ObjectAnimator.ofFloat(relativelayout, "alpha", .5f, .1f);
        fadeOut.setDuration(300);
        ObjectAnimator fadeIn = ObjectAnimator.ofFloat(relativelayout, "alpha", .1f, .5f);
        fadeIn.setDuration(300);

        mAnimationSet = new AnimatorSet();

        mAnimationSet.play(fadeIn).after(fadeOut);

        mAnimationSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mAnimationSet.start();
            }
        });

        mAnimationSet.start();

编辑 3:

请按照以下代码更新您的布局：复制并粘贴代码，根据需要更改颜色。

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp">

        <RelativeLayout
            android:id="@+id/relative_layout_id"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_centerInParent="true"
            android:background="#FFC107"
            android:alpha="0.1">


        </RelativeLayout>

        <Button
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="#000000"
            android:layout_centerInParent="true"

            />

    </RelativeLayout>