Android 动画学习

计划在接下来的一周学习Android 动画,每天做一下记录。

 首先推荐这个链接:如何高效学习Android动画?http://www.zhihu.com/question/27718787

截取其中一部分内容,介绍一下动画的种类:

Android Animation 大概可以分成以下几种:

1. View Animation
这种属于最常使用的动画之一,例如 View Slide, Fade In/Out, Parallax Effect 等等

2. Activity Transition
常见于 Activity 进入或者跳出时的动画,比如启动一个 Activity, 从侧面滑入。在 Android 4.4 之后,引入了Scene, enterTransition 和 exitTransition 等概念,可以定义 Activity 进入以后不同View 做的一系列动画。在 Android 5.0 以后引入了 ShareElementsTransition, 让开发高质量的 Activity Transition 变的更加容易。

3. Drawable Animation
Drawable Animation 常见于启动或者一些加载过程中的帧动画。当然,Android 5.0 以后引入了 Vector Drawable, 一些很漂亮的 icon transition 就变的相对很容易实现一些,自然应用细节体验就能上很大一个台阶。

4. Property Animation
Property Animation 是 Android 3.0 以后引入的动画框架,一开始概念略微难理解,但是理解以后会发现非常好用,很多自定义动画或者复杂动画的场景变换可以借助这套框架来实现。

今日学习纪要:

使用Android sample里提供的例子学习:

1,RealEffect(RevealEffectBasic Sample)

Reveal动画在显示或隐藏UI控件时给用户提供视觉连续性。

使用ViewAnimationUtils.createCircularReveal() 方法在线上或隐藏view时,显示剪切的圆环动画。

具体代码如下:

To reveal a previously invisible view using this effect:

// previously invisible view
View myView = findViewById(R.id.my_view);

// get thecenter for the clipping circle
int cx = myView.getWidth()/ 2;
int cy = myView.getHeight()/ 2;

// get the finalradius for the clipping circle
float finalRadius = (float)Math.hypot(cx, cy);

// create theanimator for this view (the start radius is zero)
Animator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy,0, finalRadius);

// make the viewvisible and start the animation
myView.setVisibility(View.VISIBLE);
anim.start();

To hide a previously visible view using this effect:

// previously visible view
final View myView= findViewById(R.id.my_view);

// get thecenter for the clipping circle
int cx = myView.getWidth()/ 2;
int cy = myView.getHeight()/ 2;

// get theinitial radius for the clipping circle
float initialRadius = (float)Math.hypot(cx, cy);

// create theanimation (the final radius is zero)
Animator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);

// make the viewinvisible when the animation is done
anim.addListener(newAnimatorListenerAdapter(){
    @Override
    public void onAnimationEnd(Animator animation){
        super.onAnimationEnd(animation);
        myView.setVisibility(View.INVISIBLE);
    }
});

// start theanimation
anim.start();


2,ActivityTransition(BasicTransition 和CustomTransition Sample)

1)包含三种transition:       

         enter transition determines how views in an activity enter the scene. For example, in the explode entertransition, the views enter the scene from the outside and fly in towards thecenter of the screen.

         exit transition determines how views in an activity exit the scene. For example, in the explode exittransition, the views exit the scene away from the center.

        shared elements transition determineshow views that are shared between two activities transition between theseactivities. For example, if two activities have the same image in differentpositions and sizes, thechangeImageTransform shared elementtransition translates and scales the image smoothly between these activities.


2)Android 5.0 (API level 21) 支持这些enter and exit transitions:

·        explode - Moves views in or out from the center of thescene.

·        slide - Moves views in or out from one of the edges ofthe scene.

·        fade - Adds or removes a view from the scene by changingits opacity.

          和这些shared elements transitions:

·        changeBounds - Animates the changes in layout bounds of targetviews.

·        changeClipBounds - Animates the changesin clip bounds of target views.

·        changeTransform - Animates the changesin scale and rotation of target views.

·        changeImageTransform - Animates changes insize and scale of target images.

当在App中启用 activity transitions ,activity的进场出场使用默认的cross-fading transition。


3)启用activity transitions的两种方法

     1>定义继承于material theme的style, 并设置 android:windowActivityTransitions 熟悉为true :

            <stylename="BaseAppTheme"parent="android:Theme.Material">
                       <!-- enable window content transitions-->
                      <item name="android:android:windowActivityTransitions">true</item>

     2>  在Activity代码中添加:

                  // inside your activity (if you did not enabletransitions in your theme)
                    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

                // set an exittransition
               getWindow().setExitTransition(newExplode());


      备注:为得到完整的效果,需要在调用和被调用的acitivity中都启用transition. 为使进入动画尽早启动,在被调用Activity中使用 Window.setAllowEnterTransitionOverlap()方法。


4)使用shared element启动Activity

     在拥有shared element的两个Activity之间启动transition需要一下几个步骤:

            1.     Enable window content transitions in your theme.

            2.     Specify a shared elements transition in your style.

            3.     Define your transition as an XML resource.

            4.     Assign a common name to the shared elements in both layouts with the android:transitionName attribute.

            5.     Use the ActivityOptions.makeSceneTransitionAnimation() method.

相关代码如下:

// get the element that receives the click event
final View imgContainerView= findViewById(R.id.img_container);

// get thecommon element for the transition in this activity
final View androidRobotView= findViewById(R.id.image_small);

// define aclick listener
imgContainerView.setOnClickListener(newView.OnClickListener(){
    @Override
    public void onClick(View view){
        Intent intent = new Intent(this,Activity2.class);
        // create the transition animation - the images in the layouts
        // of both activities are defined withandroid:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView,"robot");
        // start the new activity
        startActivity(intent, options.toBundle());
    }
});


也可以使用View.setTransitionName() 来指定shared element。


5)使用多个shared element 来启动Activity

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1,"agreedName1"),
        Pair.create(view2,"agreedName2"));









你可能感兴趣的:(动画)