用于视图可见性和不可见性的 Android 动画答案

【问题标题】：Android animation for visibility and invisibity of view用于视图可见性和不可见性的 Android 动画
【发布时间】：2015-02-25 11:59:13
【问题描述】：

我想把动画像 - 一个视图首先是不可见模式，,, 在按钮单击时它将是可见的并慢慢向上滑动并在那里停留大约 5 秒钟，然后它会随着动画再次向下滑动进入隐形状态。请问谁能帮我解决这个问题？

【问题讨论】：

您需要 Alpha 动画，然后是翻译动画，反之亦然。
请您详细说明如何使用 alpha 动画并为此翻译动画？

标签： android android-animation

【解决方案1】：

动画grow_from_bottom.xml

    <?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:interpolator/accelerate_decelerate">
    <translate android:fromYDelta="100%p" android:toYDelta="0"
               android:duration="@android:integer/config_mediumAnimTime"/>
</set>

动画 close_to_bottom.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="0" android:toYDelta="100%"
               android:duration="@android:integer/config_shortAnimTime"/>
</set>

style.xml

<?xml version="1.0" encoding="utf-8"?>
    <style name="Animations">
        <item name="android:windowEnterAnimation">@anim/grow_from_bottom</item>
        <item name="android:windowExitAnimation">@anim/close_to_bottom</item>
    </style>

视图是

    package com.creation.android.core.portrait_ui.common;

import android.content.Context;
import android.os.Handler;
import android.os.SystemClock;
import android.view.Gravity;
import android.view.View;
import android.view.WindowManager;
import android.widget.PopupWindow;
import com.creation.android.R;

public class PopUpView extends PopupWindow implements PopupWindow.OnDismissListener {

    public static final int POPUP_AUTO_DISMISS = 10 * 1000;
    private Context mContext;

    private Handler mHandler;
    private Runnable mRunnable = new Runnable() {
        @Override
        public void run() {
            if (isShowing()) {
                mHandler.removeCallbacks(mRunnable);
                dismiss();
            }
        }
    };

    public PopUpView(Context context) {
        super(context);
        super.setFocusable(true);
        mContext = context;
        init();
    }

    private void init() {
        mHandler = new Handler();
        View contentView = View.inflate(mContext, R.layout.pop_up_menu_view, null);
        setContentView(contentView);
        setWidth(SCREEN_WIDTH);
        setHeight(SCREEN_HEIGHT);
        setOnDismissListener(this);

        setAnimationStyle(R.style.Animations);
    }

    public void show(View view) {
        try {
            showAtLocation(view, Gravity.NO_GRAVITY, 0, 0);

            mHandler.postAtTime(mRunnable, SystemClock.uptimeMillis() + POPUP_AUTO_DISMISS);
        } catch (WindowManager.BadTokenException e) {
        }
    }
    @Override
    public void onDismiss() {
        mHandler.removeCallbacks(mRunnable);
    }
}

【讨论】：

【解决方案2】：

您需要 Alpha 动画，然后是翻译动画，反之亦然。

看这个例子：

img = (ImageView) findViewById(R.id.iv);

final Animation aAnim1 = new AlphaAnimation(0.0f, 1.0f);
aAnim1.setFillAfter(true);
aAnim1.setRepeatCount(0);
aAnim1.setDuration(5000);

final Animation tAnim1 = new TranslateAnimation(0.0f, 0.0f, 0.0f,
        -20.0f);
tAnim1.setFillAfter(true);
tAnim1.setRepeatCount(0);
tAnim1.setDuration(5000);
tAnim1.setInterpolator(new AccelerateDecelerateInterpolator());

final Animation aAnim2 = new AlphaAnimation(1.0f, 0.0f);
aAnim2.setFillAfter(true);
aAnim2.setRepeatCount(0);
aAnim2.setDuration(5000);

final Animation tAnim2 = new TranslateAnimation(0.0f, 0.0f, -20.0f,
        0.0f);
tAnim2.setFillAfter(true);
tAnim2.setRepeatCount(0);
tAnim2.setDuration(5000);
tAnim2.setInterpolator(new AccelerateDecelerateInterpolator());
aAnim1.setAnimationListener(new AnimationListener() {

    @Override
    public void onAnimationStart(Animation animation) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onAnimationRepeat(Animation animation) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onAnimationEnd(Animation animation) {
        // TODO Auto-generated method stub
        img.startAnimation(tAnim1);
    }
});

tAnim2.setAnimationListener(new AnimationListener() {

    @Override
    public void onAnimationStart(Animation animation) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onAnimationRepeat(Animation animation) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onAnimationEnd(Animation animation) {
        // TODO Auto-generated method stub
        img.startAnimation(aAnim2);
    }
});

button1.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        img.startAnimation(aAnim1);
    }
});
button2.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        img.startAnimation(aAnim1);
    }
});

我只是这样做了：

在按钮 1 的点击中：

使图像可见 - alpha 0 到 1。
向上滑动 - 使用 fromY 0.0f 和 toY -20.0f 进行翻译

在按钮 2 的点击中：

向下滑动 - 使用 fromY -20.0f 和 toY 0.0f 进行翻译
使图像再次不可见 - alpha 1 到 0。

我已经使用动画侦听器在第一次结束时启动其他动画。您可以尝试改用Animator Set。

希望这会有所帮助。

【讨论】：

谢谢。但我不想要这种动画。我想要两个动画之间的延迟。
你可以在播放动画之前给延迟。

【解决方案3】：

基本上，您需要的是两个翻译动画，两者之间时间间隔为5000毫秒，并使视图不可见，动画开始之前和之后..

假设您的 Button 被命名为 bt，视图是 TextView，被命名为 tv。

按照以下步骤执行您提到的动画：

创建名为activity_main.xml的布局文件，如下所示：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:visibility="invisible" 
    android:layout_centerVertical="true"
    android:text="@string/hello_world" />

<Button
    android:id="@+id/bt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/tv"
    android:layout_alignParentBottom="true"
    android:text="Button" />

</RelativeLayout>

现在在您项目的res->anim 目录中创建名为anim_ex.xml 的动画文件，如下所示：

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

    <!--Use two translate animations with a time gap of 5000 milliseconds-->
    <!-- Use startOffset to provide delay between the animations -->
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromYDelta="0%p"
        android:startOffset="300"
        android:toYDelta="-25%p" />
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromYDelta="0%p"
        android:startOffset="5000"
        android:toYDelta="25%p" />
    </set>

以下是记录在案的（根据需要）JAVA 文件（MainActivity.java）：

package com.example.anim;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity implements
        AnimationListener {

    Animation anim;
    TextView tv;
    Button bt;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tv = (TextView) findViewById(R.id.tv);
        bt = (Button) findViewById(R.id.bt);
        anim = AnimationUtils.loadAnimation(getApplicationContext(),
                R.anim.anim_ex); //Load the animation from the xml file
        anim.setAnimationListener(this); //Set Animation Listener
        bt.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub

                tv.setVisibility(View.VISIBLE); //Make the textview visible on button click
                tv.startAnimation(anim);//start the animation

            }
        });

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onAnimationEnd(Animation arg0) {
        // TODO Auto-generated method stub

        tv.clearAnimation();//Clear Animation when animation ends
        tv.setVisibility(View.INVISIBLE);//Make textview invisible again

    }

    @Override
    public void onAnimationRepeat(Animation arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onAnimationStart(Animation arg0) {
        // TODO Auto-generated method stub

    }
}

希望对您有所帮助！

【讨论】：

Thanx.. 我想要这种动画。两个动画之间的延迟。

【解决方案4】：

onAnimationEnd 方法后清除视图动画例如：需要清除 Textview(txtView) 动画

anim.setAnimationListener(new AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {
}

@Override
public void onAnimationRepeat(Animation animation) {
}

@Override
public void onAnimationEnd(Animation animation) {
    // Clear view animation
    txtView.clearAnimation();
}

});

【讨论】：