转载请注明 http://blog.csdn.net/eclipsexys 翻译自Developer Android,时间仓促,有翻译问题请留言指出,谢谢
在材料设计动画让用户与您的应用程序进行交互时,为他们的行为提供反馈,并提供可视化的连续性。该材料的主题提供了一些默认的动画按钮和活动过渡,而Android5.0(API等级21)以上,您可以自定义这些动画和创建新的:
在大多数情况下,你应该通过指定视图背景,在视图中的XML应用此功能:
?android:attr/selectableItemBackground for a bounded ripple ?android:attr/selectableItemBackgroundBorderless for a ripple that extends beyond the view
Reveal动画为用户提供视觉的连续性,当您显示或隐藏一组UI元素。该ViewAnimationUtils.createCircularReveal()方法,您可以设置动画clipping circle来显示或隐藏视图。
要使用此效果显示先前不可见的view:
// 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();
在材料设计应用程序的Activity通过运动来进行不同状态之间的转换。您可以指定自定义动画的进入和退出的过渡和Activity之间共享内容的转换。
Android5.0(API级别21)支持这些进入和退出的转换:
爆炸 - 从现场的中心移动的view。
幻灯片 - 移动视图或从场景的边缘。
褪色 - 通过改变其透明度添加或删除场景视图。
transition扩展了能见度类的任何变化都支持作为进入或退出转型。欲了解更多信息,请参阅该转换类的API参考。
Android5.0(API级别21)也支持这些共同的元素转换:
changeBounds - 动画处理目标View布局界限。
changeClipBounds - 动画处理目标View区域剪辑。
changeTransform - 动画处理目标View缩放和旋转。
changeImageTransform - 动画处理改变目标图像的大小和比例。
当您在应用程启用Activity转变时,默认以交叉渐变过渡的进入和退出Activity的启动。
<style name="BaseAppTheme" parent="android:Theme.Material"> <!-- enable window content transitions --> <item name="android:windowContentTransitions">true</item> <!-- specify enter and exit transitions --> <item name="android:windowEnterTransition">@transition/explode</item> <item name="android:windowExitTransition">@transition/explode</item> <!-- specify shared element transitions --> <item name="android:windowSharedElementEnterTransition"> @transition/change_image_transform</item> <item name="android:windowSharedElementExitTransition"> @transition/change_image_transform</item> </style>
<!-- res/transition/change_image_transform.xml --> <!-- (see also Shared Transitions below) --> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeImageTransform/> </transitionSet>
// 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());
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
// 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"); // start the new activity startActivity(intent, options.toBundle()); } });
为了扭转场景过渡动画,当你完成了第二个活动,叫Activity.finishAfterTransition()方法,而不是Activity.finish()。
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(view1, "agreedName1"), Pair.create(view2, "agreedName2"));
在材料设计的动画依赖于曲线插补时间和空间上的运动模式。采用Android5.0(API等级21)以上,则可以定义自定义定时曲线和曲线运动模式的动画。
该PathInterpolator类是基于贝塞尔曲线或路径对象上的新插值。该插补指定一个1x1正方形的运动曲线,用(0,0)定位点和(1,1)和控制点使用构造函数的参数指定。您也可以定义一个路径插补为XML资源:
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:controlX1="0.4" android:controlY1="0" android:controlX2="1" android:controlY2="1"/>
@interpolator/fast_out_linear_in.xml @interpolator/fast_out_slow_in.xml @interpolator/linear_out_slow_in.xml
ObjectAnimator mAnimator; mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path); ... mAnimator.start();
该StateListAnimator类可以定义动画运行时的视图状态发生改变。下面的示例演示如何为XML资源定义一个StateListAnimator:
<!-- animate the translationZ property of a view when pressed --> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <set> <objectAnimator android:propertyName="translationZ" android:duration="@android:integer/config_shortAnimTime" android:valueTo="2dp" android:valueType="floatType"/> <!-- you could have other objectAnimator elements here for "x" and "y", or other properties --> </set> </item> <item android:state_enabled="true" android:state_pressed="false" android:state_focused="true"> <set> <objectAnimator android:propertyName="translationZ" android:duration="100" android:valueTo="0" android:valueType="floatType"/> </set> </item> </selector>
<!-- res/drawable/myanimstatedrawable.xml --> <animated-selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- provide a different drawable for each state--> <item android:id="@+id/pressed" android:drawable="@drawable/drawableP" android:state_pressed="true"/> <item android:id="@+id/focused" android:drawable="@drawable/drawableF" android:state_focused="true"/> <item android:id="@id/default" android:drawable="@drawable/drawableD"/> <!-- specify a transition --> <transition android:fromId="@+id/default" android:toId="@+id/pressed"> <animation-list> <item android:duration="15" android:drawable="@drawable/dt1"/> <item android:duration="15" android:drawable="@drawable/dt2"/> ... </animation-list> </transition> ... </animated-selector>
矢量可绘制具有可扩展性又不失清晰。该AnimatedVectorDrawable类,您可以设置动画的矢量绘制的属性。
你通常在三个XML文件中定义动画矢量可绘制对象:
A vector drawable with the <vector> element in res/drawable/ An animated vector drawable with the <animated-vector> element in res/drawable/ One or more object animators with the <objectAnimator> element in res/anim/
group
>的属性和<path
>元素。 <group>元素定义了一组路径或小组,并在<path
>元素定义要绘制的路径。 <!-- res/drawable/vectordrawable.xml --> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600"> <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="v" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
<!-- res/drawable/animvectordrawable.xml --> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vectordrawable" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> <target android:name="v" android:animation="@anim/path_morph" /> </animated-vector>
<!-- res/anim/rotation.xml --> <objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
<!-- res/anim/path_morph.xml --> <set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" android:valueType="pathType" /> </set>
Creating Apps With Material Design —— Defining Custom Animations
原文地址:http://blog.csdn.net/eclipsexys/article/details/40297135