Material Design-动画

最新推荐文章于 2019-07-29 13:28:19 发布

nie_xl

最新推荐文章于 2019-07-29 13:28:19 发布

阅读量249

点赞数

分类专栏： material-design

本文链接：https://blog.csdn.net/nxlnxl1204/article/details/78688669

版权

material-design 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、触摸反馈
二、圆形动画（网上很多叫循环动画，我这里根据直观动画效果取名）
循环动画只有一个API，即基于ViewAnimationUtils的createCircularReveal

Animator createCircularReveal(View view,int centerX,  int centerY, float startRadius, float endRadius)

通过五个参数，完成动画
view，动画作用的目标view
centerX，动画起始点X坐标
centerY，动画起始点Y坐标
startRadius，起始圆半径
endRadius，结束圆半径

三、Scene动画

1、ChangeBounds 移动缩放动画
检测view的位置边界创建移动和缩放动画

xml-1：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/man"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:layout_margin="20dp"
        android:src="@drawable/man" />
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/woman"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        android:src="@drawable/woman" />
</RelativeLayout>

xml-2：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/cuteboy"
        android:src="@mipmap/cuteboy"
        android:layout_margin="20dp"
        android:layout_width="100dp"
        android:layout_height="100dp" />
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/cutegirl"
        android:layout_alignParentRight="true"
        android:src="@mipmap/cutegirl"
        android:layout_margin="20dp"
        android:layout_width="50dp"
        android:layout_height="50dp" />
</RelativeLayout>

布局效果：
图一：
这里写图片描述
图二：

要求：

1、被交换View的id需要相同，否则将无法得到动画效果不好
2、在两个xml中需要预制交错视图

2、ChangeTransform 旋转和缩放
检测view的scale和rotation创建缩放和旋转动画
当两个布局item有旋转和缩放的时候,可通过这个场景转化切换回来。经测试90度的转角最佳。需要配置android:scaleX、android:scaleY、android:rotation这三个属性使用
xml1

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/man"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        android:scaleX="0.5"
        android:scaleY="0.5"
        android:rotation="180"
        android:layout_alignParentRight="true"
        android:src="@drawable/man" />
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/woman"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        android:scaleX="1"
        android:scaleY="1"
        android:rotation="180"
        android:src="@drawable/woman" />
</RelativeLayout>

xml2

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/man"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        android:rotation="90"
        android:scaleX="1"
        android:scaleY="1"
        android:layout_alignParentRight="true"
        android:src="@drawable/man" />
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/woman"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        android:rotation="90"
        android:scaleX="0.5"
        android:scaleY="0.5"
        android:src="@drawable/woman" />
</RelativeLayout>

效果
图1
这里写图片描述
图2

要求：

1、被交换View的id需要相同，否则将无法得到动画效果不好
2、在两个xml中需要预制旋转和缩放视图

3、ChangeClipBounds 图像剪切
检测view的剪切区域的位置边界，和ChangeBounds类似。不过ChangeBounds针对的是view而ChangeClipBounds针对的是view的剪切区域(setClipBound(Rect rect) 中的rect)。如果没有设置则没有动画效果
针对两层图像，执行部分图像显示，该方法需要配合View的setClipBounds方法。通常是针对同一张图像显示部分

var v1= layoutInflater.inflate(R.layout.scene_changeclipbounds_1,null,false)
var v2= layoutInflater.inflate(R.layout.scene_changeclipbounds_2,null,false)
var image1=v1.find<ImageView>(R.id.man)
var image2=v2.find<ImageView>(R.id.man)
image1.clipBounds = Rect(0, 0, 200, 200)
image2.clipBounds = Rect(200, 200, 400, 400)
sense1 = Scene(amb_contains, v1)
sense2 = Scene(amb_contains, v2)
transType = ChangeClipBounds()

4、ChangeImageTransform 伸缩类型缩放显示
检测ImageView（这里是专指ImageView）的尺寸，位置以及ScaleType，并创建相应动画。
这个类型需要配合图像的scaleType使用，能够平滑的显示同一张图想因为scaleType引起的不同。
代码1

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/man"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        android:scaleType="center"
        android:src="@drawable/man" />
</RelativeLayout>

代码2

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/man"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        android:scaleX="0.8"
        android:scaleY="0.8"
        android:scaleType="centerInside"
        android:src="@drawable/man" />
</RelativeLayout>

5、Fade 淡入淡出
6、Slide滑出
7、explode 爆炸

四、Activity 场景转换

1：使用Activity场景转换需要在style.xml的AppTheme中开启。

<item name="android:windowContentTransitions">true</item>
<item name="android:windowActivityTransitions">true</item>

等待场景完全执行在style.xml的AppTheme中加入

<item name="android:windowAllowEnterTransitionOverlap">false</item>
<item name="android:windowAllowReturnTransitionOverlap">false</item>

在跳转目标APP中开启窗体载入与退出动画
需要在setContentView之前，但是测试后不再之前也没关系

getWindow().setEnterTransition(Transition t);  getWindow().setSharedElementEnterTransition(Transition t);       getWindow().setReturnTransition(Transition t);

这三个发方法要求输入一个
t可以通过代码编写，xml加载
1、代码编写如下t可以是以上介绍的7个场景Fade 、Slide、explode 、ChangeImageTransform 、ChangeTransform、 ChangeBounds 、ChangeClipBounds

getWindow().setEnterTransition(new Slide());

2：xml编写
在transtion文件夹中，通过xml文件编写动画效果。

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="800">
    <slide android:slideEdge="top">
        <targets>
            <target android:targetId="@id/fab"></target>
        </targets>
    </slide>
    <slide android:slideEdge="bottom">
        <targets>
            <target android:targetId="@id/liney_bottom"></target>
        </targets>
    </slide>
    <fade>
        <targets>
            <target android:targetId="@id/toolBar"></target>
            <target android:targetId="@android:id/statusBarBackground"></target>
        </targets>
    </fade>
</transitionSet>

说明：
2.1、主节点通常是transitionSet，这是由于通常xml中编写的动画是组动画
2.2、详细动画是Fade 、Slide、explode 、ChangeImageTransform 、ChangeTransform、 ChangeBounds 、ChangeClipBounds 、changeScroll等动画
2.3、绑定视图targets
2.4、详细绑定target targetId即为目标对象视图在xml中的真实id

注意：
1、直接在代码中使用系统内置的7个动画，将会出现闪烁的情况
2、推荐使用xml的方法，这样不仅可以使用组动画，还可以详细的控制具体的子控件
3、@android:id/statusBarBackground为状态栏id

3：在代码中跳转
当从A跳转到B，在A中调用如下

 Bundle bundle= ActivityOptions.makeSceneTransitionAnimation(this)
                    .toBundle()
 startActivity(new Intent(this, BActivity.class), bundle)

当要增加使用共享动画时，需要改写Bundle
1、共享控件增加 android:transitionName=“xxx”节点
2、增加Pair元素

 Bundle bundle= ActivityOptions.makeSceneTransitionAnimation(this,
                    new Pair<View, String>(a_fab, "xxx"),
                    new Pair<View, String>(a_tv, "share1"))
                    .toBundle()

nie_xl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Material Design-动画

一、触摸反馈二、圆形动画（网上很多叫循环动画，我这里根据直观动画效果取名）循环动画只有一个API，即基于ViewAnimationUtils的createCircularRevealAnimator createCircularReveal(View view,int centerX, int centerY, float startRadius, float endRadius)通过五个
复制链接

扫一扫

专栏目录