Android基础笔记——动画(补间动画:Tween xml实现)

Android动画分为:

1、补间动画(Tween动画)

完成视图简单的变化,比如放大、缩小、旋转、透明度的渐变等等。

2、帧动画(Frame动画)

帧动画是在短时间内连续显示一系列图像的过程,其显示效果是一个移动或者变化的对象。


补间动画(Tween动画)分类

1、渐变动画AlphaAnimation

改变视图的透明度

2、移动动画TranslateAnimation

从某位置移动到另一个位置

3、缩放动画ScaleAnimation

以某点为中心缩放视图

4、旋转动画RotateAnimation

以某点为中心旋转动画


Tween动画创建方法:

1、通过XML方式创建动画

——把设置的动画属性写到XML中

——利用AnimationUtils类加载XML

——给布局设置动画

2、通过代码动态添加

——构造对应的动画类

——设置动画参数

——给布局设置动画


Tween动画示例:

Alpha动画:

xml文件:

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="false"
    android:fromAlpha="1"
    android:toAlpha="0" >
<!--
duration:时间
fillAfter:动画完成之后,是否保留最后的透明状态
fromAlpha:1、表示透明
toAlpha:0、表示透明
-->
</alpha>


Translate动画:

xml文件:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:repeatCount="1"
    android:toXDelta="100"
    android:toYDelta="100" >

    <!--
fromXDelta:起始x轴位置
 fromYDelta:起始y轴位置
 toXDelta:目的x轴位置
toYDelta:目的y轴位置
repeatCount:重复次数
    -->

</translate>

Scale动画:

xml文件:

<?xml version="1.0" encoding="utf-8"?>
<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="0"
    android:toYScale="0" >
<!-- 
从起始位置缩放到0,也就是消失
pivotX:旋转的圆心x坐标
pivotY:旋转的圆心y坐标
 -->
</scale>

Rotate动画:

xml文件:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="180" >
<!-- 
从fromDegrees顺时针旋转 toDegrees(180)度
pivotX,pivotY 旋转的圆心
-->
</rotate>

set动画:

xml文件:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <alpha
        android:duration="1000"
        android:fromAlpha="0"
        android:toAlpha="1" />

    <scale
        android:duration="1000"
        android:fromXScale="0"
        android:fromYScale="0"
        android:startOffset="1000"
        android:toXScale="2"
        android:toYScale="2" />
    <!--
  alpha:渐变,Scale:缩放
    在set中可加入多个动画
  Scale中的startOffset,可实现延迟效果,
    也就是在上一个(alpha)动画执行多久之后执行下一个(Scale)动画

    -->

</set>


MainActivity代码:

package com.example.tweenanimationdemo;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import android.os.Build;

public class MainActivity extends Activity implements OnClickListener {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tween);

		findViewById(R.id.alpha).setOnClickListener(this);
		findViewById(R.id.translate).setOnClickListener(this);
		findViewById(R.id.scale).setOnClickListener(this);
		findViewById(R.id.rotate).setOnClickListener(this);
		findViewById(R.id.set).setOnClickListener(this);

	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		ImageView iv = (ImageView) findViewById(R.id.iv);
		Animation anim = null;
		switch (v.getId()) {
		case R.id.alpha:
			anim = AnimationUtils.loadAnimation(this, R.anim.anim_alpha);
			break;

		case R.id.translate:
			anim = AnimationUtils.loadAnimation(this, R.anim.anim_translate);
			break;
		case R.id.scale:
			anim = AnimationUtils.loadAnimation(this, R.anim.anim_scale);
			break;
		case R.id.rotate:
			anim = AnimationUtils.loadAnimation(this, R.anim.anim_rotate);
			break;
		case R.id.set:
			anim = AnimationUtils.loadAnimation(this, R.anim.anim_set);
			break;
		}
		iv.startAnimation(anim);
	}

}


布局页面代码:

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

    <Button
        android:id="@+id/alpha"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="渐变动画" />

    <Button
        android:id="@+id/translate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="移位动画" />

    <Button
        android:id="@+id/scale"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="缩放动画" />

    <Button
        android:id="@+id/rotate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="旋转动画" />

    <Button
        android:id="@+id/set"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="综合动画" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

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

</LinearLayout>

猜你喜欢

转载自blog.csdn.net/etmessi/article/details/42501997