Android动画 - 随着背景转换放大和淡化

Question

我想做这样的事情.有人能指出我正确的方向吗？

现在,我正在使用Scale Animation和FadeOut Animation.看起来像这样..

我如何为此添加背景颜色..另外请记住,我希望这可以从ICS/Jellybean工作

我的代码到现在为止......

fade_out_animation.xml

<?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>

scale_up_animation.xml

<?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>

activity_main.xml - 只是相关部分

<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>

shape_circle.xml

<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，它是状态更改期间动画的容器。

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

因此，问题是如何创建CircleButton和CircularRippleEffect分类；）第一个很简单。我们应该扩展View类和Override onDraw方法。在onDraw方法中，我们必须绘制两个圆圈（第一个代表按钮背景，第二个代表黄色边框）。我们的onDraw方法将如下所示：

@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);
}

我们必须记住，我们backgroundPaint应该FILL使用方法来设置样式，backgroundPaint.setStyle(FILL);而我们borderPaint应该具有样式STROKE。我还为此Paint对象设置了适当的颜色。onDraw方法中我们要做的最后一件事是在View的中心绘制文本。我已经drawCenter()为此实现创建了方法，可以从stackoverflow /sf/answers/2245687531/的此答案中找到该方法。

这就是我们应该知道的所有关于CircleButton课堂的知识。其他所有内容均与每个自定义视图相似。

该CircularRippleEffect班是比较复杂的。我们还绘制了两个圆，但是我们必须为其平滑地设置动画。这就是每个形状的大小取决于进度值的原因。

此类的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);

因为我想获得内部透明区域的圆。为了达到这种效果，我们必须创建tempCanvas和tempBitmap。此处类似的实现：Android canvas：在图像上绘制透明圆圈

最后一步是将这些视图组合在一起（我们可以在FrameLayout中完成），并在用户单击时同时更改该视图的状态。您可以在我的github帐户https://github.com/ljarka/CircleAnimation上找到完整的源代码