程序员人生 网站导航

Android(Lollipop/5.0) Material Design(六) 自定义动画

栏目:互联网时间:2014-11-18 08:34:20

官网地址:https://developer.android.com/intl/zh-tw/training/material/animations.html


动画在Material设计中,为用户与app交互反馈他们的动作行动和提供了视觉上的联贯性。Material主题为Buttons和Activity的过渡提供了1些默许的动画,在android5.0(api21)及以上,允许自定义这些动画:

・ Touch feedback  触摸反馈

・ Circular Reveal  循环显示

・ Activity transitions  活动过渡

・ Curved motion       曲线运动

・ View state changes  视图状态变化

Customize Touch Feedback  自定义触摸反馈动画

在Material设计中,触摸反馈提供了1种在用户与UI进行交互时 即时可视化的确认接触点。关于buttons默许的触摸反馈动画,使用了RippleDrawable类,用1个波纹(涟漪)效果在两种不同的状态间过渡。

在多数情况下,你需要在view的xml定义中,定义它的背景:

?android:attr/selectableItemBackground                              有界限的波纹    

?android:attr/selectableItemBackgroundBorderless             延伸到view以外的波纹     note:该属性为api21添加

或,你可以用xml定义1个RippleDrawable类型的资源,并使用波纹属性。

你可以指定1个色彩给RippleDrawable对象,以改变它的默许触摸反馈色彩,使用主题的android:colorControlHighlight属性。

Use the Reveal Effect  使用展现效果

ViewAnimationUtils.createCircularReveal()方法使您能够激活1个循环显示或隐藏1个视图。

显示:

// previously invisible view View myView = findViewById(R.id.my_view); // get the center for the clipping circle int cx = (myView.getLeft() + myView.getRight()) / 2; int cy = (myView.getTop() + myView.getBottom()) / 2; // get the final radius for the clipping circle int finalRadius = myView.getWidth(); // create and start the animator for this view // (the start radius is zero) Animator anim =     ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius); anim.start();

隐藏

// previously visible view final View myView = findViewById(R.id.my_view); // get the center for the clipping circle int cx = (myView.getLeft() + myView.getRight()) / 2; int cy = (myView.getTop() + myView.getBottom()) / 2; // get the initial radius for the clipping circle int initialRadius = myView.getWidth(); // create the animation (the final radius is zero) Animator anim =     ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0); // make the view invisible when the animation is done anim.addListener(new AnimatorListenerAdapter() {     @Override     public void onAnimationEnd(Animator animation) {         super.onAnimationEnd(animation);         myView.setVisibility(View.INVISIBLE);     } }); // start the animation anim.start();

Customize Activity Transitions  定义Activity的过渡动画

・1个enter transition表示,Activity的进入场景。比如1个explode enter transition,表示Views的进入场景:飞快的从外部向屏幕中心移动。

・1个exit transition表示,Activity的离开场景。比如1个explode exit transition,表示Views的离开场景:从屏幕中心散开。

・1个share transition表示,在两个Activity间同享它们的activity transtion。比如,两个Activity有1个相同的图片,而位置和尺寸不同,使用changeImageTransform这个同享元素,能在Activity间安稳的转换和缩放图片。


android5.0(api21)及以上,支持这些效果的transition(过渡):

爆炸――移动视图或从场景中心。class Explode

滑行――移动视图或从1个场景的边沿。class Slide

淡入淡出――添加或从场景中删除视图通过改变其透明度。 class Fade

也支持这些同享元素(都有对应的class)转换:
  changeBounds ――View的布局的边界变化。
  changeClipBounds――View的裁剪边界变化。
  changeTransform――View的旋转、缩放边界变化
  changeImageTransform――目标图象的尺寸和缩放变化。
  当启用活动在你的利用程序转换,默许同时淡出淡入之间的过渡是激活进入和退出活动。

Specify custom transitions 自定义过渡动画

首先需要在定义主题的style中,使用android:windowContentTransitions属性,声明使用transitions。也能够定义使用的Transitions:

<?xmlversion="1.0"encoding="utf⑻"?>

<resources>

    <stylename="MyTheme"parent="@android:style/Theme.Material">

        <!-- enable window content transitions -->

        <itemname="android:windowContentTransitions">true</item>

        <!-- specify enter and exit transitions -->

        <itemname="android:windowEnterTransition">@android:transition/explode</item>

        <itemname="android:windowExitTransition">@android:transition/explode</item>

        <!-- specify shared element transitions -->

        <itemname="android:windowSharedElementEnterTransition">@android:transition/move</item>

        <itemname="android:windowSharedElementExitTransition">@android:transition/slide_top</item>

    </style>

</resources>

注:每一个transition的xml中定义的就是1组change的元素

在代码中启用transitions:

// inside your activity (if you did not enable transitions in your theme) getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); // set an exit transition getWindow().setExitTransition(new Explode());
在代码中设置transitions的方法还有

  • Window.setEnterTransition()
  • Window.setExitTransition()
  • Window.setSharedElementEnterTransition()
  • Window.setSharedElementExitTransition()
要想尽快进行transitions过渡,可在Activity中调用Window.setAllowEnterTransitionOverlap()。

Start an activity using transitions 使用过渡启动Activity

如果你要启用transtions并设置为1个Activity的结束exit transtion,当你以以下方式启动另外一个Activity时,它将被激活:
startActivity(intent,               ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
当你在另外一个Activity中设置了enter transtion,在其启动时,它将被激活。想要disable transitions,那末在启动另外一个Activity时:

startActivity(intent,null);  //传递null 的options bundle

Start an activity with a shared element  使用1个同享元素启动Acitvity


1.在主题中启用window content 

2.在style中定义同享的过渡transitions

3.定义transitions的xml资源  res/transition

4.在layout中调用android:transitionName="" 设置第3步中定义的名字

5.调用 ActivityOptions.makeSceneTransitionAnimation()生成相应的ActivityOptions对象。

// get the element that receives the click event final View imgContainerView = findViewById(R.id.img_container); // get the common element for the transition in this activity final View androidRobotView = findViewById(R.id.image_small); // define a click listener imgContainerView.setOnClickListener(new View.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 with android:transitionName="robot"         ActivityOptions options = ActivityOptions             .makeSceneTransitionAnimation(this, androidRobotView, "robot");       &n
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐