Android动画-随着背景转换而放大和褪色

Question

我正试着做这样的事…有人能给我指个正确的方向吗？

现在，我正在使用缩放动画和淡出动画。它看起来是这样的..

我如何添加背景色到这个…另外，请记住，我希望这个工作从ICS/JellyBean

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:duration="100" />
</set>

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

    <scale
        android:duration="100"
        android:fromXScale="0.1"
        android:fromYScale="0.1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1"
        android:toYScale="1" />
</set>

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center">

            <TextView
                android:id="@+id/textView4"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_centerInParent="true"
                android:layout_margin="8dp"
                android:background="@drawable/shape_circle"
                android:gravity="center"
                android:text="004"
                android:textColor="@color/light_gray"
                android:textSize="18sp" />

            <View
                android:id="@+id/outer_view"
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:layout_centerInParent="true"
                android:visibility="invisible"
                android:background="@drawable/shape_circle_yellow"/>


      </RelativeLayout>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="false" android:state_pressed="false" android:state_selected="false">
        <shape android:shape="oval">

            <solid android:color="@color/ash" />  <!-- Fill color -->

            <stroke android:width="4dp" android:color="@color/medium_gray" /> <!-- Outerline color -->

        </shape>
    </item>
    <item android:state_selected="true">

        <shape android:shape="oval">
            <solid android:color="@color/ash" />  <!-- Fill color -->

            <stroke android:width="4dp" android:color="@color/yellow" /> <!-- Outerline color -->
        </shape>
    </item>
    <item android:state_focused="true">

        <shape android:shape="oval">
            <solid android:color="@color/ash" />  <!-- Fill color -->

            <stroke android:width="4dp" android:color="@color/yellow" /> <!-- Outerline color -->
        </shape>
    </item>
    <item android:state_pressed="true">

        <shape android:shape="oval">
            <solid android:color="@color/ash" />  <!-- Fill color -->

            <stroke android:width="4dp" android:color="@color/yellow" /> <!-- Outerline color -->
        </shape>
    </item>
</selector>

shape_circle_yellow.xml

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

    <stroke android:color="@color/yellow"
        android:width="4dp" />
</shape>

Java代码：

 textView4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                final View view2 = findViewById(R.id.outer_view);

                Animation scale_up_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale_up_animation);
                final Animation fade_out_animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade_out_animation);

                scale_up_animation.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                        view2.setVisibility(View.VISIBLE);
                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        view2.startAnimation(fade_out_animation);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });

                fade_out_animation.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        view2.setVisibility(View.INVISIBLE);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });

                view2.startAnimation(scale_up_animation);
            }
        });

Answer 1

在Android上达到这种效果的最简单的方法是创建很少的自定义视图。例如，我们可以将动画分为两个视图（根据分而治之的规则）。第一个视图，让我们命名为CircleButton。它将是按钮，可以在两种状态-默认和选定。

第二个视图，让我们命名为circularrippleEffect，它将是状态变化期间动画的容器。

当我们将这些视图组合在一起时，我们将获得如下效果：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, backgroundPaint);

    canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, borderPaint);
    drawCenter(canvas, textPaint, text);
}

这就是我们应该知道的CircleButton类。其他一切都与每个自定义视图相似。

CircularRipleEffect类更加复杂。我们也画两个圆圈，但我们必须平稳地动画它们。这就是为什么每个形状的大小取决于进度值。

该类中的OnDraw方法如下所示：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    tempCanvas.drawColor(Color.WHITE, PorterDuff.Mode.CLEAR);
    tempCanvas.drawCircle(getWidth() / 2, getHeight() / 2, outerCircleRadiusProgress * maxCircleSize, circlePaint);
    tempCanvas.drawCircle(getWidth() / 2, getHeight() / 2, innerCircleRadiusProgress
                * (maxCircleSize + ADDITIONAL_SIZE_TO_CLEAR_ANTIALIASING), maskPaint);
    canvas.drawBitmap(tempBitmap, 0, 0, null);
}

tempCanvas.drawColor(Color.WHITE, PorterDuff.Mode.CLEAR);