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>