Animating Views Using Scenes and Transitions

From android 4.4 , it supply one new animation with layout:transition

To help you animate a change between one view hierarchy and another, Android provides the transitions framework.
This framework applies one or more animations to all the views in the hierarchies as it changes between them.

The scene is the source for transition.

It is easily to transfer from one scene to another scene.

You just need to doing this as following.

1.add a new activty named TransitionActivity

define layout like this:scene_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="changed" />

    <FrameLayout
        android:id="@+id/scene_root"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        <include layout="@layout/a_scene" />
    </FrameLayout>

</LinearLayout>

R.id.scene_root is the view we want to transiton.

So transition is not animation activity whole layout, you can just start with one layout:as below FrameLayout.

2.we need to define two scene view to show transtion:

a_scene.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/text_view1"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextLine1" />

    <TextView
        android:id="@+id/text_view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="TextLine2" />

</RelativeLayout>

and another_scene.xml:

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

    <TextView
        android:id="@+id/text_view2"
        android:layout_alignParentTop="true"
        android:paddingTop="100dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text Line 3" />

    <TextView
        android:id="@+id/text_view1"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text Line 4" />

</RelativeLayout>

You can find there children‘s id is same.

Yes, android transition framework need using view id to calculater transition animation .

3.define transition manager

Here we will define how one scene go to another scene.

transitions_mgr.xml

<transitionManager xmlns:android="http://schemas.android.com/apk/res/android">
    <transition android:fromScene="@layout/a_scene"
                android:toScene="@layout/another_scene"
                android:transition="@transition/changebounds_fadein_together"/>
    <transition android:fromScene="@layout/another_scene"
                android:toScene="@layout/a_scene"
                android:transition="@transition/changebounds_fadeout_sequential"/>
</transitionManager>

4. showing the TransitionActivity

        mAScene = Scene.getSceneForLayout(mSceneRoot, R.layout.a_scene, this);
        mAnotherScene =
            Scene.getSceneForLayout(mSceneRoot, R.layout.another_scene, this);
Scene android.transition.Scene.getSceneForLayout(ViewGroup sceneRoot, int layoutId, Context context)

as you see: mSceneRoot is the layout what your scene will showing. and R.layout.a_scene & R.layout.another_scene is the layout for scene.

mSceneRoot = (ViewGroup) findViewById(R.id.scene_root);
        TransitionInflater inflater = TransitionInflater.from(this);
        mTransitionManager = inflater.inflateTransitionManager(R.transition.transitions_mgr,
                mSceneRoot);

get an mTransitionManager  form R.transition.transitions_mgr . Thus you can define transiton animation detail from one scene to another one.

package com.joyfulmath.androidstudy.transition;

import com.joyfulmath.androidstudy.R;

import android.app.Activity;
import android.os.Bundle;
import android.transition.Scene;
import android.transition.TransitionInflater;
import android.transition.TransitionManager;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;

public class TransitionActivity extends Activity {

    Scene mAScene;
    Scene mAnotherScene;
    private ViewGroup mSceneRoot;
    private TransitionManager  mTransitionManager;
    View mTitle = null;
    int currentId = 1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.scene_layout);
        mSceneRoot = (ViewGroup) findViewById(R.id.scene_root);

        mTitle = findViewById(R.id.title);

        mAScene = Scene.getSceneForLayout(mSceneRoot, R.layout.a_scene, this);
        mAnotherScene =
            Scene.getSceneForLayout(mSceneRoot, R.layout.another_scene, this);
        TransitionInflater inflater = TransitionInflater.from(this);
        mTransitionManager = inflater.inflateTransitionManager(R.transition.transitions_mgr,
                mSceneRoot);

        mTitle.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                setScene(3-currentId);
            }
        });
    }

    public void setScene(int id)
    {
        if(id == currentId)
        {
            return;
        }
        currentId = id;
        switch (id) {
        case 1:
            mTransitionManager.transitionTo(mAScene);
            break;
        case 2:
            mTransitionManager.transitionTo(mAnotherScene);
            break;
        }
    }
}

5.define special transition animation:

Two way: fade & changeBounds

<changeBounds/> just defined Moves and resizes views.
<fade android:fadingMode="fade_out|fade_in|fade_in_out" >
</fade>

6.Custom Transition

package com.joyfulmath.androidstudy.transition;

import android.animation.Animator;
import android.animation.ArgbEvaluator;
import android.animation.ValueAnimator;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.transition.Transition;
import android.transition.TransitionValues;
import android.view.View;
import android.view.ViewGroup;

public class CustomTransition extends Transition {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private static final String PROPNAME_BACKGROUND =
            "com.joyfulmath.androidstudy.transition:CustomTransition:background";

    @Override
    public void captureEndValues(TransitionValues transitionValues) {
        captureValues(transitionValues);
    }

    @Override
    public void captureStartValues(TransitionValues transitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues);

    }

    @Override
    public Animator createAnimator(ViewGroup sceneRoot,
            TransitionValues startValues, TransitionValues endValues) {
        // This transition can only be applied to views that are on both starting and ending scenes.
        if (null == startValues || null == endValues) {
            return null;
        }
        // Store a convenient reference to the target. Both the starting and ending layout have the
        // same target.
        final View view = endValues.view;
        // Store the object containing the background property for both the starting and ending
        // layouts.
        Drawable startBackground = (Drawable) startValues.values.get(PROPNAME_BACKGROUND);
        Drawable endBackground = (Drawable) endValues.values.get(PROPNAME_BACKGROUND);
        // This transition changes background colors for a target. It doesn‘t animate any other
        // background changes. If the property isn‘t a ColorDrawable, ignore the target.
        if (startBackground instanceof ColorDrawable && endBackground instanceof ColorDrawable) {
            ColorDrawable startColor = (ColorDrawable) startBackground;
            ColorDrawable endColor = (ColorDrawable) endBackground;
            // If the background color for the target in the starting and ending layouts is
            // different, create an animation.
            if (startColor.getColor() != endColor.getColor()) {
                // Create a new Animator object to apply to the targets as the transitions framework
                // changes from the starting to the ending layout. Use the class ValueAnimator,
                // which provides a timing pulse to change property values provided to it. The
                // animation runs on the UI thread. The Evaluator controls what type of
                // interpolation is done. In this case, an ArgbEvaluator interpolates between two
                // #argb values, which are specified as the 2nd and 3rd input arguments.
                ValueAnimator animator = ValueAnimator.ofObject(new ArgbEvaluator(),
                        startColor.getColor(), endColor.getColor());
                // Add an update listener to the Animator object.
                animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        Object value = animation.getAnimatedValue();
                        // Each time the ValueAnimator produces a new frame in the animation, change
                        // the background color of the target. Ensure that the value isn‘t null.
                        if (null != value) {
                            view.setBackgroundColor((Integer) value);
                        }
                    }
                });
                // Return the Animator object to the transitions framework. As the framework changes
                // between the starting and ending layouts, it applies the animation you‘ve created.
                return animator;
            }
        }
        // For non-ColorDrawable backgrounds, we just return null, and no animation will take place.
        return null;
    }
    // END_INCLUDE (create_animator)

    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private void captureValues(TransitionValues transitionValues) {
        // Get a reference to the view
        View view = transitionValues.view;
        // Store its background property in the values map
        transitionValues.values.put(PROPNAME_BACKGROUND, view.getBackground());
    }
}
    public void setScene(int id)
    {
        if(id == currentId)
        {
            return;
        }
        currentId = id;
        switch (id) {
        case 1:
//            mTransitionManager.transitionTo(mAScene);
            TransitionManager.go(mAScene, mTransition);
            break;
        case 2:
//            mTransitionManager.transitionTo(mAnotherScene);
            TransitionManager.go(mAnotherScene, mTransition);
            break;
        }
    }
时间: 06-22

Animating Views Using Scenes and Transitions的相关文章

Android 知识要点整理(11)----Scenes and Transitions(场景和变换)

除了常规的动画(帧动画.补间动画.属性动画)等作用于单个控件的动画,Android 还提供了一种类似的动画的功能,用于在两个不同的布局切换时提供过渡动画效果--Transitions Framework. Transitions Framework 简介 该框架帮助在布局改变的时候增加动画效果,它会在布局发生改变的时候应用一个或多个动画效果于布局中的每个控件.框架具有以下特点: 分组动画 一个或多个动画会作用于每个控件 基于变化的动画 动画是基于初始状态和最终状态的控件的属性值执行的 内置动画

Android官方文档training中英文翻译目录大全:29篇已翻译,45篇未翻译

Android官方文档training中英文翻译目录大全:29篇已翻译,45篇未翻译 1. Getting Started Building Your First App: 原文: https://developer.android.com/training/basics/firstapp/index.html译文:http://wiki.eoeandroid.com/Building_Your_First_AppAdding the Action Bar:原文:https://develope

【IOS笔记】Views

Views Because view objects are the main way your application interacts with the user, they have many responsibilities. Here are just a few: 通过view对象是与用户交互的主要方式,它们有很多责任,下面是其中一些: Layout and subview management   布局 A view defines its own default resizin

Displaying Your Views at Runtime

UIKit automatically loads views from your storyboard file when they are needed. As part of the loading process, UIKit performs the following sequence of tasks: Instantiates views using the information in your storyboard file. Connects all outlets and

iOS Drawing Concepts[iOS 绘画概念]

iOS Drawing Concepts https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html High-quality graphics are an important part of your app’s user interface. Providin

(8/18)重学Standford_iOS7开发_协议、block、动画_课程笔记

第八课: 1.协议 另一种安全处理id类型的方式如:id <MyProtocol> obj a.声明 //协议一般放于.h文件中或者在类的.h文件中 @protocol Foo <Xyzzy, NSObject>//<>中的内容表示还需实现自哪些协议,所有协议的根协议一般都是NSObject - (void)someMethod;//默认为必须实现的方法 @optional//可选方法声明 - (void)methodWithArgument:(BOOL)argumen

解决RecyclerView无法onItemClick问题

对于RecyclerView的使用,大家可以查看将替代ListView的RecyclerView 的使用(一),单单从代码结构来说RecyclerView确实比ListView优化了很多,也简化了我们编写代码量,但是有一个问题会导致开发者不会去用它,更比说替换ListView了,我不知道使用过RecyclerView的人有没有进一步查看,RecyclerView没有提供Item的点击事件,我们使用列表不仅仅为了显示数据,同时也可以能会交互,所以RecyclerView这个问题导致基本没有人用它,

UIView Class Reference

转载自 http://www.cnblogs.com/cat3/archive/2013/04/07/3006125.html Initializing a View Object //初始化view - (id)initWithFrame:(CGRect)aRect //通过一个矩形对象初始化 Configuring a View’s Visual Appearance //配置视觉展示 @property(nonatomic, copy) UIColor *backgroundColor /

Android动画学习笔记-Android Animation

转自:http://www.cnblogs.com/angeldevil/archive/2011/12/02/2271096.html 3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三种动画模式在SDK中被称为property animation,view animation,drawable animation. 可通过NineOldAndr