如何在Android中使用动画逐渐从圆心填充圆的背景颜色

Question

我正在尝试在Android中从中心开始逐渐填充圆形的背景

下面是我在这里找到的一个示例片段，我想做与下面代码片段完全相同的事情，但不是在Web上而是在Android上。我试图搜索它，但是我只得到了一些使用TransitionDrawable从颜色到颜色转换的结果，这不是我想要的。

$('div').click(function() {
  $(this).toggleClass('selected');
});

div.button {
  height: 27px;
  width: 27px;
  border-radius: 50%;
  background: green;
}

div.button:after {
  content: '';                 /* needed for rendering */
  position: relative;          
  display: block;              /* so we can set width and height */
  border-radius: 50%;
  height: 0%;
  width: 0%;
  margin: auto;                /* center horizontally */
  background: red;
  top: 50%;                    /* center vertically */
  transform: translateY(-50%); /* center vertically */
  transition: 1s;
}

div.button.selected:after {
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">

</div>

- the newbie coder

---

在XML中制作一个带有背景颜色的圆形，并应用此动画：https://dev59.com/DGs05IYBdhLWcg3wJuvp - D.J

https://dev59.com/3WAf5IYBdhLWcg3wQQu4 - Ankita

这是 CSS 和 JavaScript 代码，你为什么要将它标记为 Android 和 Java？ - Abhijit Chakra

@AbhijitChakra，CSS和JavaScript只是一个例子，我想要的是在Android上实现同样的功能。 - the newbie coder

Answer 1

请尝试以下操作：

在您的活动Java中

  circle2 = (ImageView) findViewById(R.id.circle2);
    ScaleAnimation fade_in =  new ScaleAnimation(0f, 1f, 0f, 1f, 
    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    fade_in.setDuration(1000);     // animation duration in milliseconds
    fade_in.setFillAfter(true);    // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
    circle2.startAnimation(fade_in);

活动XML

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

android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"


>

<ImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="@drawable/circle" />

<ImageView
    android:id="@+id/circle2"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="@drawable/circle_two" />
</FrameLayout>

在你的drawable文件夹下的circle.xml中。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
    <shape android:shape="oval">
        <solid android:color="@color/colorAccent" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <solid android:color="@color/colorAccent" />
    </shape>
</item>
</selector>

同样地，创建circle2.xml。

- Amrutha Saj

---

谢谢，这正是我所需要的。 - the newbie coder

@carlos 太棒了！愉快地编程吧...) - Amrutha Saj