Android动画--补间动画

最新推荐文章于 2023-08-04 17:35:08 发布

之2

最新推荐文章于 2023-08-04 17:35:08 发布

阅读量256

点赞数 1

分类专栏： Android

本文链接：https://blog.csdn.net/qq_38188436/article/details/71159839

版权

Android 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

补间动画可以应用于View,让开发者可以定义一些透明、旋转、平移、缩放的效果，达到让View的内容动起来的效果

补间动画的状态：透明、旋转、平移、缩放

注意：补间动画不会改变动画真实的位置

使用补间动画的效果，有两种方法：

1.在xml文件中设置动画效果

2.在Java代码中设置

效果图：

一.在xml文件中设置动画效果

1.在res文件夹下新建anim文件夹，在anim文件夹下新建对应的动画标签文件

代码如下：

（1）透明度
<?xml version="1.0" encoding="utf-8"?>
<alpha
    android:fromAlpha="0"
    android:toAlpha="1"
    android:duration="3000"
    xmlns:android="http://schemas.android.com/apk/res/android">
</alpha>
（2）旋转
<?xml version="1.0" encoding="utf-8"?>
<rotate android:fromDegrees="180"
    android:toDegrees="60"
    android:pivotX="50%"
    android:pivotY="50%"
    xmlns:android="http://schemas.android.com/apk/res/android">
</rotate>
（3）平移
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="-80"
    android:toYDelta="-80">
</translate>
（4）缩放
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="50"
    android:pivotY="50"
    android:toXScale="1.5"
    android:toYScale="1.5">
</scale>

2.在layout文件下的xml

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@mipmap/a" />

    <Button
        android:id="@+id/but"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:onClick="tog"
        android:text="我是综合体" />
</LinearLayout>

3.java代码

public class Activity_Tween extends Activity {
    ImageView imageView;
    private Animation aa;
    private Animation ra;
    private Animation sa;
    private Animation ta;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tween);
        imageView = (ImageView) findViewById(R.id.imageView);

    }
 /**
     * 透明、、旋转、平移、缩放一起显示
     * 动画类集合AnimationSet
     */
    public void tog(View view) {
        alpha();
        rotate();
        translate();
        scale();
        AnimationSet as = new AnimationSet(true);
        as.addAnimation(aa);
        as.addAnimation(ra);
        as.addAnimation(ta);
        as.addAnimation(sa);
    }

    //透明度
    private void alpha() {
        //加载xml文件
        aa = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.alpha);
        imageView.startAnimation(aa);
    }

    //旋转
    private void rotate() {
        //加载xml文件
        ra = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate);
        imageView.startAnimation(ra);
    }

    //平移
    private void translate() {
        ta = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
        imageView.startAnimation(ta);
    }

    //缩放
    private void scale() {
        sa = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale);
        imageView.startAnimation(sa);
    }
}
}

二.在Java代码中设置

1.Java中设置，代码如下：

public class Activity_Tween extends Activity {
    ImageView imageView;
    private Animation aa;
    private Animation ra;
    private Animation sa;
    private Animation ta;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tween);
        imageView = (ImageView) findViewById(R.id.imageView);

    }

    /**
     * 透明度
     */
    public void alpha(View view) {
        /**参数一：float fromAlpha: 开始的透明度
         * 参数二：float toAlpha: 结束的透明度
         * 取值：0-1小数
         * 0.0：表示完全透明
         * 1.0：表示完全不透明
         * */
        AlphaAnimation aa = new AlphaAnimation(1.0f, 0.0f);
        aa.setDuration(2000);//设置时间 单位为ms
        aa.setFillAfter(true);//动画结束后，动画效果保持当前效果
        aa.setRepeatCount(1);//重复的个数
        /**重复的模式
         * Animation.RESTART 重新开始
         * Animation.REVERSE  反向显示
         * */
        aa.setRepeatMode(Animation.REVERSE);
        /**开始动画*/
        imageView.startAnimation(aa);
    }

    /**
     * 旋转
     */
    public void rotate(View view) {
        /**
         * 参数一： float fromDegrees 开始的角度
         * 参数二： float toDegrees 转过的角度 （结束的角度）
         * 参数三： int pivotXType x相对于谁旋转
         * 参数四： float pivotXValue  x轴旋转点
         * 参数五： int pivotYType y相对于谁旋转
         * 参数六： float pivotYValue  y轴的旋转点
         * Animation.RELATIVE_TO_SELF相对于父布局
         * 旋转的方向是是顺时针
         * */
        RotateAnimation ra = new RotateAnimation(180.0f, 60.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        ra.setDuration(2000);//设置时间 单位为ms
        /**开始动画*/
        imageView.startAnimation(ra);
    }

    /**
     * 平移
     */
    public void translate(View view) {
        /**
         * 参数一：int fromXType     x参照
         * 参数二：float fromXValue  x轴开始值
         * 参数三：int toXType        x参照
         * 参数四： float toXValue    x轴结束值
         * 参数五： int fromYType     y参照
         * 参数六： float fromYValue  y轴开始值
         * 参数七： int toYType,     y参照
         * 参数八：float toYValue   y轴结束
         * Animation.RELATIVE_TO_PARENT相对于父布局
         */
        TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 0,
                Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.5f);
        ta.setDuration(2000);//设置时间 单位为ms
        /**开始动画*/
        imageView.startAnimation(ta);

    }

    /**
     * 缩放
     */
    public void scale(View view) {
        /**
         * 1:原始大小
         * 大于1：放大
         *小于1：缩小
         *参数一：float fromX    x缩放的开始位置
         *参数二：float toX      x缩放的结束位置
         *参数三：float fromY    y缩放的开始位置
         *参数四：float toY      y缩放的结束位置
         *参数五：int pivotXType x相对于谁缩放
         *参数六：float pivotXValue  x轴点
         *参数七： int pivotYType     y相对于谁缩放
         *参数八：float pivotYValue   y轴点*/
        ScaleAnimation sa = new ScaleAnimation(1.0f, 2.2f, 1.0f, 2.2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        sa.setDuration(2000);//设置时间 单位为ms
        /**开始动画*/
        imageView.startAnimation(sa);
    }

2.xml中的代码

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="alpha"
            android:text="透明" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="rotate"
            android:text="旋转" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="translate"
            android:text="平移" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="scale"
            android:text="缩放" />

    </LinearLayout>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@mipmap/a" />
</LinearLayout>

三.关于缩放、透明度、旋转、平移的参数解释

1.缩放构造函数中的参数

ScaleAnimation：

• fromXScale 起始的 X 方向上相对自身的缩放比例，浮点值，如 1.0 代表自身无变化，0.5 代表起始时缩小一倍，2.0 代表放大一倍；

• toXScale 结尾的 X 方向上相对自身的缩放比例，浮点值；

• fromYScale 起始的 Y 方向上相对自身的缩放比例，浮点值，

• toYScale 结尾的 Y 方向上相对自身的缩放比例，浮点值；

• pivotX 缩放起点 X 轴坐标，可以是数值、百分数、百分数 p 三种样式，比如 50、50%、50%p，当为数值时，表示在当前 View 的左上角，即原点处加上 50px，做为起始缩放点；如果是 50%，表示在当前控件的左上角加上自己宽度的 50%做为起始点；如果是 50%p，表示在当前的左上角加上父控件宽度的 50%做为起始点 x 轴坐标

• pivotY 缩放起点 Y 轴坐标，取值及意义跟android:pivotX 一样。放到代码中，ScaleAnimation 有下面几个构造函数：

• ScaleAnimation(Contextcontext, AttributeSet attrs) 从 XML 文件加载动画，基本用不到

• ScaleAnimation(floatfromX, float toX, float fromY, float toY)

• ScaleAnimation(floatfromX, float toX, float fromY, float toY, float pivotX, float pivotY)

• ScaleAnimation(floatfromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue,int pivotYType, float pivotYValue)

第一个构造函数是从本地 XML 文件加载动画，基本用不到的，我们主要看下面三个构造函数。在标签属性 android:pivotX 中有三种取值，数，百分数，百分数 p；体现在构造函数中，就是最后一个构造函数的 pivotXType,它的取值有三个，Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF 和Animation.RELATIVE_TO_PARENT；

2.透明度

AlphaAnimation：

• fromAlpha 动画开始的透明度，从0.0 --1.0 ，0.0 表示全透明，1.0 表示完全不透明

• toAlpha 动画结束时的透明度，也是从0.0 --1.0 ，0.0 表示全透明，1.0 表示完全不透明所对应的构造函数为：

• AlphaAnimation(Contextcontext, AttributeSet attrs) 同样，从本地 XML 加载动画，基本不用

• AlphaAnimation(floatfromAlpha, float toAlpha) 这里只剩最后一个构造函数，难度不大，下面举个例子说明下用法。在第一篇文章中，我们构造的 XML 代码为：

3.旋转

RotateAnimation

• fromDegrees 开始旋转的角度位置，正值代表顺时针方向度数，负值代码逆时针方向度数

• toDegrees 结束时旋转到的角度位置，正值代表顺时针方向度数，负值代码逆时针方向度数

• pivotX 缩放起点 X 轴坐标，可以是数值、百分数、百分数 p 三种样式，比如 50、50%、50%p，具体意义已在 scale 标签中讲述，这里就不再重讲

• pivotY 缩放起点 Y 轴坐标，可以是数值、百分数、百分数 p 三种样式，比如 50、50%、50%p 对应的构造函数有：

• RotateAnimation(Contextcontext, AttributeSet attrs)　　从本地 XML 文档加载动画，同样，基本不用

• RotateAnimation(floatfromDegrees, float toDegrees)

• RotateAnimation(floatfromDegrees, float toDegrees, float pivotX, float pivotY)

• RotateAnimation(floatfromDegrees, float toDegrees, int pivotXType, float pivotXValue, intpivotYType, float pivotYValue) RotateAnimation 跟 ScaleAnimation 差不多，关键问题同样是pivotXType 和 pivotYType 的选择，同样有三个取值：Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF 和Animation.RELATIVE_TO_PARENT；

4.平移

TranslateAnimation

• fromXDelta 起始点 X 轴坐标，可以是数值、百分数、百分数 p 三种样式，比如 50、50%、50%p，具体意义已在 scale 标签中讲述，这里就不再重讲

• fromYDelta 起始点 Y 轴从标，可以是数值、百分数、百分数 p 三种样式；

• toXDelta 结束点 X 轴坐标

• toYDelta 结束点 Y 轴坐标这些属性所对应的构造函数为：

• TranslateAnimation(Contextcontext, AttributeSet attrs) 基本不用

• TranslateAnimation(floatfromXDelta, float toXDelta, float fromYDelta, float toYDelta)

• TranslateAnimation(intfromXType, float fromXValue, int toXType, float toXValue, int fromYType, floatfromYValue, int toYType, float toYValue) 由于 fromXDelta、fromYDelta、toXDelta、toYDelta 这三个属性都具有三种状态，所以在构造函数中，最理想的状态就是第三个构造函数，能够指定每个值的类型，第二个构造函数：TranslateAnimation (float fromXDelta, float toXDelta, floatfromYDelta, float toYDelta)使用是绝对数值。只有最后一个构造函数可以指定百分数和相对父控件的百分数

5.动画类集合

AnimationSet：

• AnimationSet(Contextcontext, AttributeSet attrs) 基本不用

• AnimationSet(booleanshareInterpolator) shareInterpolator 取值 true 或 false，取 true 时，指在AnimationSet 中定义一个插值器（interpolater），它下面的所有动画共同。 false，表示它下面的动画自己定义各自的插值器。

增加动画的函数为：

• public void addAnimation(Animation a)

四.透明、旋转、平移、缩放都有的属性：

setDuration();设置时间单位为ms

setFillAfter();动画结束后，动画效果保持当前效果

setRepeatCount();//重复的个数

重复的模式：（Animation.RESTART 重新开始、Animation.REVERSE 反向显示）

setRepeatMode(Animation.REVERSE)

参照文章：http://www.360doc.com/content/13/0102/22/6541311_257754535.shtml