MaterialDesign-Material Design动画效果(四)

Ripple波纹点击效果

控件中设置波纹点击效果

android:background="?android:selectableItemBackgroundBorderless"//无边界android:background="?android:selectableItemBackground"//以控件大小为边界    <Button    android:background="?android:selectableItemBackgroundBorderless"    android:layout_width="300dp"    android:layout_height="300dp"/>

也可以自定义波纹点击效果

在drawable创建一个xml文件<?xml version="1.0" encoding="utf-8"?><ripple xmlns:android="http://schemas.android.com/apk/res/android"android:color="#F00" //波纹颜色>    <item >        <shape android:shape="oval">            <solid android:color="?android:colorAccent"/>//默认的颜色        </shape>    </item></ripple>//在控件中引用<Button    android:background="@drawable/ripple"    android:layout_width="300dp"    android:layout_height="300dp"/>

Circular Reveal

效果:将一个view以圆的形式展开,显示出来

核心api

class ViewAnimatorUtils://xy 圆点的坐标轴 view 被操纵的view public static Animator createCircularReveal(View view        ,int centerX,int centerY,float startRadius,float endRadius){ new RevealAnimator(view,centerX,centerY,startRadius,endRadius);}

demo

    iv_oval = (ImageView) findViewById(R.id.iv_oval);    iv_oval.setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View v) {        //创建一个以图片中心,以圆的形式慢慢展开的动画效果            Animator animator = ViewAnimationUtils.createCircularReveal(iv_oval                    , iv_oval.getWidth() / 2, iv_oval.getHeight() / 2,  0,iv_oval.getWidth());            animator.setInterpolator(new AccelerateDecelerateInterpolator());            animator.setDuration(1000);            animator.start();        }    });    iv_rect = (ImageView) findViewById(R.id.iv_rect);    iv_rect.setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View v) {        //创建一个以图片左上角wield中心的圆,以圆的形式慢慢展开的效果            Animator animator = ViewAnimationUtils.createCircularReveal(iv_rect                    , 0, 0,  0,(float)Math.hypot(iv_rect.getWidth(),iv_rect.getHeight()));            animator.setInterpolator(new AccelerateDecelerateInterpolator());            animator.setDuration(1000);            animator.start();        }    });

View state change Animation

系统提供的 视图状态改变动画 来设置一个视图的状态切换动画

StateListAnimator点击动画效果

一般来说来设置点击效果时,会使用selector来设置点击效果
Android5.0后,可以设置动画来作为selector视图改变的效果

1.drawable中创建XX.xml文件<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_pressed="true">    <set>        <objectAnimator android:duration="@android:integer/config_shortAnimTime"                        android:propertyName="rotation"                        android:valueTo="360"                        android:valueType="floatType"            />    </set></item><item android:state_pressed="false">    <set>        <objectAnimator android:duration="@android:integer/config_shortAnimTime"                        android:propertyName="rotation"                        android:valueTo="0"                        android:valueType="floatType"            />    </set></item></selector>2.在控件中设置android:stateListAnimator属性    <Button    android:stateListAnimator="@drawable/state_list_animator"    android:layout_width="300dp"    android:layout_height="300dp"/>

animated-selector

需求:点击按钮(或floating action)实现酷炫的自定义的帧动画

1.首先需要准备一堆图片作为动画的每一帧2.在drawable中创建过渡动画<?xml version="1.0" encoding="utf-8"?><animated-selector xmlns:android="http://schemas.android.com/apk/res/android"><item    android:id="@+id/state_on"    android:state_checked="true">    <bitmap android:src="@drawable/time4"/></item><item    android:id="@+id/state_off"  //必须有一个默认状态,且必须在最后    >    <bitmap android:src="@drawable/time4"/></item><transition    android:fromId="@+id/state_on"    android:toId="@+id/state_off">    <animation-list>        <item android:duration="250">            <bitmap android:src="@drawable/time4"/>        </item>        <item android:duration="250">            <bitmap android:src="@drawable/time3"/>        </item>        <item android:duration="250">            <bitmap android:src="@drawable/time2"/>        </item>        <item android:duration="250">            <bitmap android:src="@drawable/time1"/>        </item>    </animation-list></transition><transition    android:fromId="@+id/state_off"    android:toId="@+id/state_on">    <animation-list>        <item android:duration="250">            <bitmap android:src="@drawable/time1"/>        </item>        <item android:duration="250">            <bitmap android:src="@drawable/time2"/>        </item>        <item android:duration="250">            <bitmap android:src="@drawable/time3"/>        </item>        <item android:duration="250">            <bitmap android:src="@drawable/time4"/>        </item>    </animation-list></transition></animated-selector>