Android中的Material design animation

Material Design
Material Design是Google总结的一套具有创新性和符合科学的视觉规范,其中包含动画、排版,控件、资源、样式等。
官方介绍https://material.google.com/#

Material Design Animation
针对动画的一套具有创新性和符合科学的视觉规范

实际使用:
自然的加减速、用户的输入反馈、生动的场景切换动画、连贯的图标渐变动画

提供的效果:
(1)、触摸反馈
(2)、揭露效果
(3)、曲线运动
(4)、视图状态改变
(5)、可绘制矢量动画】
(6)、Activity切换动画

一、触摸反馈
(1)有界限的波纹,仅在View内

 android:background="?android:attr/selectableItemBackground"

(2)无界限的波纹,延伸在View内

android:background="?android:attr/selectableItemBackgroundBorderless"

(3)自定义类型
在Drawable中定义ripple标签的xml

<?xml version="1.0" encoding="utf-8"?>
<!-- A blue ripple drawn atop a drawable resource. -->
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ff0000ff">

    <item android:drawable="@mipmap/bg_custom_feedback" />
</ripple>

(4)取消波纹
background设置null或者其他颜色

android:background="@null"

注:5.0以上默认有波纹,5.0以下没有波纹

二、揭露效果

    private static void circularHideBox(final View view) {
        // get the center for the clipping circle
        Rect rect = new Rect();
        view.getLocalVisibleRect(rect);
        int cx = rect.left + rect.width() / 2;
        int cy = rect.top + rect.height() / 2;

        // get the initial radius for the clipping circle
        int initialRadius = view.getWidth();

        // create the animation (the final radius is zero)
        Animator anim = ViewAnimationUtils.createCircularReveal(view, cx, cy, initialRadius, 0);
        anim.setDuration(1000);

        // make the view invisible when the animation is done
        anim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                view.setVisibility(View.INVISIBLE);
            }
        });

        // start the animation
        anim.start();
    }

三、曲线运动
示例代码

    private void initMaterialDesignAnimation() {
        ImageView materialButton = (ImageView) findViewById(R.id.material_ball);

        Path path = new Path();
        //path.moveTo(0, 100);
        path.lineTo(100, 600);
        path.cubicTo(200, 200, 300, 200, 400, 600);
        path.cubicTo(500, 400, 550, 400, 600, 600);

        PathInterpolator pathInterpolator = new PathInterpolator(0.8f, 0f, 1f, 1f);
        final ObjectAnimator animator = ObjectAnimator.ofFloat(materialButton, View.X, View.Y, path);
        animator.setInterpolator(pathInterpolator);
        animator.setDuration(1000);
        materialButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                animator.start();
            }
        });
    }

四、视图状态改变
xml文件

    <View
        android:id="@+id/animate_view_state_changes"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"
        android:background="@android:color/holo_orange_light"
        android:clickable="true"
        android:stateListAnimator="@animator/anim_view_state_changes"
        android:textColor="@android:color/holo_green_dark"/>

drawable文件

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="4dp"
            android:valueType="floatType"/>
    </item>

    <item
        android:state_pressed="false">
        <objectAnimator
            android:duration="100"
            android:propertyName="translationZ"
            android:valueTo="0"
            android:valueType="floatType"/>
    </item>
</selector>

代码文件

        View stateChangeView = findViewById(R.id.animate_view_state_changes);
        StateListAnimator stateLAnim = AnimatorInflater.loadStateListAnimator(this,
                R.animator.anim_view_state_changes);
        stateChangeView.setStateListAnimator(stateLAnim);

五、可绘制的矢量动画
1、静态矢量图
在res/drawable下使用定义的矢量图

<?xml version="1.0" encoding="utf-8"?>
<vector

    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <!-- viewportHeight ,viewportWidth为定义一个坐标系-->
    <!--group为path的集合-->
    <group
        android:name="menu_icon"
        android:pivotX="50"
        android:pivotY="50"
        android:rotation="0">
        <!--大写字母为绝对坐标,小写字母为相对坐标,z意思是闭合,m为moveto l 为lineto -->
        <path
            android:name="menu_icon_path"
            android:pathData="@string/path_icon_menu"
            android:strokeColor="@android:color/holo_red_dark"
            android:strokeLineCap="round"
            android:strokeWidth="@integer/stroke_width"/>
    </group>
</vector>

2、动态矢量图
(1)在res/animator使用标签,定义单个动画资源

<?xml version="1.0" encoding="utf-8"?>

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:propertyName="rotation"
    android:duration="1000"
    android:valueFrom="0"
    android:valueTo="180"/>

(2)在res/drawable 使用标签,组合多个动画资源

<?xml version="1.0" encoding="utf-8"?>

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_icon">

    <target
        android:name="menu_icon_path"
        android:animation="@animator/anim_menu_to_arrow"/>
    <target
        android:name="menu_icon"
        android:animation="@animator/anim_rotate"/>
</animated-vector>

相关资料:
https://www.w3.org/TR/SVG11/paths.html

六、Activity的转场动画
(1)启动transition api

        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

(2)分别在调用与被调用的Activity中设置exit和enter transition
Activity1

 Slide slideExitTransition = new Slide(Gravity.RIGHT);
 getWindow().setExitTransition(slideExitTransition);

Activity2

Slide slideEnterTransition = new Slide(Gravity.BOTTOM);       getWindow().setEnterTransition(slideEnterTransition);

这里写图片描述
(3)Activity1调用Acitivity.startActivity(Intent intent,Bundle options)启动Activity

        Intent i = new Intent(Transition1Activity.this, Transition2Activity.class);
        ActivityOptions transitionActivityOptions =
                ActivityOptions.makeSceneTransitionAnimation(Transition1Activity.this);
        startActivity(i, transitionActivityOptions.toBundle());

(4)Acitivity2调用Activity.finishAfterTransition()触发返回动画

 finishAfterTransition();

7、Activity Share Element Transition
(1)AcitivityOptions中指定共享View和名称

        Intent i = new Intent(Transition1Activity.this, Transition2Activity.class);

        ActivityOptions transitionActivityOptions =
                ActivityOptions.makeSceneTransitionAnimation(
                        Transition1Activity.this,
                        Pair.create(mFabButton, "fab"),
                        Pair.create(mHeader, "holder1"));

        startActivity(i, transitionActivityOptions.toBundle());

(2)布局文件中指定共享View的transitionName
Activity1布局文件

    <View
        android:id="@+id/activity_transition_header"
        android:layout_width="match_parent"
        android:layout_height="144dp"
        android:background="?android:colorPrimary"
        android:transitionName="holder1"/>

Activity2布局文件

    <View
        android:id="@+id/activity_transition_header"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="?android:colorPrimary"
        android:transitionName="holder1"/>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值