Android基础动画

来源：互联网发布：数据分析属于什么专业编辑：程序博客网时间：2024/06/05 06:56

这篇blog记录Android的四大基本动画及简单用法！

Android基础动画

Tween Animation 变换动画
.Frame Animation 帧动画
Layout Animation 布局动画
Property Animation 属性动画

一、先来看Tween Animation

Tween Animation也包含四种基本的动画效果：

Alpha:渐变透明度动画
Scale:渐变尺寸缩放动画
Translate:位置移动动画
Roatate:旋转动画

Tween Animation有几个共同的属性，即以上四种动画都有的属性：

Duration:动画持续时间（单位：毫秒）
fillAfter：设置为true,动画转化在动画结束后被应用
fillBefore:设置为true,动画转化在动画开始前被应用
interpolator：动画插入器（加速、减速插入器）
repeatCount:动画重复次数
repeateMode:顺序重复/倒序重复
startOffset:动画之间的时间间隔

以上四种Animation都有两种实现方式：

配置文件（/res/anim)—alpha、scale、translate、rotate，即在/res/anim目录下创建xml文件，使用相应的属性标签
java代码实现—AlphaAnimation、ScaleAnimation、TranslateAnimation、RotateAnimation，创建对应的动画对象，设置对象的属性

接下来依次看下上面四种Tween Animation的实现即效果

AlphaAnimation

fromAlpha:动画起始时透明度
toAlpha:动画终止时的透明度

效果：
这里写图片描述

首先上面效果动画我是通过xml文件定义的

res/目录下创建了anim文件夹，然后在anim文件夹下创建了alpha.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.1"        android:toAlpha="1.0"/></set>

然后代码中加载动画，通过Android的AnimationUtils类来加载xml动画，然后将动画绑定给图片

 /**     * 渐变透明度动画     * @param view     */    public void AlphaAnimation(View view){        loadAnimation=AnimationUtils.loadAnimation(context,R.anim.alpha);        img.startAnimation(loadAnimation);    }

ScaleAnimation

ScaleAnimation(缩放动画)

fromX、toX分别是起始和结束时x坐标上的伸缩尺寸
fromY,toY分别是起始和结束时y坐标上的伸缩尺寸
pivotX,pivotY分别为伸缩动画相对于x,y坐标开始的位置

效果：
这里写图片描述

scal的xml文件

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <scale        android:duration="2000"        android:fromXScale="0.0"        android:toXScale="1.0"        android:fromYScale="0.0"        android:toYScale="1.0"        android:interpolator="@android:anim/accelerate_interpolator"        android:pivotX="50%"        android:pivotY="50%"/></set>

代码中加载：

/**     * 渐变尺寸动画     * @param view     */    public void ScaleAnimation(View view){        loadAnimation=AnimationUtils.loadAnimation(context,R.anim.scal);        img.startAnimation(loadAnimation);    }

TranslateAnimation

fromXdelta，fromYdelta分别是起始时X、Y的坐标
toXDelta、toYDelta分别是结束时X、Y的坐标

效果：
这里写图片描述

anim文件夹下的translate动画

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <translate        android:duration="2000"        android:interpolator="@android:anim/accelerate_interpolator"        android:fromXDelta="10"        android:toXDelta="100"        android:fromYDelta="10"        android:toYDelta="10"/></set>

代码中使用

 /**     * 位移动画     * @param view     */    public void TranslateAnimation(View view){        loadAnimation=AnimationUtils.loadAnimation(context,R.anim.translate);        img.startAnimation(loadAnimation);    }

RoatateAnimation
旋转动画

fromDegrees起始的角度
toDegrees终止的角度
pivotX,pivotY分别为旋转动画相对于x,y的坐标开始位置

效果：
这里写图片描述

anim文件夹下的roatate动画

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <rotate        android:duration="2000"        android:fromDegrees="0"        android:toDegrees="+360"        android:interpolator="@android:anim/accelerate_interpolator"        android:pivotX="50%"        android:pivotY="50%"/></set>

代码中使用

/**     * 旋转动画     * @param view     */    public void RotateAnimation(View view){        loadAnimation=AnimationUtils.loadAnimation(context,R.anim.roatate);        img.startAnimation(loadAnimation);    }

上面Tween Animation的四种动画都看过了，也还是挺简单的,下面看两个组合动画的实现，很好理解，就是两个或者多个动画组合在一起，效果：
这里写图片描述

  /**     * 位移后旋转     * @param view     */    public void continue_1(View view){        loadAnimation=AnimationUtils.loadAnimation(context,R.anim.translate);        img.startAnimation(loadAnimation);        final Animation loadAnimation_1=AnimationUtils.loadAnimation(context, R.anim.roatate);        //给第一个动画绑定了一个监听事件，监听其结束事件        loadAnimation.setAnimationListener(new Animation.AnimationListener() {            @Override            public void onAnimationStart(Animation animation) {            }            @Override            public void onAnimationEnd(Animation animation) {                img.startAnimation(loadAnimation_1);            }            @Override            public void onAnimationRepeat(Animation animation) {            }        });    }

组合动画

效果：
这里写图片描述

这组动画用一个配置文件实现，配置文件里面包含两个动画：

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <alpha        android:duration="3000"        android:fromAlpha="0.2"        android:toAlpha="1.0"/>    <alpha        android:duration="3000"        android:fromAlpha="1.0"        android:toAlpha="0.2"/></set>

代码中加载动画

代码中加载这个动画就可以，按先后顺序执行

/**     * xml里面两个动画一次执行     * @param view     */    public void continue_2(View view){        loadAnimation=AnimationUtils.loadAnimation(context,R.anim.continue_anim);        img.startAnimation(loadAnimation);    }

上面动画基本都是在xml文件实现的，下面我们用代码的方式实现一个动画的效果
这里写图片描述

/**     * 闪烁     * @param view     */    public void flash(View view){        AlphaAnimation alphaAnimation=new AlphaAnimation(0.1f,1.0f);        alphaAnimation.setDuration(100);        alphaAnimation.setRepeatCount(10);        alphaAnimation.setRepeatMode(Animation.REVERSE);        img.startAnimation(alphaAnimation);    }

页面切换动画

 public void Change(View view){        Intent intent=new Intent(MainActivity.this,OtherActivity.class);        startActivity(intent);        //调用该方法绑定页面跳转的动画        overridePendingTransition(R.anim.zoom_in, R.anim.zoom_out);    }

关键是两个动画
zoom_in.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <scale        android:duration="1000"        android:fromXScale="0.1"        android:toXScale="1.0"        android:fromYScale="0.1"        android:toYScale="1.0"        android:pivotY="50%"        android:pivotX="50%"/>    <alpha        android:duration="1000"        android:fromAlpha="0"        android:toAlpha="1.0"/></set>

zoom_out.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">    <scale        android:duration="1000"        android:fromXScale="1.0"        android:toXScale="0.1"        android:fromYScale="1.0"        android:toYScale="0.1"        android:pivotX="50%"        android:pivotY="50%"/>    <alpha        android:duration="1000"        android:fromAlpha="1.0"        android:toAlpha="0.0"/></set>

布局动画

效果：
这里写图片描述

 @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_list);        listView=(ListView) findViewById(R.id.listview);        List<String> list=new ArrayList<String>();        for(int i=0;i<6;i++)        {            list.add("星期"+i);        }        ArrayAdapter<String> adapter=new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list);        listView.setAdapter(adapter);        LayoutAnimationController lac=new LayoutAnimationController(AnimationUtils.loadAnimation(this, R.anim.zoom_in));        lac.setOrder(LayoutAnimationController.ORDER_NORMAL);        listView.setLayoutAnimation(lac);        listView.startLayoutAnimation();    }

给listview绑定一个LayoutAnimationController对象即可。

逐帧动画
效果：
这里写图片描述

代码：

public void Button(View view){        //先把动画list绑定给imageview        img.setImageResource(R.drawable.anim_list);        //然后通过imageview拿到AnimationDrawable对象，再让AnimationDrawable开始就ok        AnimationDrawable animationDrawable= (AnimationDrawable) img.getDrawable();        animationDrawable.start();    }

anim_list.xml:

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android">    <item        android:drawable="@drawable/one"        android:duration="500"/>    <item        android:drawable="@drawable/two"        android:duration="500"/>    <item        android:drawable="@drawable/three"        android:duration="500"/>    <item        android:drawable="@drawable/four"        android:duration="500"/>    <item        android:drawable="@drawable/five"        android:duration="500"/>    <item        android:drawable="@drawable/six"        android:duration="500"/></animation-list>

基础动画到此为止！！！

0 0