Android Animation使用

Android Animation使用

引:Animator在好几个地方都能使用到.像进入程序界面目前很多都会使用个渐变效果.当渐变效果结束后进入到主界面.当然在渐变过程会执行程序初始化的工作.其次像Activity直接的切换也会用到Animator.

3.0为分界线使用动画有两个方式.主要讲解一下3.0以前的使用方式.一开始也是好奇.为什么会有android.animation这一个动画包.其实android.animation是3.0以后新加进去的.android.view.animation是在Api 1就已经设计好的.当后来看到View包里面说明顿时明白!

和动画相关主要有几个类:Animation,TranslateAnimation,AlphaAnimation,ScaleAnimation,RotateAnimation,AnimationSet

Animation 动画类的基类.提供基础功能.如,动画展示前的延时、重复方式、重复次数、动画结束后是否停留等等功能.主要是集成一些控制上的功能.

• TranslateAnimation 平移动画
• RotateAnimation 旋转动画
• AlphaAnimation 渐变动画
• ScaleAnimation 缩放动画
• AnimationSet 动画集合,AnimationSet可包含一系列的平移、渐变、缩放、旋转动画并且可以设置所包含的动画播放方式.其实可以理解成一个动画的容器.很多效果需要好几个动画结合起来才能实现.AnimationSet就是充当和角色.

动画的使用可以通过代码实现也可以通过xml文件描述动画然后使用AnimationUtils加载.推荐第二种方式使用动画.可以将代码和动画效果分离,其次使用起来也更简单方便.

目录结构

MainActivity.java代码

package com.example.dsliang.animationdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

import butterknife.ButterKnife;
import butterknife.InjectView;

public class MainActivity extends Activity implements View.OnClickListener {

    @InjectView(R.id.txtTestView)
    TextView txtTestView;
    @InjectView(R.id.btnTranslate)
    Button btnTranslate;
    @InjectView(R.id.btnAlpha)
    Button btnAlpha;
    @InjectView(R.id.btnScale)
    Button btnScale;
    @InjectView(R.id.btnRotate)
    Button btnRotate;
    @InjectView(R.id.btnAnimationSet)
    Button btnAnimationSet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

        initAnimation();

        btnTranslate.setOnClickListener(this);
        btnAlpha.setOnClickListener(this);
        btnScale.setOnClickListener(this);
        btnRotate.setOnClickListener(this);
        btnAnimationSet.setOnClickListener(this);
        txtTestView.setOnClickListener(this);
    }

    private Animation mTranslate, mAlpha, mScale, mRotate, mAnimationSet;

    private void initAnimation() {

        mTranslate = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
        mAlpha = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
        mScale = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
        mRotate = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
        mAnimationSet = AnimationUtils.loadAnimation(MainActivity.this, R.anim.animation_set);

    }

    /** * Called when a view has been clicked. * * @param v The view that was clicked. */
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.txtTestView:
                Toast.makeText(MainActivity.this, "你点中我了", Toast.LENGTH_SHORT).show();
                break;
            case R.id.btnAlpha:
                txtTestView.startAnimation(mAlpha);
                break;
            case R.id.btnTranslate:
                txtTestView.startAnimation(mTranslate);
                break;
            case R.id.btnScale:
                txtTestView.startAnimation(mScale);
                break;
            case R.id.btnAnimationSet:
                txtTestView.startAnimation(mAnimationSet);
                break;
            case R.id.btnRotate:
                txtTestView.startAnimation(mRotate);
                break;
        }
    }
}

activity_main.xml代码

<?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">

    <LinearLayout  android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="center">

        <TextView  android:clickable="true" android:id="@+id/txtTestView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="AnimationDeme" android:textSize="30sp" />

    </LinearLayout>

    <Button  android:id="@+id/btnTranslate" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="TranslateAnimation" />

    <Button  android:id="@+id/btnAlpha" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="AlphaAnimation" />

    <Button  android:id="@+id/btnScale" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="ScaleAnimation" />

    <Button  android:id="@+id/btnRotate" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="RotateAnimation" />

    <Button  android:id="@+id/btnAnimationSet" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="AnimationSet" />


</LinearLayout>

alpha.xml代码

<?xml version="1.0" encoding="utf-8"?>
<!--0:完全透明-->
<!--1:不透明-->
<alpha  android:fromAlpha="1" android:toAlpha="0" android:duration="1000" xmlns:android="http://schemas.android.com/apk/res/android" />

animation_set.xml代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:fillEnabled="true" android:fillAfter="true" >
    <translate  android:duration="1000" android:fromXDelta="0" android:fromYDelta="10" android:toXDelta="20%" android:toYDelta="20%" />
    <alpha  android:duration="1000" android:fromAlpha="1" android:toAlpha="0.5" />

    <rotate  android:duration="200" android:fromDegrees="0" android:startOffset="1000" android:toDegrees="90" />
</set>

rotate.xml代码

<?xml version="1.0" encoding="utf-8"?>
    <!--坐标有三种模式:精确,自身百分比,父布局的百分比 精确:50 自身百分比:50% 父布局的百分比:50% repeatCount:重复次数 repeatMode:重复模式 reverse:原路径返回 restart:重复播放 -->
<rotate  android:repeatMode="restart" android:repeatCount="1" android:fromDegrees="0" android:toDegrees="45" android:duration="1000" android:pivotX="50%" android:pivotY="50%" xmlns:android="http://schemas.android.com/apk/res/android" />

scale.xml代码

<?xml version="1.0" encoding="utf-8"?>
<!--0:0-->
<!--1:自身大小-->
<scale  android:fromXScale="0" android:toXScale="1" android:fromYScale="0" android:toYScale="1" android:duration="1000" android:pivotX="50%" android:pivotY="50%" xmlns:android="http://schemas.android.com/apk/res/android" />

translate.xml代码

<?xml version="1.0" encoding="utf-8"?>
    <!--坐标有三种模式:精确,自身百分比,父布局的百分比-->
    <!--"50%": 移动自身的50%像素-->
    <!--"100%p": 移动父布局的50%像素-->
    <!--"10": 移动10像素-->
<translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:fromXDelta="0" android:fromYDelta="10" android:toXDelta="50%" android:toYDelta="100%p" />

以上把四种动画的基本功能都展示过一遍.

• TranslateAnimation、ScaleAnimation、RotateAnimation这三个动画在使用的时候会牵涉到中心点或者移动距离的问题.
  可以看到Api里面的对于有三个属性,分别对应精确指标,自身百分比,父布局的百分比.是什么意思?
  

例如:

<!--移动200像素-->
<!--对应Animation.ABSOLUTE-->
android:toXDelta="200"
<!--移动自身尺寸的20%像素,假设自身尺寸100像素那么就移动20个像素-->
<!--对应RELATIVE_TO_SELF-->
android:toXDelta="20%"
<!--移动父布局尺寸的50%像素假设父布局尺寸100像素那么就移动50个像素-->
<!--对应RELATIVE_TO_PARENT-->
android:toXDelta="50%p"

• 如果你想通过动画实现View的移动那么你就错了!注意最后一个例子.点击移动后的TextView没有触发onclick事件是因为通过动画改变位置只是把显示的位置改变了.控件的位置是依然没变.只有点击原来的位置才能触发.怎么处理?
  这种情况我们可事先在动画最终停留的位置安排一个控件,把显示状态设置为gone或者invisible.动画结束以后把该位置的控件设置为visible并且把原控件设置为gone或者invisible.

• 动画结束状态设置.
  

    <!--当需要动画结束后保存位置,这两个需要设置-->
    <!--不设置fillEnabled为true,fillAfter为true.动画结束后会回到原位-->
    android:fillEnabled="true"
    android:fillAfter="true"

效果图:

参考
1:Animation http://www.android-doc.com/reference/android/view/animation/package-summary.html
2:Animation http://www.android-doc.com/reference/android/animation/package-summary.html
3:AnimationSet http://www.android-doc.com/reference/android/view/animation/AnimationSet.html
4:AlphaAnimation http://www.android-doc.com/reference/android/view/animation/AlphaAnimation.html
5:ScaleAnimation http://www.android-doc.com/reference/android/view/animation/ScaleAnimation.html
6:RotateAnimation http://www.android-doc.com/reference/android/view/animation/RotateAnimation.html
7:AnimationUtils http://www.android-doc.com/reference/android/view/animation/AnimationUtils.html
8:View http://www.android-doc.com/reference/android/view/View.html