Creating Apps With Material Design —— Defining Custom Animations

简介: 转载请注明 http://blog.csdn.net/eclipsexys 翻译自Developer Android,时间仓促,有翻译问题请留言指出,谢谢定义动画在材料设计动画让用户与您的应用程序进行交互时,为他们的行为提供反馈,并提供可视化的连续性。

转载请注明 http://blog.csdn.net/eclipsexys 翻译自Developer Android,时间仓促,有翻译问题请留言指出,谢谢


定义动画

在材料设计动画让用户与您的应用程序进行交互时,为他们的行为提供反馈,并提供可视化的连续性。该材料的主题提供了一些默认的动画按钮和活动过渡,而Android5.0(API等级21)以上,您可以自定义这些动画和创建新的: 


    触摸反馈 
    通告显示 
    活动转变 
    曲线运动 
    视图状态更改 

自定义触摸反馈 


触摸反馈在材料设计提供了一种瞬时视觉确认在接触点上,当用户与用户界面元素进行交互。默认的触摸反馈的动画按钮,使用新的RippleDrawable类来实现不同状态之间的转换与产生连锁反应动画。 

在大多数情况下,你应该通过指定视图背景,在视图中的XML应用此功能:


    ?android:attr/selectableItemBackground for a bounded ripple
    ?android:attr/selectableItemBackgroundBorderless for a ripple that extends beyond the view


或者,你可以定义一个RippleDrawable为使用波纹元素的XML资源。 

您可以指定一种颜色RippleDrawable对象。要更改默认的触摸反馈的颜色,使用的主题的android:colorControlHighlight属性。


使用Reveal Effect


Reveal动画为用户提供视觉的连续性,当您显示或隐藏一组UI元素。该ViewAnimationUtils.createCircularReveal()方法,您可以设置动画clipping circle来显示或隐藏视图。 

要使用此效果显示先前不可见的view:

// previously invisible view
View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the final radius for the clipping circle
int finalRadius = myView.getWidth();

// create and start the animator for this view
// (the start radius is zero)
Animator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
anim.start();

要使用此效果隐藏先前看到的view:

// previously visible view
final View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

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

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

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

// start the animation
anim.start();


自定义Activity transitions


在材料设计应用程序的Activity通过运动来进行不同状态之间的转换。您可以指定自定义动画的进入和退出的过渡和Activity之间共享内容的转换。 

Android5.0(API级别21)支持这些进入和退出的转换: 

    爆炸 - 从现场的中心移动的view。 
    幻灯片 - 移动视图或从场景的边缘。 
    褪色 - 通过改变其透明度添加或删除场景视图。 

transition扩展了能见度类的任何变化都支持作为进入或退出转型。欲了解更多信息,请参阅该转换类的API参考。 

Android5.0(API级别21)也支持这些共同的元素转换: 

    changeBounds - 动画处理目标View布局界限。 
    changeClipBounds - 动画处理目标View区域剪辑。 
    changeTransform - 动画处理目标View缩放和旋转。 
    changeImageTransform - 动画处理改变目标图像的大小和比例。 

当您在应用程启用Activity转变时,默认以交叉渐变过渡的进入和退出Activity的启动。



指定自定义的转换 


首先,当你定义一个风格,继承了材料的主题属性使窗口内容转换 Android:windowContentTransitions。您也可以指定进入,退出,并指定您定义的样式共享元素的转换:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowContentTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

在这个例子中,change_image_transform过渡的定义如下:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

该changeImageTransform元素对应于ChangeImageTransform类。欲了解更多信息,请参阅转换的API参考。 

为确保 窗口移动动画实现,需要调用Window.requestFeature()方法:

// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());

要指定你的代码转换,调用这些方法与Transition对象: 

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

该setExitTransition()和setSharedElementExitTransition()方法定义为调用活动的退出过渡。该setEnterTransition()和setSharedElementEnterTransition()方法定义了称为活动的输入过渡。 

为了得到一个过渡的完整效果,您必须启用这两个主叫和被叫的活动窗口中的内容转换。否则,调用活动将启动退出过渡,但随后你会看到一个窗口的过渡(如规模或褪色)。 

开始尽快的进入过渡,使用Window.setAllowEnterTransitionOverlap()方法被调用的Activity。这让你有更多戏剧性的进入过渡动画。 


使用转换开始活动 


如果启用转换并设置为Activity的退出过渡,当您启动另一个Activity时,如下的转变被激活:

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

如果您设置了进入转型的第二个活动,过渡也是该活动开始时激活。要禁用转换,当你开始另一项活动,提供了一个null的选项。 

实现一个共同的元素之间的屏幕过渡动画


    让你的主题窗口的内容转换。 
    指定你的风格的共享元素的过渡。 
    定义转换为XML资源。 
    指定一个共同的名字在两个布局与Android的共享元素:transitionName属性。 
    使用ActivityOptions.makeSceneTransitionAnimation()方法。

// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // start the new activity
        startActivity(intent, options.toBundle());
    }
});

对于您的代码生成共享动态视图,使用View.setTransitionName()方法在两个Activity中指定一个共同的元素名称。 

为了扭转场景过渡动画,当你完成了第二个活动,叫Activity.finishAfterTransition()方法,而不是Activity.finish()。 


启动有多个共享的元素的Activity 


为了使两项活动有多个共享的元素,定义了两种布局方式与Android的共享元素之间的场景过渡动画:transitionName属性(或使用View.setTransitionName()在这两个活动的方法),并创建一个ActivityOptions对象如下:

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));

使用Curves Motion

在材料设计的动画依赖于曲线插补时间和空间上的运动模式。采用Android5.0(API等级21)以上,则可以定义自定义定时曲线和曲线运动模式的动画。 

该PathInterpolator类是基于贝塞尔曲线或路径对象上的新插值。该插补指定一个1x1正方形的运动曲线,用(0,0)定位点和(1,1)和控制点使用构造函数的参数指定。您也可以定义一个路径插补为XML资源:

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.4"
    android:controlY1="0"
    android:controlX2="1"
    android:controlY2="1"/>

该系统提供的XML资源中的材料设计规范的三个基本曲线: 

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


你可以通过一个PathInterpolator对象的Animator.setInterpolator()方法。 

该ObjectAnimator类有新的构造函数,使您能够同时使用两种或两种以上的属性,在一次路径动画坐标。例如,下面的动画师使用Path对象进行动画视图的x和y属性:

ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();

视图动画状态改变


该StateListAnimator类可以定义动画运行时的视图状态发生改变。下面的示例演示如何为XML资源定义一个StateListAnimator:

<!-- animate the translationZ property of a view when pressed -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="@android:integer/config_shortAnimTime"
        android:valueTo="2dp"
        android:valueType="floatType"/>
        <!-- you could have other objectAnimator elements
             here for "x" and "y", or other properties -->
    </set>
  </item>
  <item android:state_enabled="true"
    android:state_pressed="false"
    android:state_focused="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="100"
        android:valueTo="0"
        android:valueType="floatType"/>
    </set>
  </item>
</selector>

要高度自定义的视图状态动画视图,定义使用XML资源文件中选择元素在这个例子中的动画,并将其分配给您的视图与Android:stateListAnimator属性。在代码分配一个状态表动画到一个视图中,使用AnimationInflater.loadStateListAnimator()方法,以及动画分配给你的View与View.setStateListAnimator()方法。 

当你的主题扩展了材料的主题,按钮都为Z动画默认。为了避免你的按钮此问题,设置了android:stateListAnimator属性来@null。 

该AnimatedStateListDrawable类用于创建,显示相关的视图状态更改的动画可绘。默认情况下,一些安卓5.0系统部件的使用这些动画。下面的示例演示如何为XML资源定义一个AnimatedStateListDrawable:

<!-- res/drawable/myanimstatedrawable.xml -->
<animated-selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- provide a different drawable for each state-->
    <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
        android:state_pressed="true"/>
    <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
        android:state_focused="true"/>
    <item android:id="@id/default"
        android:drawable="@drawable/drawableD"/>

    <!-- specify a transition -->
    <transition android:fromId="@+id/default" android:toId="@+id/pressed">
        <animation-list>
            <item android:duration="15" android:drawable="@drawable/dt1"/>
            <item android:duration="15" android:drawable="@drawable/dt2"/>
            ...
        </animation-list>
    </transition>
    ...
</animated-selector>


Animate Vector Drawables


矢量可绘制具有可扩展性又不失清晰。该AnimatedVectorDrawable类,您可以设置动画的矢量绘制的属性。 

你通常在三个XML文件中定义动画矢量可绘制对象: 

    A vector drawable with the <vector> element in res/drawable/
    An animated vector drawable with the <animated-vector> element in res/drawable/
    One or more object animators with the <objectAnimator> element in res/anim/


矢量动画可绘制对象可以动画的< group>的属性和< path>元素。 < group>元素定义了一组路径或小组,并在< path>元素定义要绘制的路径。 

当你定义你想要的动画矢量绘制,使用android:name属性为唯一的名称分配给组和路径,这样你就可以把它们从你的动画定义。例如:

<!-- res/drawable/vectordrawable.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

动画绘制矢量的定义是指通过他们的名字矢量绘制的组和路径:

<!-- res/drawable/animvectordrawable.xml -->
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@anim/rotation" />
    <target
        android:name="v"
        android:animation="@anim/path_morph" />
</animated-vector>

动画的定义代表ObjectAnimator或AnimatorSet对象。在这个例子中,第一动画旋转目标组360度:

<!-- res/anim/rotation.xml -->
<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

在本实施例中的第二动画摇身一变载体可拉伸的路径从一个形状到另一种。两个路径必须是变形兼容:它们必须具有相同数目的命令和每个命令的参数的数量相同。

<!-- res/anim/path_morph.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

ps:path的绘制,路径写法比较复杂,需要使用SVG编辑器

目录
相关文章
|
缓存 API 数据库
Reading:一款不错的Material Desgin风格的Kotlin版本的开源APP
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/81946831 Reading https://github.com/Hankkin/Reading 简介 很久不见,重新拾起博客吧,今天分享一个开源APP-Reading,项目的初衷是因为自己平时翻文章,但是公众号又经常忘记看,自己索性搞一个APP吧,顺便练一下Kotlin。
1407 0
|
Android开发
仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)
在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的缺陷,手指和鼠标箭头最大的区别是在于前者有温度和感觉的,这时候Material Design应运而生。
1613 0
|
存储 Web App开发 Android开发
基于Material Design设计的分享文字图片的APP
写在前面:这个项目是自己当时为了准备面试而做的,由于时间匆忙,水平有限,项目多多少少存在一些问题。代码的整洁性与复用性,以及整体架构的搭建都不尽人意,大家看看里面的一些效果就好。
1281 0
|
Android开发
一款基于Material Desgin设计的APP
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/50413625 源码小编已经上传到github上了,求star啊 https://github.
981 0
|
Android开发 数据格式 XML
Android Material Design TabLayout属性app:tabMode和app: tabGravity
Android Material Design TabLayout属性app:tabMode和app: tabGravity Android Material Design 中的TabLayout有两个比较有用的属性 app:tabMode、app:tabGravity, (1)app:tabMode有两个值:fixed和scrollable。
1690 0
|
API Android开发
Creating Apps With Material Design —— Maintaining Compatibility
转载请注明 http://blog.csdn.net/eclipsexys 翻译自Developer Android,时间仓促,有翻译问题请留言指出,谢谢 保持兼容性 如material design和自定义活动的过渡部分材料设计功能只能在Android5.0(API等级21)以上。
802 0
|
Android开发 iOS开发
让你的 APP换上Material Design
转自  :http://www.jianshu.com/p/f22c0f50ac3f# 字数3293 阅读1357 评论15 喜欢60 Material Design 我的更多 android 博文,关注作者~每周更新一篇 Android干货博文http://xuyushi.github.io/archives/ 吐槽 作为一个 And
1872 0
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
774 1
|
7天前
|
JSON 缓存 前端开发
HarmonyOS NEXT 5.0鸿蒙开发一套影院APP(附带源码)
本项目基于HarmonyOS NEXT 5.0开发了一款影院应用程序,主要实现了电影和影院信息的展示功能。应用包括首页、电影列表、影院列表等模块。首页包含轮播图与正在热映及即将上映的电影切换显示;电影列表模块通过API获取电影数据并以网格形式展示,用户可以查看电影详情;影院列表则允许用户选择城市后查看对应影院信息,并支持城市选择弹窗。此外,项目中还集成了Axios用于网络请求,并进行了二次封装以简化接口调用流程,同时添加了请求和响应拦截器来处理通用逻辑。整体代码结构清晰,使用了组件化开发方式,便于维护和扩展。 该简介概括了提供的内容,但请注意实际开发中还需考虑UI优化、性能提升等方面的工作。
51 11
|
4天前
|
前端开发 数据库 UED
uniapp开发,前后端分离的陪玩系统优势,陪玩app功能特点,线上聊天线下陪玩,只要4800
前后端分离的陪玩系统将前端(用户界面)和后端(服务器逻辑)分开开发,前者负责页面渲染与用户交互,后者处理数据并提供接口。该架构提高开发效率、优化用户体验、增强可扩展性和稳定性,降低维护成本,提升安全性。玩家可发布陪玩需求,陪玩人员发布服务信息,支持在线聊天、预约及线下陪玩功能,满足多样化需求。[演示链接](https://www.51duoke.cn/games/?id=7)

热门文章

最新文章