基于Android系统的动画总结

Share Element


由一张图片过度到一个界面,适用于购物车图片直接跳转到商品详情界面,圆形按钮的过度也可以应用于圆形菜单里

![share.gif](http://upload-images.jianshu.io/upload_images/1750086-6174a1f75902a802.gif?imageMogr2/auto-orient/strip)

实现原理

利用android 5.0 提供的方法,实现共享元素动画的过度,实现原理很简单,在界面跳转的时候加入以下代码

  1. java代码

    1
    2
    3
    4
    5
    6
    //第一个界面跳转的时候执行
    Intent shareIntent = new Intent(MainActivity.this, ShareElementActivity.class);
    String transitionName = getString(R.string.share_tag);
    ActivityOptionsCompat transitionActivityOptions
    = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, holder.item_image, transitionName);
    startActivity(shareIntent, transitionActivityOptions.toBundle());

    makeSceneTransitionAnimation(Activity activity,View sharedElement, String sharedElementName)makeSceneTransitionAnimation中参数sharedElement就是传入第一个界面要与第二个界面共有的view元素,sharedElementName这个参数可以随便起名,他相当于tag,系统就是根据这个tag来定位两个界面元素的位置,然后进行动画渲染的

    1
    2
    //第二个界面动画完成回调监听,控制进出动画效果
    setEnterSharedElementCallback(ImageTransitionUtil.DEFAULT_SHARED_ELEMENT_CALLBACK);

    setEnterSharedElementCallback 里面可以实现自己想要的动画效果

  2. 布局文件代码
    这里用系统自带的ImageView就可以,记住,两个界面跳转activity中的共享元素ImageView,一定要设置这个属性 transitionName 上文说过,这个就是相当于tag,系统是根据这个来定位的,所以一定要设置。

    1
    2
    3
    4
    5
    6
    7
    <ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:src="@drawable/sample"
    android:transitionName="@string/share_tag"
    />

CollapsingToolbarLayout


折叠式的标题栏,这个是系统提供的动画效果,引用系统控件就好了

![fold.gif](http://upload-images.jianshu.io/upload_images/1750086-706fd47f5f53cda8.gif?imageMogr2/auto-orient/strip)

代码实现

  1. gradle里的引用

    bash compile ‘com.android.support:design:22.2.1’

  2. java代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_collapsing_toolbar);
    ButterKnife.bind(this);
    content.setText(R.string.content);

    initToolbar();

    }

    private void initToolbar() {
    collapsingToolbar.setTitle("折叠式标题栏");
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    //toolbar返回事件实现
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
    if (item.getItemId() == android.R.id.home) {
    finish();
    return true;
    }
    return super.onOptionsItemSelected(item);
    }
  3. 布局文件代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:contentScrim="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:title="Share Element">

    <ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/sample"
    android:scaleType="centerCrop"
    app:layout_collapseMode="parallax"
    app:layout_collapseParallaxMultiplier="0.5"
    />

    <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_collapseMode="pin" />

    </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <TextView
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="test"
    android:textColor="@color/black"
    android:textSize="20sp"
    android:padding="10dp"/>

    </android.support.v4.widget.NestedScrollView>

    </android.support.design.widget.CoordinatorLayout>

布局文件的一些属性说明

  1. layout_scrollFlags

    • scroll - 想滚动就必须设置这个。
    • enterAlways - 实现quick return效果, 当向下移动时,立即显示View(比如Toolbar)。
    • exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar一直在上面。
    • enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度
  2. layout_collapseMode

    • pin - 设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。
    • parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
    • layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1
  3. 使用CollapsingToolbarLayout时必须把title设置到CollapsingToolbarLayout上,设置到Toolbar上不会显示

    bash collapsingToolbar.setTitle(“折叠式标题栏”);


## Reveal Animation --- google爸爸自从5.0之后对动画效果特别注重,这里给大家介绍一个波纹效果,也是系统提供的
![reveal.gif](http://upload-images.jianshu.io/upload_images/1750086-09a84314d5b373ea.gif?imageMogr2/auto-orient/strip)

实现原理

1
2
3
4
5
6
7
8
9
10
11
12
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
private Animator animateRevealColorFromCoordinates(ViewGroup viewRoot, @ColorRes int color, int pointx, int pointY) {
float finalRadius = (float) Math.hypot(viewRoot.getWidth(), viewRoot.getHeight());
//由于toolbar是自己绘制的所以要减去这个高度
pointY = pointY - toolbarHeight;
Animator anim = ViewAnimationUtils.createCircularReveal(viewRoot, pointx, pointY, 0, finalRadius);
viewRoot.setBackgroundColor(ContextCompat.getColor(this, color));
anim.setDuration(500);
anim.setInterpolator(new AccelerateDecelerateInterpolator());
anim.start();
return anim;
}
ViewAnimationUtils.createCircularReveal(View view, int centerX, int centerY, float startRadius, float endRadius)

重点是这个方法,设置在哪个View里绘制波纹,起始点及半径就可以实现了,很多开源的button波纹效果都是基于这个实现再次封装的

源码在下面,如果觉得不错,随手帮忙Star、Fork一下,算是对作者最大的支持啦~

Github项目地址:MaterialAnim


1.如果本文帮到了您,不妨点一下右下角的 分享到 按钮。
2.除非注明,本博文章均为原创,转载请以链接形式标明本文地址。
3.本博文章只代表博主当时的观点或结论,与博主公司没有任何关系。