Android---两个视图间的淡入淡出

本文译自:http://developer.android.com/training/animation/crossfade.html

淡入淡出动画(也可以作为溶解动画)是指在渐渐的淡出一个UI组件的同时,淡入另外一个UI组件。这种动画适用于应用程序中内容或View之间的切换。淡入淡出虽然非常细微和短暂,但却给屏幕间切换提供了连续平滑的变换。如果不使用它们,屏幕间的切换经常会让人感到突然或匆忙。

创建淡入淡出视图

创建两个要淡入淡出的视图,以下示例创建了一个进度指示和一个可滚动的文本视图:

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

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView style="?android:textAppearanceMedium"
            android:lineSpacingMultiplier="1.2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/lorem_ipsum"
            android:padding="16dp" />

    </ScrollView>

    <ProgressBar android:id="@+id/loading_spinner"
        style="?android:progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

</FrameLayout>

建立动画

1. 给要淡入淡出的View创建成员变量。在稍后的编辑动画期间的View时,要使用这些变量。

2. 对于要淡入的View,把它的可见性设置为GONE。这会防止这个View占据布局空间,并在布局计算中忽略它,这样会加快处理进度。

3. 在一个成员变量中缓存config_shortAnimTime系统属性。这个属性定义动画持续时间为”short”。对于细微的动画或频繁发生的动画,使用这个设置是一个理想的选择。还可以使用的设置有config_longAnimTimeconfig_mediumAnimTime.

下例代码使用了上面的布局文件作为Activity的内容视图:

publicclassCrossfadeActivityextendsActivity{

   
private View mContentView;
    private View mLoadingView;
    private intmShortAnimationDuration;

    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_crossfade);

        mContentView = findViewById(R.id.content);
        mLoadingView = findViewById(R.id.loading_spinner);

        // Initiallyhide the content view.
        mContentView.setVisibility(View.GONE);

        // Retrieveand cache the system's default "short" animation time.
        mShortAnimationDuration = getResources().getInteger(
                android.R.integer.config_shortAnimTime);
    }

淡入淡出视图

至此,视图被正确的建立了,以下是淡入淡出它们的步骤:

1. 对于要淡入的View,把它的透明度设置为0,并且要把可见性设置为VISIBLE(记住:它的初始设置是GONE),这会让该View可见,但完全透明。

2. 对于要淡入的View,把动画透明度设置为从0到1。同时,对于要淡出的View,要把动画的透明度设置为从1到0。

3. 在Animator.AnimatorListener中使用onAnimationEnd()方法中,把要淡出的View的可见性设置为GONE。即使透明度设置为0,也要把它的可见性设置为GONE,这会防止对布局空间的占用,并且会忽略对它的布局计算,从而提高处理速度。

以下示例展示如何完成淡入淡出操作:

privateViewmContentView;
private
View mLoadingView;
private int mShortAnimationDuration;

...

private void crossfade() {

    // Set the content view to0% opacity but visible, so that it is visible
    // (but fully transparent)during the animation.
    mContentView.setAlpha(0f);
    mContentView.setVisibility(View.VISIBLE);

    // Animate the contentview to 100% opacity, and clear any animation
    // listener set on theview.
    mContentView.animate()
            .alpha(1f)
            .setDuration(mShortAnimationDuration)
            .setListener(null);

    // Animate the loadingview to 0% opacity. After the animation ends,
    // set its visibility toGONE as an optimization step (it won't
    // participate in layoutpasses, etc.)
    mHideView.animate()
            .alpha(0f)
            .setDuration(mShortAnimationDuration)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                   mHideView.setVisibility(View.GONE);
                }
            });
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 提供了一种灵活的方式来添加动画效果,其中淡入淡出和位移是常见的视觉过渡。在 Vue 中,你可以使用第三方库如 `vue-animate`、`v-enter-active` 或直接使用 CSS 和 Vue 的 `v-show`、`v-if` 结合 `transition` 或 `v-enter`、`v-leave` 来实现这些效果。 1. **淡入淡出**(Fade in/out): 在 Vue 中,你可以使用 `v-enter` 和 `v-leave` 修饰符配合 CSS 过渡(`transition`)来实现元素的淡入淡出效果。例如: ```html <template> <div class="fade" v-enter="fadeIn" v-leave="fadeOut"> 这是一个动态组件 </div> </template> <script> export default { methods: { fadeIn() { this.$el.style.opacity = 0; }, fadeOut() { this.$el.style.opacity = 0; setTimeout(() => { this.$el.style.display = 'none'; }, 300); } } } </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; } .fade-enter, .fade-leave-to { opacity: 0; } </style> ``` 在这个例子中,`.fade-enter-active` 和 `.fade-leave-active` 设置了淡入淡出的过渡效果,`.fade-enter` 和 `.fade-leave-to` 是状态开始和结束时的样式。 2. **位移**(Position transition): 如果你想让元素在淡入淡出的同时还有位置移动,可以在 CSS 里定义 `transform: translate()` 并结合过渡效果。例如: ```css .fade-translate-enter-active, .fade-translate-leave-active { transition: all 0.5s ease; } .fade-translate-enter { transform: translateY(100px); } .fade-translate-leave-to { transform: translateY(0); } ``` 在上述代码中,`.fade-translate-enter` 和 `.fade-translate-leave-to` 分别设置了进入和离开时的初始和结束位置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值