美文网首页
Android UI进阶之旅14--MaterialDesign

Android UI进阶之旅14--MaterialDesign

作者: 小楠总 | 来源:发表于2017-06-05 18:38 被阅读300次

MaterialDesign动画

MaterialDesign动画提供了一些标准的动画效果,下面一一介绍。

Touch Feedback(触摸反馈)

5.0+的手机是自带的。

通过给控件设置background的属性值即可实现:

<Button
    android:id="@+id/btn_test"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:background="?attr/selectableItemBackgroundBorderless"
    android:text="测试"/>

其中,selectableItemBackground是有边界的水波纹效果,selectableItemBackgroundBorderless是没有边界的水波纹效果。

可以修改背景颜色和水波纹的颜色,并且最好使用AppcompatActivity:

 <item name="colorControlHighlight">@color/colorPrimary_pink</item>
 <item name="colorButtonNormal">@color/material_blue_grey_800</item>

如果想改变个别控件的颜色的话,可以通过在外面再嵌套一层布局实现。

Reveal Effect(揭露效果)

例子:Activity的揭露出现的效果。主要使用ViewAnimationUtil工具类实现:

//圆形水波纹揭露效果
ViewAnimationUtils.createCircularReveal(
        view, //作用在哪个View上面
        centerX, centerY, //扩散的中心点
        startRadius, //开始扩散初始半径
        endRadius)//扩散结束半径

其中,扩散的半径通过勾股定理进行计算,例如:

(float) Math.hypot(view.getWidth() / 2, view.getHeight() / 2)

例子如下:

@Override
public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);

    view_root = (LinearLayoutCompat) findViewById(R.id.llc_test);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        Animator animator = ViewAnimationUtils.createCircularReveal(view_root, view_root.getWidth() / 2, view_root.getHeight() / 2, 0f, (float) Math.hypot(view_root.getWidth() / 2, view_root.getHeight() / 2));
        animator.setDuration(1000);
        animator.setInterpolator(new AccelerateInterpolator());
        animator.start();
    }
}

因为动画播放是依附在window上面的,而在Activity onCreate方法中调用时Window还未初始化完毕,因此需要在onWindowFocusChanged中执行动画。

Activity transition(Activity转场动画效果)

概念:两个Activity进行跳转的时候,转场动画。以前我们是通过overridePendingTransition方法实现。

主要使用ActivityOptions类。只支持API21以上的版本。版本判断会比较麻烦,谷歌很贴心 设计了一个兼容类:ActivityOptionsCompat(v4包中),但是此类在低版本上面并没有转场动画效果,只是解决了我们手动去判断版本的问题而已。

使用转换动画前提:需要给两个Activity都设置如下,让其允许使用转场动画。
//方法一:
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
//方法二:
修改主题:<item name="android:windowContentTransitions">true</item>

转场动画可以分为两大类:共享元素转换和普通的转换。

一、共享元素转换

单个元素:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
    ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(MDAnimActivity.this, iv_test, "test");
    Intent intent = new Intent(MDAnimActivity.this, MDAnimSceneTransitionActivity.class);
    startActivity(intent, options.toBundle());
}

多个元素同时转换:

ActivityOptionsCompat optionsCompat = ActivityOptionsCompat
        .makeSceneTransitionAnimation(this, Pair.create((View)iv1, "iv1"),Pair.create((View)bt, "bt"));
Intent intent = new Intent(this, SecondActivity.class);
startActivity(intent, optionsCompat.toBundle());

页面返回的时候系统自动实现了,请看FragmentActivity的onBackPressed方法:

@Override
public void onBackPressed() {
    if (!mFragments.getSupportFragmentManager().popBackStackImmediate()) {
        super.onBackPressed();
    }
}
二、非共享元素的转换

只有API 21才有下面自带效果,因此使用的时候需要判断版本号。

三种系统带的:滑动效果(Slide)、展开效果Explode、渐变显示隐藏效果Fade。下面以Fade为例子介绍:

//最好两个Activity都设置一些,效果会比较好看
Fade fade = new Fade();
fade.setDuration(1000);
getWindow().setExitTransition(fade);//出去的动画
getWindow().setEnterTransition(fade);//进来的动画


//如果有共享元素,可以设置共享元素,那么它就会按照共享元素动画执行,其他的子view就会按照Fade动画执行。
ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this);
Intent intent = new Intent(this, SecondActivity.class);
startActivity(intent, optionsCompat.toBundle());

Curved motion(曲线运动)

设计:view的平移旋转等效果结合Path、Interpolator插值器。

View State change (视图的状态改变)

例子:按下一个控件,例如FloatingActionButton,会有Z轴的阴影加深效果。

如果觉得我的文字对你有所帮助的话,欢迎关注我的公众号:

公众号:Android开发进阶

我的群欢迎大家进来探讨各种技术与非技术的话题,有兴趣的朋友们加我私人微信huannan88,我拉你进群交(♂)流(♀)

相关文章

网友评论

      本文标题:Android UI进阶之旅14--MaterialDesign

      本文链接:https://www.haomeiwen.com/subject/qkhwfxtx.html