• android Animation动画的xml使用


    在Android应用程序,使用动画效果,能带给用户更好的感觉,做动画能够通过XML或Android代码来实现。

    Animation动画效果的实现能够通过两种方式进行实现,一种是tweened animation (渐变动画),还有一种是frame by frame animation (画面转换动画)。

    tweened animation渐变动画有下面两种类型:

    1.alpha     渐变透明度动画效果

    2.scale    渐变尺寸伸缩动画效果

    frame by frame animation 画面转换动画有下面两种类型:

    1.translate   画面转换位置移动动画效果

    2.rotate    画面转移旋转动画效果

    在这里。我使用XML来做动画。

    实现主要的动画,如淡入,旋转等。

    步骤:1、首先在res文件夹中新建anim的文件夹,在anim中新建须要的动画xml资源文件。

    anim/alpha.xml(渐变动画)

    <?

    xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <alpha android:fromAlpha="0.1" android:toAlpha="1.0" android:duration="3000"/> <!-- 透明度控制动画效果 alpha 浮点型值: fromAlpha 属性为动画起始时透明度 0.0表示全然透明 toAlpha 属性为动画结束时透明度 1.0表示全然不透明 以上值取0.0-1.0之间的float数据类型的数字 长整型值: duration 属性为动画持续时间 以毫秒为单位 --> </set>

    anim/scale.xml(伸缩动画)

    <?

    xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromXScale="0.0" android:toXScale="1.4" android:fromYScale="0.0" android:toYScale="1.4" android:pivotX="50%" android:pivotY="50%" android:fillAfter="false" android:duration="700" /> </set> <!-- 尺寸伸缩动画效果 scale 属性:interpolator 指定一个动画的插入器 在试验过程中,使用android.res.anim中的资源时候发现 有三种动画插入器: accelerate_decelerate_interpolator 加速-减速 动画插入器 accelerate_interpolator 加速-动画插入器 decelerate_interpolator 减速- 动画插入器 其它的属于特定的动画效果 浮点型值: fromXScale 属性为动画起始时 X坐标上的伸缩尺寸 toXScale 属性为动画结束时 X坐标上的伸缩尺寸 fromYScale 属性为动画起始时Y坐标上的伸缩尺寸 toYScale 属性为动画结束时Y坐标上的伸缩尺寸 说明:以上四种属性值 0.0表示收缩到没有 1.0表示正常无伸缩 值小于1.0表示收缩 值大于1.0表示放大 pivotX 属性为动画相对于物件的X坐标的開始位置 pivotY 属性为动画相对于物件的Y坐标的開始位置 说明: 以上两个属性值 从0%-100%中取值 50%为物件的X或Y方向坐标上的中点位置 长整型值: duration 属性为动画持续时间 以毫秒为单位 布尔型值: fillAfter 属性 当设置为true 。该动画转化在动画结束后被应用 -->

    anim/translate.xml(移动动画)
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
         <translate
            android:fromXDelta="30"
            android:toXDelta="-80"
            android:fromYDelta="30"
            android:toYDelta="300"
            android:duration="2000"/>
    <!-- translate 位置转移动画效果
            整型值:
                fromXDelta 属性为动画起始时 X坐标上的位置    
                toXDelta   属性为动画结束时 X坐标上的位置
                fromYDelta 属性为动画起始时 Y坐标上的位置
                toYDelta   属性为动画结束时 Y坐标上的位置
                注意:
                         没有指定fromXType toXType fromYType toYType 时候,
                         默认是以自己为相对參照物             
            长整型值:
                duration  属性为动画持续时间   以毫秒为单位
    -->
    </set>

    anim/rotate.xml(旋转动画)

    <?

    xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <rotate android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromDegrees="0" android:toDegrees="+350" android:pivotX="50%" android:pivotY="50%" android:duration="3000" /> <!-- rotate 旋转动画效果 属性:interpolator 指定一个动画的插入器 在试验过程中,使用android.res.anim中的资源时候发现 有三种动画插入器: accelerate_decelerate_interpolator 加速-减速 动画插入器 accelerate_interpolator 加速-动画插入器 decelerate_interpolator 减速- 动画插入器 其它的属于特定的动画效果 浮点数型值: fromDegrees 属性为动画起始时物件的角度 toDegrees 属性为动画结束时物件旋转的角度 能够大于360度 说明: 当角度为负数——表示逆时针旋转 当角度为正数——表示顺时针旋转 (负数from——to正数:顺时针旋转) (负数from——to负数:逆时针旋转) (正数from——to正数:顺时针旋转) (正数from——to负数:逆时针旋转) pivotX 属性为动画相对于物件的X坐标的開始位置 pivotY 属性为动画相对于物件的Y坐标的開始位置 说明: 以上两个属性值 从0%-100%中取值 50%为物件的X或Y方向坐标上的中点位置 长整型值: duration 属性为动画持续时间 以毫秒为单位 --> </set>

    2、xml资源文件创建完毕之后,接下来就是调用这些资源文件。

    以alpha为例,先创建AlphaActivity。

    在activity_alpha.xml中随便放一张背景图片

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/test_bg"
        tools:context=".AlphaActivity" >
    
    </RelativeLayout>
    AlphaActivity.java
    package com.example.animation_demo;
     
    import android.os.Bundle;
    import android.app.Activity;
    import android.view.View;
    import android.view.animation.Animation;
    import android.view.animation.Animation.AnimationListener;
    import android.view.animation.AnimationUtils;
    import android.widget.Toast;
     
    public class AlphaActivity extends Activity {
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            View view=View.inflate(this, R.layout.activity_alpha, null);
            setContentView(view);
            //使用AnimationUtils类的静态方法loadAnimation()来载入XML中的动画XML文件
            Animation animation=AnimationUtils.loadAnimation(this, R.anim.alpha);
            view.startAnimation(animation);
            animation.setAnimationListener(new AnimationListener() {
                @Override
                public void onAnimationStart(Animation arg0) {}   //在动画開始时使用
                 
                @Override
                public void onAnimationRepeat(Animation arg0) {}  //在动画反复时使用
    
                @Override
                public void onAnimationEnd(Animation arg0) {
                    Toast.makeText(AlphaActivity.this, "在动画结束时使用", Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

    这个是整个layout文件的动画,也能够让不论什么UI元素调用starAnimation方法。

    比如:textMsg.startAnimation(animation); 这时候就不须要以下代码 动画填充指定xml了

    View view=View.inflate(this, R.layout.activity_alpha, null);
    setContentView(view);
    直接setContentView(R.layout.activity_alpha); 就OK了。卒。

    效果图:

    附上找到的一些主要的xml效果:

    Fade In:淡入

    alpha是渐变透明度效果,值由0到1

    fade_in.xml  
    <?xml version="1.0" encoding="utf-8"?>  
    <set xmlns:android="http://schemas.android.com/apk/res/android"  
        android:fillAfter="true" >  
       
        <alpha  
            android:duration="1000"  
            android:fromAlpha="0.0"  
            android:interpolator="@android:anim/accelerate_interpolator"  
            android:toAlpha="1.0" />  
    </set> 
    Fade Out :淡出
    以Fade In刚好相反。值由1到0
    fade_out.xml  
    <?xml version="1.0" encoding="utf-8"?>  
    <set xmlns:android="http://schemas.android.com/apk/res/android"  
        android:fillAfter="true" >  
       
        <alpha  
            android:duration="1000"  
            android:fromAlpha="1.0"  
            android:interpolator="@android:anim/accelerate_interpolator"  
            android:toAlpha="0.0" />  
    </set>  
    Cross Fading:  交叉的淡入和淡出
    同一时候使用Fade in和Fade out能够达到交叉的效果
    public class CrossfadeActivity extends Activity implements AnimationListener {  
      
        TextView txtMessage1, txtMessage2;  
        Button btnStart;  
    
        Animation animFadeIn, animFadeOut;  
    
        @Override  
        protected void onCreate(Bundle savedInstanceState) {  
            // TODO Auto-generated method stub  
            super.onCreate(savedInstanceState);  
            setContentView(R.layout.activity_crossfade);  
    
            txtMessage1 = (TextView) findViewById(R.id.txtMessage1);  
            txtMessage2 = (TextView) findViewById(R.id.txtMessage2);  
            btnStart = (Button) findViewById(R.id.btnStart);  
    
            // load animations  
            animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),  
                    R.anim.fade_in);  
            animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),  
                    R.anim.fade_out);  
    
            // set animation listeners  
            animFadeIn.setAnimationListener(this);  
            animFadeOut.setAnimationListener(this);  
      
            // button click event  
            btnStart.setOnClickListener(new View.OnClickListener() {  
      
                @Override  
                public void onClick(View v) {  
                    txtMessage2.setVisibility(View.VISIBLE);  
                    txtMessage2.startAnimation(animFadeIn);  
                    txtMessage1.startAnimation(animFadeOut);  
                }
            });
        }
      
        @Override  
        public void onAnimationEnd(Animation animation) {  
              
            if (animation == animFadeOut) {  
                txtMessage1.setVisibility(View.GONE);  
            }  
              
            if(animation == animFadeIn){  
                txtMessage2.setVisibility(View.VISIBLE);  
            }  
        }  
      
        @Override  
        public void onAnimationRepeat(Animation animation) {  
            // TODO Auto-generated method stub  
        }  
      
        @Override  
        public void onAnimationStart(Animation animation) {  
            // TODO Auto-generated method stub  
        }  
    }

    BLink:若隐若现

    blink.xml  
    <?xml version="1.0" encoding="utf-8"?

    > <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:interpolator="@android:anim/accelerate_interpolator" android:duration="600" android:repeatMode="reverse" android:repeatCount="infinite"/> </set>

    Zoom In:放大
    zoom_in.xml  
    <?xml version="1.0" encoding="utf-8"?

    > <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" > <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:fromXScale="1" android:fromYScale="1" android:pivotX="50%" android:pivotY="50%" android:toXScale="3" android:toYScale="3" > </scale> </set>

    Zoom Out:缩小
    <?xml version="1.0" encoding="utf-8"?>  
    <set xmlns:android="http://schemas.android.com/apk/res/android"  
        android:fillAfter="true" >  
        <scale  
            xmlns:android="http://schemas.android.com/apk/res/android"  
            android:duration="1000"  
            android:fromXScale="1.0"  
            android:fromYScale="1.0"  
            android:pivotX="50%"  
            android:pivotY="50%"  
            android:toXScale="0.5"  
            android:toYScale="0.5" >  
        </scale>  
    </set>  
    Rotate:旋转
    rotate.xml
    <?

    xml version="1.0" encoding="utf-8"?

    > <set xmlns:android="http://schemas.android.com/apk/res/android"> <rotate android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="600" android:repeatMode="restart" android:repeatCount="infinite" android:interpolator="@android:anim/cycle_interpolator"/> </set>

    好长啊。

    。。既然你们都看到这里了。再多说几句。。

    根节点<set>的属性:

    名称

    属性

    备注

    android:shareInterpolator

    是否共享插入器

    共享时。四个子节点都用一个插入器

    android:interpolator

    指定一个动画的插入器

    使用系统资源

    android:fillEnabled

    当设置为true时,fillAfter和fill, Befroe将会都为true,此时会忽略fillBefore 和fillAfter两种属性

    android:fillAfter

    该动画转化是否在动画结束后被应用

    boolean

    android:fillBefore

    该动画转化是否在动画開始前被应用

    boolean

    android:repeatMode

    反复模式

    "restart"  或者 "reverse"

    android:repeatCount

    反复次数

    integer

    android:duration

    动画持续时间

    integer

    android:startOffset

    动画时间间隔

    long

    android:zAdjustment

    定义动画z order的变换

    [normal] or [top] or [bottom]

    android:detachWallpaper

    boolean


    欢迎交流 http://blog.csdn.net/ycwol/article/details/41118831

  • 相关阅读:
    表单控件和属性
    html5语义化标签
    移动布局
    webpack
    OMobile
    Npm的下载 安装 管理工具
    模块化开发
    百度地图
    离线缓存
    canvas和svg
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5131268.html
Copyright © 2020-2023  润新知