【问题标题】:Android Animation - Scale up and Fade along with Background TransitionAndroid 动画 - 随背景过渡放大和淡出
【发布时间】:2016-12-31 19:37:21
【问题描述】:

我正在尝试做这样的事情..有人可以指出我正确的方向吗?

现在,我正在使用 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);
            }
        });

【问题讨论】:

  • 发布 shape_circle_yellow.xml??
  • @sJy,更新了问题
  • 你能检查一下答案并看看它是否有效吗??
  • 一天后更新
  • @Vamsi Challa:- 让我知道这是否合适imgflip.com/gif/1eocdx

标签: android android-animation


【解决方案1】:

在 Android 上达到这种效果的最简单方法是创建几个自定义视图。 例如我们可以将动画分成两个视图(根据分治规则)。第一次查看让我们命名CircleButton。它将是可以处于两种状态的按钮 - 默认和选中。

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

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

所以,问题是如何创建CircleButtonCircularRippleEffect 类;) 第一个很简单。我们应该扩展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 应该使用backgroundPaint.setStyle(FILL); 方法将样式设置为FILL,而我们的borderPaint 应该具有样式STROKE。我还为这个Paint 对象设置了适当的颜色。在onDraw 方法中我们应该做的最后一件事是在视图的中心绘制文本。 我为此实现创建了drawCenter() 方法,可以在stackoverflow 的这个答案中找到https://stackoverflow.com/a/32081250/1722808

这就是我们应该知道的关于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: draw transparent circle on image

最后一步是将这些视图组合在一起(我们可以在 FrameLayout 中完成)并在用户单击它的同时更改这些视图的状态。 整个源代码可以在我的github账号https://github.com/ljarka/CircleAnimation找到

【讨论】:

  • 大部分答案都很好..但这个最接近。
【解决方案2】:

Have a look at this,

@Override
public void onClick(View view) {
    switch (view.getId()) {
         case R.id.textView4:
            ((TextView)findViewById(R.id.textView4)).setBackground(getResources().getDrawable(R.drawable.shape_circle));
            ((TextView)findViewById(R.id.textView4)).setTextColor(getResources().getColor(R.color.lightgrey));

            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);
                    ((TextView) findViewById(R.id.textView4)).setBackground(getResources().getDrawable(R.drawable.circle_yellow));
                    ((TextView) findViewById(R.id.textView4)).setTextColor(getResources().getColor(R.color.yellow_600));
                }

                @Override
                public void onAnimationRepeat(Animation animation) {

                }
            });

            view2.startAnimation(scale_up_animation);
            break;

circle_yellow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval"
       android:tint="@color/yellow_100">
       <stroke
            android:width="3dp"
            android:color="@color/yellow_600" />
       <solid android:color="@color/grey_500" />
</shape>

【讨论】:

    【解决方案3】:

    要将背景设置为 TextView,请更改您的选择器 android:state_selected,如下所示。

    <item android:state_selected="true">
        <shape android:shape="oval">
            <solid android:color="#81fde980" />  <!-- Fill color -->
            <stroke android:width="2dp" android:color="@color/yellow" /> <!-- Outerline color -->
        </shape>
    </item>
    

    现在将onAnimationEnd()scale_up_animation 更新为

    @Override
    public void onAnimationEnd(Animation animation) {
        view2.startAnimation(fade_out_animation);
        if(textView4.isSelected()) {
            textView4.setSelected(false);
            textView4.setTextColor(getResources().getColor(R.color.light_gray));
        } else {
            textView4.setSelected(true);                                                    
            textView4.setTextColor(getResources().getColor(R.color.yellow));
        }
    }
    

    【讨论】:

    • 即使将代码添加到 onAnimationStart() 方法也可以正常工作
    【解决方案4】:

    在您的活动中实现代码以制作一些动画

    private View mContentView;
    private View mLoadingView;
    private int mShortAnimationDuration;
    
    ...
    
    private void crossfade() {
    
        // Set the content view to 0% opacity but visible, so that it is visible
        // (but fully transparent) during the animation.
        mContentView.setAlpha(0f);
        mContentView.setVisibility(View.VISIBLE);
    
        // Animate the content view to 100% opacity, and clear any animation
        // listener set on the view.
        mContentView.animate()
                .alpha(1f)
                .setDuration(mShortAnimationDuration)
                .setListener(null);
    
        // Animate the loading view to 0% opacity. After the animation ends,
        // set its visibility to GONE as an optimization step (it won't
        // participate in layout passes, etc.)
        mLoadingView.animate()
                .alpha(0f)
                .setDuration(mShortAnimationDuration)
                .setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        mLoadingView.setVisibility(View.GONE);
                    }
                });
    }
    

    使用此代码让任何组件淡入 xml

    <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    
      <fade>
      <targets>
      <target android:targetClass="android.widget.TextView" />
      <target android:targetClass="android.widget.FrameLayout" />
      <target android:targetClass="android.widget.LinearLayout" />
      <target android:targetClass="android.widget.ImageView" />
      </targets>
      </fade>
    
      </transitionSet>
    

    【讨论】:

      【解决方案5】:

      可爱的view动画合集: https://github.com/daimajia/AndroidViewAnimations

      您可以在自定义形状或具有白色背景的视图上使用 TakeOffAnimator 或 ZoomOutAnimator 等动画,并在位于第一个形状或视图中心的灰色视图上延迟播放相同的动画。

      【讨论】:

        【解决方案6】:

        试试这个;

        Animation fadeOut = new AlphaAnimation(1, 0);
        fadeOut.setDuration(1000);
        AnimationSet animation = new AnimationSet(true);
        animation.addAnimation(sizingAnimation);
        animation.addAnimation(fadeOut);
        this.setAnimation(animation);
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2014-03-10
          • 1970-01-01
          • 2014-02-04
          • 1970-01-01
          • 2013-11-08
          • 2014-09-16
          • 2020-01-06
          相关资源
          最近更新 更多