Android官网新例详解-------Adding Animations讲解

详见：

http://developer.android.com/training/animation/index.html

本次讲解总共分为五个效果：

分别如下：

1.交叉渐变动画；（Crossfade animations）

2.屏幕幻灯片；（Screen slides ）

3.显示卡片翻转动画；（Displaying Card Flip Animations）

4.缩放图片；（zooming a view）

5.动画框架变化；（Animating Layout Changes）

 

下面依次进行翻译讲解：

（1）交叉渐变动画：

交叉渐变动画(也称为溶解)逐渐淡出一个UI组件同时消除另一个。这个动画是有用的情况下你想切换内容或观点在你的应用程序。该动画非常微妙和短但提供流体过渡到下一个从屏幕。当你不使用它们,然而,转换常常感到突然的或匆忙。
这里有一个例子从一个进度指示器,淡入淡出一些文本内容。

 

/*
 * Copyright 2012 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.example.android.animationsdemo;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.NavUtils;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
/**
 * This sample demonstrates cross-fading between two overlapping views.
 *
 * <p>In this sample, the two overlapping views are a loading indicator and some text content. The
 * active view is toggled by touching the toggle button in the action bar. In real-world
 * applications, this toggle would occur as soon as content was available. Note that if content is
 * immediately available, a loading spinner shouldn't be presented and there should be no
 * animation.</p>
 */
public class CrossfadeActivity extends Activity {
    /**
     * The flag indicating whether content is loaded (text is shown) or not (loading spinner is
     * shown).
     */
    private boolean mContentLoaded;

    /**
     * The view (or view group) containing the content. This is one of two overlapping views.
     */
    private View mContentView;

    /**
     * The view containing the loading indicator. This is the other of two overlapping views.
     */
    private View mLoadingView;

    /**
     * The system "short" animation time duration, in milliseconds. This duration is ideal for
     * subtle animations or animations that occur very frequently.
     */
    private int mShortAnimationDuration;

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

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

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        getMenuInflater().inflate(R.menu.activity_crossfade, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                // Navigate "up" the demo structure to the launchpad activity.
                // See http://developer.android.com/design/patterns/navigation.html for more.
                NavUtils.navigateUpTo(this, new Intent(this, MainActivity.class));
                return true;

            case R.id.action_toggle:
                // Toggle whether content is loaded.
                mContentLoaded = !mContentLoaded;
                showContentOrLoadingIndicator(mContentLoaded);
                return true;
        }

        return super.onOptionsItemSelected(item);
    }

    /**
     * Cross-fades between {@link #mContentView} and {@link #mLoadingView}.
     */
    private void showContentOrLoadingIndicator(boolean contentLoaded) {
        // Decide which view to hide and which to show.
        final View showView = contentLoaded ? mContentView : mLoadingView;
        final View hideView = contentLoaded ? mLoadingView : mContentView;

        // Set the "show" view to 0% opacity but visible, so that it is visible
        // (but fully transparent) during the animation.
        showView.setAlpha(0f);
        showView.setVisibility(View.VISIBLE);

        // Animate the "show" view to 100% opacity, and clear any animation listener set on
        // the view. Remember that listeners are not limited to the specific animation
        // describes in the chained method calls. Listeners are set on the
        // ViewPropertyAnimator object for the view, which persists across several
        // animations.
        showView.animate()
                .alpha(1f)
                .setDuration(mShortAnimationDuration)
                .setListener(null);

        // Animate the "hide" 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.)
        hideView.animate()
                .alpha(0f)
                .setDuration(mShortAnimationDuration)
                .setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        hideView.setVisibility(View.GONE);
                    }
                });
    }
}

 

 

（2）屏幕幻灯片动画

使用ViewPager屏幕幻灯片

屏幕幻灯片之间的转换到另一个整个屏幕,也是常见的与ui设置向导或幻灯片一样。这节课向你展示了如何用ViewPager屏幕幻灯片提供的支持库。ViewPagers可以激活屏幕幻灯片自动。这就是一个屏幕滑动看起来像,转换从一个屏幕的内容到下一个:

 

 

 

（3）显示卡片翻转动画

这节课向你展示了如何做一个卡片翻转动画与自定义片段动画。卡内容的动画视图之间翻转通过显示一个动画,它可以模拟一个卡片翻转过来。
这里是一个卡片翻转:

 

 

（4）缩放动画

这节课展示了如何做一个触摸缩放动画,这是有用的应用程序,如照片画廊动画视图从一个缩略图,一个全尺寸的图像,将整个屏幕。
这里是一个触摸缩放动画看起来像一个缩略图,扩大至全屏:

 

 

 

 

（5）动画框架变化

在未来的时间局预装系统运行动画,您每次修改布局配置。所有您需要做的就是设置一个属性在布局告诉Android系统来推动这些布局变化,系统默认为您进行动画。
提示:如果你想供应定制布局动画,创建一个LayoutTransition对象和供应它的布局与setLayoutTransition()方法。
这里是一个默认的布局动画看起来像当添加物品列表:

 

 

 

 

 

 源码下载

源码下载