您的位置:首页 > 其它

Material Design - View state changes

2015-10-30 10:34 337 查看
在 5.0 上 提供了很多动画效果方面的 优化 和 设置

在android5.0(api21)及以上,允许自定义这些动画:

1. Touch feedback 触摸反馈

2. Circular Reveal 圆形显示

3. Activity transitions 过渡动画

4. Curved motion 曲线运动

5. View state changes 视图状态变化

5. View state changes 视图状态变化

StateListAnimator类可以让你定义动画集,能在view状态改变时工作

5.1 设置xml的方式, (有点像 shape 的方式,当按下时设置成什么样式,失去焦点时是什么样式)

<!-- 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>


设置代码的方式:

参考代码APIdemos- Shadow Card Drag 和 Shadow Card stack

android-sdk-windows\samples\android-21\legacy\ApiDemos\src\com\example\android\apis\graphics\ShadowCardDrag.java

case MotionEvent.ACTION_MOVE:

//动态在代码中 设置 View的  X Y Z                      mCard.setTranslationX(event.getX() - downX);                      mCard.setTranslationY(event.getY() - downY);

if (mTiltEnabled) {                                     mDragState.onMove(event.getEventTime(),          event.getX(), event.getY());
}


在上例中,为一个View添加视图状态动画,定义了一个使用selector元素的xml资源,并赋给view的android:stateListAnimator属性。如要在代码中为View指定视图状态动画,可使用

//加载xml资源
AnimationInflater.loadStateListAnimator()
//将其指定给View
View.setStateListAnimator()


当你的主题继承了Material主题,按钮默认拥有了z动画。为了避免这种行为在你的按钮,设置

android:stateListAnimator=null

AnimatedStateListDrawable

允许您创建图片以显示关联View的状态改变动画。一些系统的Widget,在5.0上默认使用这些动画。下面的例子显示了如何定义一个AnimatedStateListDrawable作为XML资源:

其实质呢就是:

1.你定义好每种不同的状态显示的图片,

2.再定义 不同状态间转换的动画

示例代码:

<!-- 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>


Animate Vector Drawables 矢量图片动画

矢量图片是可伸缩而不失真的。AnimatedVectorDrawable类让你能使一个矢量图动起来。

通常在三种xml定义动态的矢量图:

·使用元素的矢量图,在res/drawable/

·一个动态矢量图,使用元素,在res/drawable/

·一个或多个object animator,使用元素,在res/animator/

矢量图可以定义的属性元素有和,定义了一个的集合,或者子,定义绘制的路径。

定义矢量图时,可以给和指定一个名字,示例如下:

<!-- 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>


以下例子代表了一个 ObjectAnimator or AnimatorSet 对象:动作为旋转360度

<!-- res/anim/rotation.xml -->
<objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />


下面的例子表示矢量图path从一个图形到另一个。两种渐变路径必须一致:他们必须具有相同数量的命令和相同数量的每个命令的参数:

<!-- 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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: