android动画–Material Design动画

  • Post author:
  • Post category:其他


前一篇博客说了下属性动画的基本使用,这里说的是Material Design动画的基本使用,Material Design是android5.0以后才出现的设计风格,所以Material Design动画运行android5.0+上面才会有效果,在低版本上面需要同样的效果的话,就只能利用其它的方式来实现。

一般Material Design动画有下面这几种:

1.Touch Feedback(触摸反馈)
2.Reveal Effect(揭露效果)
3.Activity transition(Activity转场动画效果)
4.Curved motion(曲线运动)
5.View State change (视图的状态改变)


Touch Feedback(触摸反馈)


Touch Feedback(触摸反馈)比较明显的就是水波纹效果,在android5.0+上面水波纹效果是自带,使用和修改效果比较方便;

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.mdainmation.MainActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:text="Hello World!"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:background="?attr/selectableItemBackground"
        android:text="Hello World!"
        android:clickable="true"
        android:gravity="center"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:text="Hello World!"/>
</LinearLayout>
//没有边界,圆形
android:background="?attr/selectableItemBackgroundBorderless"

不过对于TextView要加上android:clickable=”true”才会有水波纹的效果;


可以修改背景颜色和水波纹的颜色:

<item name="android:colorControlHighlight">@color/colorPrimary</item>
<item name="colorButtonNormal">@color/material_blue_grey_800</item>

需要注意的colorControlHighlight和colorButtonNormal是api21才会有的,需要建一个values-v21文件并将style.xml放进来;

这里写图片描述


Reveal Effect(揭露效果)


Activity的揭露出现的效果,这里涉及到一个ViewAnimationUtil(api21才有)工具类,

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

效果一:

bt1.setOnClickListener(new View.OnClickListener() {
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    public void onClick(View v) {
        Animator animator = ViewAnimationUtils.createCircularReveal(bt1, bt1.getWidth() / 2, bt1.getHeight() / 2, 0, bt1.getHeight() / 2);
        animator.setDuration(1000);
        animator.setInterpolator(new AccelerateInterpolator());
        //开启动画
        animator.start();
    }
});

效果二:

bt2.setOnClickListener(new View.OnClickListener() {
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    public void onClick(View v) {
        Animator animator = ViewAnimationUtils.createCircularReveal(bt2, 0, 0, 0, (float) Math.hypot(bt2.getWidth(), bt2.getHeight()));
        animator.setDuration(1000);
        animator.setInterpolator(new AccelerateInterpolator());
        //开启动画
        animator.start();
    }
});

这里写图片描述


Activity transition(Activity转场动画效果)


Activity transition(Activity转场动画效果)其实就是两个Activity进行跳转的时候,转场动画;涉及到ActivityOptions(api21)类,但是不同于ViewAnimationUtils类,ActivityOptions有低版本兼容的一个类,ActivityOptionsCompat(v4包中),虽然谷歌做了低版本的兼容,但是运行在android5.0以下的系统上面是没有转场动画效果的。


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


使用转场动画的前提:


需要给两个Activity都设置如下,让其允许使用转场动画

//方法一:
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
//方法二:
修改主题:<item name="android:windowContentTransitions">true</item>


共享元素转换

共享元素转换就是说可以把两个Activity当中的相同的元素关联起来做连贯的变换动画。

如:

<ImageView
    android:id="@+id/iv1"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:transitionName="iv_meinv3"
    android:src="@color/colorPrimary"
    android:layout_below="@+id/bt"/>

android:transitionName=”iv_meinv3”就是给两个activity中相同view设置的名称;根据设置的transitionName在跳转的时候设置动画就可以了;

//单个共享元素
ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, iv1, "iv_meinv3");
Intent intent=new Intent(this,SecondActivity.class);
startActivity(intent,optionsCompat.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());

这里写图片描述


普通的转换动画


普通的转换动画api21才会有,系统提供三种自带的效果:

滑动效果(Slide) 
展开效果Explode
渐变显示隐藏效果Fade


滑动效果(Slide):


大致就是一个activity从底部进入,从底部退出的效果


第一个activity:

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


第二个activity:

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    //设置允许使用转场动画
    etWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main2);

    Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    Slide slide=new Slide();
    slide.setDuration(300);
    //出去的动画
    getWindow().setExitTransition(slide);
    //进来的动画
    getWindow().setExitTransition(slide);
}

这里写图片描述


展开效果Explode


将Slide动画效果的代码中的Slide 换成 Explode就可以了,

这里写图片描述


渐变显示隐藏效果Fade


同样的将Slide动画效果的代码中的Slide 换成Fade就可以了,

这里写图片描述



版权声明:本文为wangwo1991原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。