首页 > 其他分享 >Android(Lollipop/5.0) Material Design(六) 自定义动画

Android(Lollipop/5.0) Material Design(六) 自定义动画

时间:2022-12-06 10:06:41浏览次数:78  
标签:5.0 动画 transition 定义 自定义 Material Activity android View


官网地址:https://developer.android.com/intl/zh-tw/training/material/animations.html

动画在Material设计中,为用户与app交互反馈他们的动作行为和提供了视觉上的连贯性。Material主题为Buttons和Activity的过渡提供了一些默认的动画,在android5.0(api21)及以上,允许自定义这些动画:

· Touch feedback  触摸反馈

· Circular Reveal  循环显示

· Activity transitions  活动过渡

· Curved motion       曲线运动

· View state changes  视图状态变化


Customize Touch Feedback  自定义触摸反馈动画


在Material设计中,触摸反馈提供了一种在用户与UI进行交互时 即时可视化的确认接触点。关于buttons默认的触摸反馈动画,使用了RippleDrawable类,用一个波纹(涟漪)效果在两种不同的状态间过渡。

在多数情况下,你需要在view的xml定义中,定义它的背景:

?android:attr/selectableItemBackground                              有界限的波纹    

?android:attr/selectableItemBackgroundBorderless             延伸到view之外的波纹     note:该属性为api21添加

或者,你可以用xml定义一个RippleDrawable类型的资源,并使用波纹属性。

你可以指定一个颜色给RippleDrawable对象,以改变它的默认触摸反馈颜色,使用主题的android:colorControlHighlight属性。


Use the Reveal Effect  使用展现效果

ViewAnimationUtils.createCircularReveal()方法使您能够激活一个循环显示或隐藏一个视图。

显示:


Android(Lollipop/5.0) Material Design(六) 自定义动画_xml

隐藏


Android(Lollipop/5.0) Material Design(六) 自定义动画_Material Design_02


Customize Activity Transitions  定义Activity的过渡动画

·一个enter transition表示,Activity的进入场景。比如一个explode enter transition,表示Views的进入场景:飞快的从外部向屏幕中心移动。

·一个exit transition表示,Activity的离开场景。比如一个explode exit transition,表示Views的离开场景:从屏幕中心散开。

·一个share transition表示,在两个Activity间共享它们的activity transtion。比如,两个Activity有一个相同的图片,而位置和尺寸不同,使用changeImageTransform这个共享元素,能在Activity间平稳的转换和缩放图片。


android5.0(api21)及以上,支持这些效果的transition(过渡):


爆炸——移动视图或从场景中心。class Explode

滑行——移动视图或从一个场景的边缘。class Slide

淡入淡出——添加或从场景中删除视图通过改变其透明度。 class Fade

也支持这些共享元素(都有对应的class)转换:  changeBounds ——View的布局的边界变化。  changeClipBounds——View的裁剪边界变化。  changeTransform——View的旋转、缩放边界变化  changeImageTransform——目标图像的尺寸和缩放变化。  当启用活动在你的应用程序转换,默认同时淡出淡入之间的过渡是激活进入和退出活动。


Specify custom transitions 自定义过渡动画


首先需要在定义主题的style中,使用android:windowContentTransitions属性,声明使用transitions。也可以定义使用的Transitions:

<?xmlversion="1.0"encoding="utf-8"?>

<resources>

    <stylename="MyTheme"parent="@android:style/Theme.Material">

        <!-- enable window content transitions -->

        <itemname="android:windowContentTransitions">true</item>

        <!-- specify enter and exit transitions -->

<itemname="android:windowEnterTransition">@android:transition/explode</item>

<itemname="android:windowExitTransition">@android:transition/explode</item>

        <!-- specify shared element transitions -->

        <itemname="android:windowSharedElementEnterTransition">@android:transition/move</item>

        <itemname="android:windowSharedElementExitTransition">@android:transition/slide_top</item>

    </style>

</resources>


注:每个transition的xml中定义的就是一组change的元素

在代码中启用transitions:

Android(Lollipop/5.0) Material Design(六) 自定义动画_矢量图_03


在代码中设置transitions的方法还有

​Window.setEnterTransition()​​​​Window.setExitTransition()​​​​Window.setSharedElementEnterTransition()​​​​Window.setSharedElementExitTransition()​

要想尽快进行transitions过渡,可在Activity中调用​​Window.setAllowEnterTransitionOverlap()​​。


Start an activity using transitions 使用过渡启动Activity


如果你要启用transtions并设置为一个Activity的结束exit transtion,当你以如下方式启动另一个Activity时,它将被激活:



Android(Lollipop/5.0) Material Design(六) 自定义动画_xml_04

当你在另一个Activity中设置了enter transtion,在其启动时,它将被激活。想要disable transitions,那么在启动另一个Activity时:



startActivity(intent,null);  //传递null 的options bundle



Start an activity with a shared element  使用一个共享元素启动Acitvity


1.在主题中启用window content 

2.在style中定义共享的过渡transitions

3.定义transitions的xml资源  res/transition

4.在layout中调用android:transitionName="" 设置第3步中定义的名字

5.调用 ​​ActivityOptions.makeSceneTransitionAnimation()​​生成相应的ActivityOptions对象。​​​

Android(Lollipop/5.0) Material Design(六) 自定义动画_android_05

在代码中可以用View.setTransitionName()来设置过渡动画

当你要关闭第二个Activity时,要反转过渡动画,那么可以调用Activity.finishAfterTransition()方法,而不是Activity.finish()。


Start an activity with multiple shared elements  用多共享元素启动Activity

若两个Activity拥有不只一个的共享元素,要在它们之间开始场景transition动画,在它们的layout中都要使用 ​​android:transitionName​​ (或在Activity中代码中调用View.setTransitionName() )来定义,并创建一个如下的 ​​ActivityOptions​​ 对象:

Android(Lollipop/5.0) Material Design(六) 自定义动画_Material Design_06



Use Curved Motion 使用曲线运动

在Material设计中的动画,依赖于曲线的时间插入值和空间运动模式。在android5.0(api21)及以上,可以自定义动画时间曲线和曲线运动模式。

PathInterpolator类是一个新的基于贝塞尔曲线或路径对象的插入器。这个插入器指定了一个1 x1正方形运动曲线,它使用(0,0)为锚点,(1,1)为控制点,作为构造函数的参数。你也可以定义一个path interpolator的xml资源:

Android(Lollipop/5.0) Material Design(六) 自定义动画_android_07


系统提供了三种基本的曲线,XML资源:


​@interpolator/fast_out_linear_in.xml​​​​@interpolator/fast_out_slow_in.xml​​​​@interpolator/linear_out_slow_in.xml​

您可以用PathInterpolator对象作Animator.setInterpolator()方法的参数。

ObjectAnimator类有新构造函数使您能够激活坐标沿着一个path同时使用两种或两种以上的属性。比如,如下的animator就使用了一个path 对象,来同时操作View的x和y属性:

Android(Lollipop/5.0) Material Design(六) 自定义动画_xml_08

Animate View State Changes  视图状态改变动画



StateListAnimator类允许您定义动画运行时视图的状态变化。下面的例子演示如何在xml中定义一个StateListAnimator:

Android(Lollipop/5.0) Material Design(六) 自定义动画_矢量图_09


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

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

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

Android(Lollipop/5.0) Material Design(六) 自定义动画_Material Design_10


Animate Vector Drawables  矢量图片动画

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

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

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

·一个动态矢量图,使用<animated-vector>元素,在res/drawable/

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

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

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


Android(Lollipop/5.0) Material Design(六) 自定义动画_矢量图_11



在矢量动画中,引用矢量图定义的名字:

Android(Lollipop/5.0) Material Design(六) 自定义动画_矢量图_12

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

Android(Lollipop/5.0) Material Design(六) 自定义动画_xml_13

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


Android(Lollipop/5.0) Material Design(六) 自定义动画_矢量图_14

​更多详见:​​AnimatedVectorDrawable​

.

标签:5.0,动画,transition,定义,自定义,Material,Activity,android,View
From: https://blog.51cto.com/u_11407799/5914563

相关文章

  • Android 自定义组件之如何实现自定义组件
    简介Android提供了用于构建UI的强大的组件模型。两个基类:View和ViewGroup。可用Widget的部分名单包括Button,TextView,EditText,ListView,CheckBox,RadioButton,Gallery,Spin......
  • Android 自定义标题栏Title Bar
    在Android自定义标题栏,步骤很简单:1.在onCreate方法中声明如下代码:requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);setContentView(R.id.activity_main);getWindow().......
  • 自定义命令(directive)
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scriptsrc="../vue.js"></script></head><body>......
  • 将自定义的 bat 文件设置成开机自启
    将自定义的bat文件设置成开机自启1、创建一个bat文件2、在win+R输入shell:startup3、将bat文件复制至该文件夹下即可。......
  • RocketMQ 5.0 可观测能力升级:Metrics 指标分析
    作者:玄珏​从消息的生命周期看可观测能力在进入主题之前先来看一下RocketMQ生产者、消费者和服务端交互的流程:messageproduceandconsumeprocessRocketMQ的消息是按照......
  • RocketMQ 5.0 可观测能力升级:Metrics 指标分析
    作者:玄珏从消息的生命周期看可观测能力在进入主题之前先来看一下RocketMQ生产者、消费者和服务端交互的流程:messageproduceandconsumeprocessRocketMQ的消息是......
  • Influxdb 接入HTTP终端实现报警自定义
    十年河东,十年河西,莫欺少年穷学无止境,精益求精influxdb的报警由以下三种组成   1、创建检查   红色框为绝对值检查,绿色框为【死人检查】,这里选择绝对值检......
  • IDEA配置自定义标签,实现高亮注释~
    为什么要写这么一篇博客呢?不知道大家有没有这样的一种苦恼,就是在写代码的时候遇到复杂的核心的代码,想加一个特殊的注释方便后期自己或者同事查看,但是这玩意IDEA好像只给我......
  • 【ES系列七】——ik自定义分词词库
    一、业务场景  在利用ik分词的过程中,当ik的分词规则不满足我们的需求了,这个时候就可以利用ik的自定义词库进行筛选,举个例子:当我要将“我是中国人,我想测试一下”这句话......
  • 直播系统app源码,自定义九宫格,计算器布局,验证码认证
    直播系统app源码,自定义九宫格,计算器布局,验证码认证1、先写几个接收验证码的文本框 returnScaffold(   backgroundColor:ColorsUtil.hexStringColor("#B1B1B1")......