android通过xml自定义补间动画

时间: 2015-03-22 01:37 栏目: Android 浏览: 7025 赞: 0 踩: 0 字体:

以下为本篇文章全部内容:

google虽然给我们提供了很多方便的动画,但是对于现在功能强大,动画炫丽的app来说,这点动画远远不够,并且如果大家的app都是一样千遍一律的同样动画那么我相信对用户体验来说大多数都认为是不好的。会感觉没有创新的感觉,我们往往很少用到系统提供的动画,而是自己定义属于自己app的动画,上次我发表过一篇关于《android使用xml定义帧动画》的博文,今天我再更新一篇android如何通过xml自定义补间动画。本博文主要是教会大家对于xml自定义补间动画的使用方法和认识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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.bujian.MainActivity" >

    <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:layout_weight="1"
            android:onClick="trans"
            android:text="移动" />

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

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

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="set"
            android:text="混合" />
    </LinearLayout>

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

java代码:

public class MainActivity extends Activity {
	private ImageView iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.iv);
    }
    
    //透明
    public void alpha(View view){
    	Animation a = AnimationUtils.loadAnimation(this,R.anim.alpha);
    	iv.startAnimation(a);
    }
    
    //移动
    public void trans(View view){
    	Animation ta = AnimationUtils.loadAnimation(this, R.anim.translate);
    	iv.startAnimation(ta);
    }
    
    //缩放
    public void scale(View view){
    	Animation sa = AnimationUtils.loadAnimation(this, R.anim.scale);
    	iv.startAnimation(sa);
    }
    
    //旋转
    public void rotate(View view){
    	Animation ra = AnimationUtils.loadAnimation(this, R.anim.rotate);
    	iv.startAnimation(ra);
    }
    
    //混合
    public void set(View view){
    	Animation set = AnimationUtils.loadAnimation(this, R.anim.set);
    	iv.startAnimation(set);
    }
}

移动的效果:

移动.gif

translate.xml(移动代码):

<?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:repeatCount="1"
    android:repeatMode="reverse"
    android:toXDelta="0"
    android:toYDelta="200" >

    <!-- 
    	duration:播放时长 
    	fromXDelta:x起点 
    	toXDelta:x终点  
    	fromYDelta:y起点 
    	toYDelta:y终点 
    	repeatCount:播放次数  
    	repeatMode:播放模式 -->

</translate>

透明渐变效果:

透明.gif

alpha.xml(透明渐变代码):

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromAlpha="0.0"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:toAlpha="1.0" >
	
    <!-- 
    	duration:播放时长
    	fromAlpha:初始透明度
    	toAlpha:最终透明度
    	repeatCount:播放次数
    	repeatMode:播放模式
     -->

</alpha>

旋转效果:

旋转.gif

rotate.xml(旋转代码):

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:toDegrees="360" >

    <!-- 
    	duration:播放时长
    	fromDegrees:开始旋转度数
    	toDegrees:旋转度数
    	pivotX:围绕x什么位置旋转,50%为自身的一半,50%p相对于父窗口
    	pivotY:围绕y什么位置旋转,50%为自身的一半,50%p相对于父窗口
    	repeatCount:播放次数
    	repeatMode:播放模式
     -->

</rotate>

缩放效果:

缩放.gif

scale.xml(缩放代码):

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXScale="0"
    android:fromYScale="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:toXScale="1.0"
    android:toYScale="1.0" >

    <!-- 
    	duration:播放时长
    	fromXScale:x开始缩放比例
    	toXScale:x最终缩放比例
    	fromYScale:y开始缩放比例
    	toYScale:y最终缩放比例
    	pivotX:x开始缩放位置,50%为自身的一半,50%p相对于父窗口
    	pivotY:y开始缩放位置,50%为自身的一半,50%p相对于父窗口
    	repeatCount:播放次数
    	repeatMode:播放模式
     -->

</scale>

透明缩放混合效果:

透明缩放混合.gif

set.xml透明缩放混合代码:

<?xml version="1.0" encoding="utf-8"?>
<set>

    <alpha
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromAlpha="0.0"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toAlpha="1.0" >

        <!--
    	duration:播放时长
    	fromAlpha:初始透明度
    	toAlpha:最终透明度
    	repeatCount:播放次数
    	repeatMode:播放模式
        -->

    </alpha>

    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromXScale="0"
        android:fromYScale="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toXScale="1.0"
        android:toYScale="1.0" >

        <!--
    	duration:播放时长
    	fromXScale:x开始缩放比例
    	toXScale:x最终缩放比例
    	fromYScale:y开始缩放比例
    	toYScale:y最终缩放比例
    	pivotX:x开始缩放位置,50%为自身的一半,50%p相对于父窗口
    	pivotY:y开始缩放位置,50%为自身的一半,50%p相对于父窗口
    	repeatCount:播放次数
    	repeatMode:播放模式
        -->

    </scale>

</set>

以上代码希望能帮助大家在学习的路上少走一些弯路,也希望能和大家共同进步。

谢谢大家对本博客的支持,本站专注原创技术文章,博主半夜三更为大家更新博文不容易,请转载带上本文链接注明出处。

如果大家有什么疑问可以加我QQ327388905进行解答,也可以加入交流群ThinkPHP交流群

扫二维码快速加群:

qun.png