MaterialDesign设计(下)

1.转场动画

Android开发过程中提供了一系列的新的过场动画,在旧版本里面,我们切换Activity大多都是使用下面这个api:

overridePendingTransition(enterAnim, exitAnim);

1.新版本的动画提供了类似的功能,动画效果更加柔顺,代码如下:

ActivityOptionsCompat optionsCompat=ActivityOptionsCompat
        .makeCustomAnimation(this,R.anim.enter_anim,R.anim.exit_anim);
Intent intent=new Intent(this,SecondActivity.class);
ActivityCompat.startActivity(this,intent,optionsCompat.toBundle());

2.还可以从某个控件开始慢慢放大到完全展示新的界面,代码如下:

    ActivityOptionsCompat optionsCompat=ActivityOptionsCompat
        .makeScaleUpAnimation(v,v.getWidth()/2,v.getHeight()/2,0,0);
    Intent intent=new Intent(this,SecondActivity.class);
    ActivityCompat.startActivity(this,intent,optionsCompat.toBundle());

该创建的代码为:

makeScaleUpAnimation (View source, int startX,int startY, int width,int height)

新的activity产生一个缩放的动画,这个动画的起点是,相对于source这个View 的左上角偏移(startX,startY)位置产生一个动画,新的activity的初始宽度和高度是width 和 height,0为新界面的全屏展示。

3.当然我们也可以通过将某个图片放大至全屏,然后打开新的界面:

BitmapDrawable bmp = (BitmapDrawable) ((ImageView) v).getDrawable();
ActivityOptionsCompat optionsCompat=
        ActivityOptionsCompat
                .makeThumbnailScaleUpAnimation(v,bmp.getBitmap(),0,0);
Intent intent=new Intent(this,SecondActivity.class);
ActivityCompat.startActivity(this,intent,optionsCompat.toBundle());

4.Android5.0后还提供了一个场景转换动画,废话不多说,看效果:

首先要给三个按钮一个设置统一的点击事件,代码如下:

BitmapDrawable bmp = (BitmapDrawable) ((ImageView) v).getDrawable();
ActivityOptionsCompat optionsCompat=
        ActivityOptionsCompat
                .makeSceneTransitionAnimation(this,v,"img");
Intent intent=new Intent(this,SecondActivity.class);
intent.putExtra("img",bmp.getBitmap());
ActivityCompat.startActivity(this,intent,optionsCompat.toBundle());

这里有必要解释下makeSceneTransitionAnimation方法,该方法的第2个参数指定需要从哪个View开始慢慢放大。第三个参数就是新界面的字符串标识,也就是新的SecondActivity布局中 有这样的标签属性transitionName:

<ImageView
    android:id="@+id/iv"
    ...
    android:transitionName="img"  />

在新的SecondActivity中,拿到传过来的数据进行显示:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT>=21){
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
    }
    setContentView(R.layout.activity_second);

    Bitmap bmp=(Bitmap) getIntent().getParcelableExtra("img");
    ImageView iv = (ImageView) findViewById(R.id.iv);
    iv.setImageBitmap(bmp);
}

除了可以分享2个界面中的同一元素,还可以分享多个控件元素。该操作基于makeSceneTransitionAnimation的另一个方法:

makeSceneTransitionAnimation(Activity activity,Pair<View, String>... sharedElements)

该效果是这样的:

首先给2个图片控件添加一个点击事件,并调用如下代码:

//第一个参数指定前一个场景的控件   第二个参数指定下一个场景的控件名称
Pair<View, String> a1 = Pair.create(findViewById(R.id.a1), "a1");
Pair<View, String> a4 = Pair.create(findViewById(R.id.a4), "a4");
ActivityOptionsCompat optionsCompat=
        ActivityOptionsCompat
                .makeSceneTransitionAnimation(this,a1,a4);
Intent intent=new Intent(this,SecondActivity.class);
ActivityCompat.startActivity(this,intent,optionsCompat.toBundle());

新界面的布局如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:transitionName="a4"
        android:src="@drawable/a4" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:transitionName="a1"
        android:src="@drawable/a1" />

</LinearLayout>

第2个界面中,为了让界面支持转场动画,代码如下:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT>=21){
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
    }
    setContentView(R.layout.activity_second);

}

2.场景动画

比如上面的动画,如果我们要实现该效果,就需要创建两个平移动画 写起来特别麻烦。不过我们可以使用21版本的场景动画来代替,只需要创建2个不同的场景就可以完成此事。

并且 第一次加载左边图片的时候 需要在容器中指定id.

<RelativeLayout
        ...
    android:id="@+id/root_view" />

假如第一个布局叫activity_one 第二个布局叫activity_two 那么变换场景的代码可以这么写:

if (Build.VERSION.SDK_INT>=21){
    mRootView = (ViewGroup) findViewById(R.id.root_view);
    Scene scene = Scene
            .getSceneForLayout(mRootView, R.layout.activity_two, this);
    //ChangeBounds指定了变化过程中的动画
    TransitionManager.go(scene,new ChangeBounds());
}

上面的代码靠的是TransitionManager的go方法。而如果你不添加ChangeBounds对象。动画是不会产生的。

Scene的创建也很简单 第一个参数指定需要更改布局的容器,第二个参数指定新的布局文件。

实际上TransitionManager还提供了另一个方法操作动画,下面一个小Demo展示:

其代码如下:

if (Build.VERSION.SDK_INT>=21){
    mRootView = (ViewGroup) findViewById(R.id.root_view);
     //指定该mRootView父容器下子控件变化的动画
    TransitionManager.beginDelayedTransition(mRootView,new Slide(Gravity.TOP));
    findViewById(R.id.a5).setVisibility(View.GONE);
 }

通过beginDelayedTransition指定我们要监听布局的容器。只要该该容器下的子控件改变了(比如某个控件不见了/某个控件大小变化/位移改变了),就会执行Slide动画。

其可以指定的动画还有很多种 都在android.transition包下:

常见的Transition如下:

1. Slide 划入

2. Explode 爆炸

2. Fade 隐藏

2. changeBounds 位置与大小变化

3.Activity与Transition动画配置

以上就是将Transition与Activity跳转相互嵌套而成的动画,对于第一个界面来说 要实现一个所有子控件向外爆炸(Explode)的退出动画,对于第二个界面需要实现一个向右滑动(Slide)的进场动画。

既然要配置动画,当然可以使用代码来配置,也可以使用xml文件来配置。我们让第一个动画使用代码来配置,第二个动画使用xml来配置。

退出的动画

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT>=21){
        //创建一个爆炸动画
        Explode explode=new Explode();
        explode.setDuration(1500);
        //对TRANSITIONS转场动画的支持
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        //设置退出动画的效果
        getWindow().setExitTransition(explode);
    }
    setContentView(R.layout.activity_one);
    findViewById(R.id.a4).setOnClickListener(this);
    findViewById(R.id.a5).setOnClickListener(this);
}

@Override
public void onClick(View v) {
    Intent intent=new Intent(this,SecondActivity.class);
    //5.0以后才支持
    if (Build.VERSION.SDK_INT>=21){
        startActivity(intent,
                ActivityOptionsCompat.makeSceneTransitionAnimation(this).toBundle());
    }else{
        startActivity(intent);
    }
}

注意上面的代码需要使用ActivityOptionsCompat.makeSceneTransitionAnimation(this)来实现转场动画,后面的参数可以不传递,因为我们不用分享转场的元素 动画在onCreate()中已经指定了.

进场动画

接下来在新的界面中,使用xml来配置从右向左滑动的进场动画。transition动画的xml配置需要在res 下创建一个transition文件夹。并在内部创建一个文件。该文件我命名为enter_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000" >
    <fade android:interpolator="@android:interpolator/accelerate_decelerate"/>
    <slide android:slideEdge="right" />
</transitionSet>

transitionSet标签类似补间动画的set标签。内部的标签大概有fade渐变标签,slide滑动标签,changebounds标签,explode标签等。至于其标签的属性很可能工具没提示哈。这里我以slide抛砖引玉。直接找到官网查找Slide,每个类大概都有提示:

其代码引用如下:

public class SecondActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT>=21){
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        Transition transition = TransitionInflater.from(this)
                         .inflateTransition(R.transition.enter_anim);
            getWindow().setEnterTransition(transition);
        }
        setContentView(R.layout.activity_second);
    }
}

4.波纹动画

首先我们可以在布局文件中创建一个播放动画的容器和一个按钮。

接着当点击按钮的时候执行如下代码:

if (Build.VERSION.SDK_INT>=21){
   //View view 对哪个控件实现波纹动画
   //int centerX,  int centerY 启动动画的起始坐标 相对于上面的view
   //float startRadius, float endRadius 开始&结束的半径
   Animator animator = ViewAnimationUtils
           .createCircularReveal(mContainer, 0, 0, 0, 800);
   animator.setDuration(1500);
   //默认动画如果没设置背景 是看不出效果的
   mContainer.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_bright));
   animator.start();
}

:) 本文由小码哥教育Android学院提供,谢绝转载

时间: 2024-11-05 14:58:56

MaterialDesign设计(下)的相关文章

MaterialDesign设计(中)

上一节主要是讲解MaterialDesign的一些简单案例,接下来要讲的是一个比较复杂的案例:CoordinatorLayout.实际上,它就是一个类似于5大布局的viewgroup.下面我们要实现的案例如下: 1.要展示上面的界面 需要在app的build.gradle中添加依赖脚本: compile 'com.android.support:design:25.3.1' 2.找到对应的布局,添加代码: <?xml version="1.0" encoding="ut

客户端热更新框架之UI热更框架设计(下)

上一篇笔者介绍了关于什么是热更新,为什么需要热更新的技术文章.本篇就专门针对UI框架的热更新功能实现部分展开讨论,讨论的重点是热更新如何与UI框架进行结合? 现在笔者把设计“UI热更新框架”的整体设计与构建过程表述如下,最后附带源码工程的下载链接,供广大学员参考研究.如果大家有什么不明白的地方,欢迎大家在评论区进行讨论.   1:首先基于笔者以前设计的SUIFW 框架,做进一步功能完善.   完善UI框架对于复杂窗体的直接转向功能.为了小伙伴们能够更好的理解本技术,文章末尾特提供了下载链接供大家

jQuery扁平化设计下拉菜单插件

FancySelect是一款小巧实用的jQuery下拉框美化插件.该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一. FancySelect实用十分简单,它可以和jquery或Zepto结合使用.在页面中放置一些select下拉框组件,然后就可以通过.fancySelect()方法来调用该下拉框插件.如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它. 在线演示:http://www.htmleaf.com/Demo/201502091351.html

自定义下拉刷新控件

一.功能效果 1.在很多app中,在信息展示页面,当我们向下拖拽时,页面会加载最新的数据,并有一个短暂的提示控件出现,有些会有加载进度条,有些会记录加载日期.条目,有些还带有加载动画.其基本实现原理都相仿,本文中将探讨其实现原理,并封装出一个简单的下拉刷新控件 2.自定义刷新工具简单的示例 二.系统提供的下拉刷新工具 1.iOS6.0以后系统提供了自己的下拉刷新的控件:UIRefreshControl .例如,refreshControl,作为UITableViewController中的一个属

robot framework 使用四:分层设计和截图以及注意事项

再说一下眼下的主要环境信息和版本号: 操作系统:win7 64位 python版本号:2.7.6 RIDE版本号:1.2.3 selenium2library:1.5.0 selenium:2.40.0 pip:1.5.4 setuptools:0.6c11 decorator:3.4.0 robotframework:2.8.4 wx:2.8-unicode wx:3.0 IEDiverServer:2.41.0 注意:除操作系统外,各软件都是32位的版本号. 如今说下怎样用ride分层測试案

使用NGUI制作关联下拉菜单(查询全国天气)

关联菜单,在我们浏览网页时经常见到,它极大的方便了我们的操作,在游戏中,偶尔也会用到关联下拉菜单.下面,我们使用关联下拉菜单来查询下全国的天气. 首先,老规矩我们搭建基本的UI界面.我们就不自己去制作UI组件了,直接使用NGUI封装好的UI组件. 我们先创建于一个Sprite,重命名为BgSprite,为其选择图集和精灵. 在菜单中选择NGUI,选择Open,打开Prefab Toolbar,拖一个PopupList,重命名为ProvincePopupList.这里,我们要注意, 我们导入支持中

【原创:参赛作品】窥视懒人的秘密---android下拉刷新开启手势的新纪元

小飒的成长史原创作品:窥视懒人的秘密---android下拉刷新开启手势的新纪元转载请注明出处 *****************************************************************        前言:窥视懒人那些不为人知的秘密 ***************************************************************** 作为一个程序员,哪有不勤奋的道理,当我们都在为技术奋不顾身的时候.偏偏懒人创造了世界. 有的

以用户为中心的前端设计案例剖析

WEB前端设计的最终目标是打造用户喜爱的产品,属于产品设计的范畴.所以一切设计要以用户为出发点,追求最佳的用户体验. 一.banner的设计 在WEB项目设计中,我们经常会有banner设计需求,一般而言首屏Banner及其相关区域也是整个网页设计中非常重要的部分. 优化前: 优化后: 优化前: 1.优化前网页首屏图片自动切换交互方式之外,用户可以点击圆点按钮手动切换图片.但考虑到图片本身的展示空间和效果,圆点按钮设计的比较小,造成用户点击该按钮时不方便. 2.banner切换图片时,会存在图片

基于 CSP 的设计思想和 OOP 设计思想的异同

LinkerLin Go语言推崇的CSP编程模型和设计思想,并没有引起很多Go开发者包括Go标准库作者的重视.标准库的很多设计保留了很浓的OOP的味道.本篇Blog想比较下从设计的角度看,CSP和OOP到底有什么区别. 下面,我们来看一个例子,如果我们有一个项目,需要做一个TCP连接中继器(请原谅我的用词).我们先按照OOP来设计下: 系统的结构:需要有一个客户端和一个服务器端.分两个进程分别跑在不同机器上. 系统对象关系拆分(这里有所简化,E-R图等省略):连接中继器类--系统的主类.conf