• Android使用XML做动画UI


    在Android应用程序,使用动画效果,能带给用户更好的感觉。做动画可以通过XML或Android代码。
    本教程中,介绍使用XML来做动画。在这里,介绍基本的动画,如淡入,淡出,旋转等。

    效果: http://www.56.com/u82/v_OTM4MDk5MTk.html

    第一步: 创建anim文件夹放置动画xml文件
    在res文件夹下,创建一个anim的子文件夹。

             

    第二步: 加载动画
    接着在Activity创建一个Animation类,然后使用AnimationUtils类加载动画xml

    Animation animFadein;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_fadein);
    
    txtMessage = (TextView) findViewById(R.id.txtMessage);
    btnStart = (Button) findViewById(R.id.btnStart);
    
    // 加载动画
    animFadein = AnimationUtils.loadAnimation(getApplicationContext(),
    R.anim.fade_in);
    
    }
    

      


    第三步: 设置动画监听器
    如果你要监听动画的事件,如开始,结束等,你需要实现AnimationListener监听器,重写以下方法。
    onAnimationEnd(Animation animation) - 当动画结束时调用
    onAnimationRepeat(Animation animation) - 当动画重复时调用
    onAniamtionStart(Animation animation) - 当动画启动时调用

    @Override
    public void onAnimationEnd(Animation animation) {
    // 在动画结束后使用
    
    // check for fade in animation
    if (animation == animFadein) {
    Toast.makeText(getApplicationContext(), "Animation Stopped",
    Toast.LENGTH_SHORT).show();
    }
    
    }
    
    @Override
    public void onAnimationRepeat(Animation animation) {
    //当动画重复时使用
    
    }
    
    @Override
    public void onAnimationStart(Animation animation) {
    //当动画开始使用
    
    }
    

      


    最后一步: 让动画动起来啦。可以使用任何UI元素调用startAnimation方法。
    以下是一个Textview元素调用的。
    txtMessage.startAnimation(animFadein);

    完整代码: 

    FadeInActivity(淡入动画)
    package com.chaowen.androidanimations;
    
    import info.androidhive.androidanimations.R;
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.view.animation.Animation;
    import android.view.animation.AnimationUtils;
    import android.view.animation.Animation.AnimationListener;
    import android.widget.Button;
    import android.widget.TextView;
    import android.widget.Toast;
    
    /**
     * 
     * @author chaowen
     *
     */
    public class FadeInActivity extends Activity implements AnimationListener {
    
    	TextView txtMessage;
    	Button btnStart;
    
    	Animation animFadein;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_fadein);
    
    		txtMessage = (TextView) findViewById(R.id.txtMessage);
    		btnStart = (Button) findViewById(R.id.btnStart);
    
    		// 加载动画
    		animFadein = AnimationUtils.loadAnimation(getApplicationContext(),
    				R.anim.fade_in);
    		
    		// 设置监听
    		animFadein.setAnimationListener(this);
    
    		// 按钮
    		btnStart.setOnClickListener(new View.OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				txtMessage.setVisibility(View.VISIBLE);
    				
    				// 开始动画
    				txtMessage.startAnimation(animFadein);
    			}
    		});
    
    	}
    
    	@Override
    	public void onAnimationEnd(Animation animation) {
    		// 在动画结束后使用
    
    		// check for fade in animation
    		if (animation == animFadein) {
    			Toast.makeText(getApplicationContext(), "Animation Stopped",
    					Toast.LENGTH_SHORT).show();
    		}
    
    	}
    
    	@Override
    	public void onAnimationRepeat(Animation animation) {
    		//当动画重复时使用
    
    	}
    
    	@Override
    	public void onAnimationStart(Animation animation) {
    		//当动画开始使用
    
    	}
    
    }
    

      

    一些重要的XML属性

    重要的XML动画属性
    android:duration 动画持续时间,时间以毫秒为单位
    android:startOffset 动画之间的时间间隔,从上次动画停多少时间开始执行下个动画
    android:interpolator 指定一个动画的插入器
    android:fillAfter 当设置为true ,该动画转化在动画结束后被应用
    android:repeatMode 定义重复的行为
    android:repeatCount 动画的重复次数

    以下是一些基本的动画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: 缩小

    zoom_out.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.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>
    

    还有几个就不再列出,有兴趣下源码看。

    http://pan.baidu.com/share/link?shareid=2682864564&uk=1863281063

      

     

     

  • 相关阅读:
    Java RandomAccessFile用法(转)
    CSS样式设计小技巧(水平居中,垂直居中)
    CSS总结(下篇)
    CSS总结(中篇)
    CSS总结(上篇)
    Html常用到的标签
    java 重定向和转发的区别(转)
    eclipse启动tomcat无法访问的解决方法(转)
    Busybox下mdev配置说明
    Linux 下网卡参数配置
  • 原文地址:https://www.cnblogs.com/andgoo/p/3182916.html
Copyright © 2020-2023  润新知