Android动画--补间动画

补间动画可以应用于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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值