android 之 animations 动画

时间：2024-08-17 18:35:32

android 提供的了两种机制你可以用来创建简单的动画：tweedned animation（渐变动画） 和 frame-by-frame animation（逐帧动画）（有道翻译的，汗！！！） 。这里主要介绍tweedned animation中的四种动画形式：alpha（淡入淡出效果）、scale（放缩）、rotate（旋转） 、translate（平移）。

那么怎么来实现这样的效果呢？大家向下看：（这里是在代码内部实现，虽然容易看，但是不利于维护和重用，下面还会介绍一种在外部实现的方法）

内部实现：

1.创建一个AnimationSet对象

2.创建一个你想要实现效果的Animation对象，如AlphaAnimations

3.为动画设置一些属性

4.将alpha对象加入到AnimationSet中

5.对图片开始执行AnimationSet

    private class alphaButtonListener implements OnClickListener{

        @Override

        public void onClick(View v) {

            //建立一个AnimationSet对象

            AnimationSet animationSet = new AnimationSet(true);

            //创建一个AlphaAnimation对象，设置透明度为由1到0

            AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);

            //设置整个动画持续的时间

            alphaAnimation.setDuration(10000);

            //将Animation对象添加到animationSet对象中

            animationSet.addAnimation(alphaAnimation);

            //对图片开始执行AnimationSet

            imagView.startAnimation(animationSet);

        }

    }

=========================

这里介绍一些常用的动画属性的设置

  • setDuration(long durationMillis)：用于设置动画的持续时间，单位是毫秒。
  • setFillAfter：设置为true后，该动画专化在动画结束后应用，也就是说，动画将会停留在结束时的状态
  • setFillBefore：设置为true后，在动画开始前应用动画转化。（这个系统默认是设置为true的）（这个我有点不太懂，网上有的说是设置动画完成后回到起始位置，好像不太对，如果你知道的话，一定要留言告诉我）
  • setStartOffset：设置当发出开始动画的指令后经过多长时间开始执行动画
  • setRepeatMode：设置动画的重复次数

===========================

下面是具体的ManiActivity.java代码,对各个动画都有详细的解释：

package com.mecury.animationstest;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.animation.AlphaAnimation;

import android.view.animation.Animation;

import android.view.animation.AnimationSet;

import android.view.animation.RotateAnimation;

import android.view.animation.ScaleAnimation;

import android.view.animation.TranslateAnimation;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends Activity {

    private ImageView imagView;

    private Button alphaButton;

    private Button scaleButton;

    private Button rotateButton;

    private Button translateButton;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        imagView = (ImageView) findViewById(R.id.imageView);

        alphaButton = (Button) findViewById(R.id.alphaButton);

        alphaButton.setOnClickListener(new alphaButtonListener());

        scaleButton = (Button) findViewById(R.id.scaleButton);

        scaleButton.setOnClickListener(new scaleButtonListener());

        rotateButton = (Button) findViewById(R.id.rotateButton);

        rotateButton.setOnClickListener(new rotateButtonListener());

        translateButton = (Button) findViewById(R.id.translateButton);

        translateButton.setOnClickListener(new translateButtonListener());

    }

    /*

     * 淡入淡出效果

     */

    private class alphaButtonListener implements OnClickListener{

        @Override

        public void onClick(View v) {

            //建立一个AnimationSet对象

            AnimationSet animationSet = new AnimationSet(true);

            //创建一个AlphaAnimation对象，设置透明度为由1到0

            AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);

            //设置整个动画持续的时间

            alphaAnimation.setDuration(10000);

            //将Animation对象添加到animationSet对象中

            animationSet.addAnimation(alphaAnimation);

            //对图片开始执行AnimationSet

            imagView.startAnimation(animationSet);

        }

    }

    /*

     * 缩放效果

     */

    private class scaleButtonListener implements OnClickListener{

        @Override

        public void onClick(View v) {

            AnimationSet animationSet = new AnimationSet(true);

            /*这里用的是百分比表示法，f表示浮点型

             * 四个参数代表缩放的比例，前两个代表了x轴的缩放（这里用的是百分比表示法：1f代表原来的宽度，0.5f代表原来宽度的一半）后两个代表了y轴的缩放

             * Animation中有两个常用的属性，RELATIVE_TO_SELF（依赖自身）,RELATIVE_TO_PARENT(依赖父控件）

             * 后面四个表明缩放的轴为依赖自身的在x为0.5f，y为0.5f的地方

             */

            ScaleAnimation scaleAnimation = new ScaleAnimation(1f, 0.1f, 1f, 0.1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

            animationSet.addAnimation(scaleAnimation);

            animationSet.setDuration(2000);

            imagView.startAnimation(animationSet);

        }

    }

    /*

     * 旋转效果

     */

    private class rotateButtonListener implements OnClickListener{

        @Override

        public void onClick(View v) {

            AnimationSet animationSet = new AnimationSet(true);

            /*第一个参数，表示图片相对于起始位置的角度，

             *第二个参数：表示动画结束时图片的偏转角度。这里就是由0变到360即原点

             *后面的四个参数是为了设置图片旋转围绕的轴，意思是轴的横坐标是依赖父控件的0f处，纵坐标是依赖父控件的-1f处

             *这里要着中说的是：关于坐标的问题。这这个动画中，坐标原点是图片的左上角，原点左x轴和下y轴代表正轴

             *此时的围绕的点的坐标轴就在图片的正上方

             */

            RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, -1f);

            rotateAnimation.setDuration(2000);

            animationSet.addAnimation(rotateAnimation);

            imagView.startAnimation(animationSet);

        }

    }

    /*

     * 移动效果

     */

    private class translateButtonListener implements OnClickListener{

        @Override

        public void onClick(View v) {

            AnimationSet animationSet = new AnimationSet(true);

            /*

             * 前两个参数决定了动画开始时图片的x轴起始位置

             * 第三四个参数表示图片将要到达位置的x轴

             * 后面四个是表示y轴的和上面类似

             * 代码中表示：由起始位置位移到右上角

             */

            TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f,

                    Animation.RELATIVE_TO_PARENT, 1f,

                    Animation.RELATIVE_TO_SELF,0f,

                    Animation.RELATIVE_TO_PARENT, -1f);

            translateAnimation.setDuration(2000);

            animationSet.addAnimation(translateAnimation);

            imagView.startAnimation(animationSet);

        }

    }

}

下面是我的布局文件：

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

    tools:context="com.mecury.animationstest.MainActivity" >

    <Button

        android:id="@+id/translateButton"

        android:layout_width="match_parent"

        android:layout_height="40dp"

        android:layout_alignParentBottom="true"

        android:text="Translate平移"/>

    <Button

        android:id="@+id/rotateButton"

        android:layout_width="match_parent"

        android:layout_height="40dp"

        android:layout_above="@id/translateButton"

        android:text="Rotate旋转"/>

    <Button

        android:id="@+id/scaleButton"

        android:layout_width="match_parent"

        android:layout_height="40dp"

        android:layout_above="@id/rotateButton"

        android:text="Scale缩放"/>

    <Button

        android:id="@+id/alphaButton"

        android:layout_width="match_parent"

        android:layout_height="40dp"

        android:layout_above="@id/scaleButton"

        android:text="Alpha淡入淡出"/>

    <ImageView

        android:id="@+id/imageView"

        android:layout_width="50dp"

        android:layout_height="50dp"

　　　　 android:layout_centerInParent="true"

        android:src="@drawable/china"/>

</RelativeLayout>

在外部资源中实现：

1.在res文件中新建一个名为anim的文件

2.在文件中中新建.xml文件（这里以alpha为例），如alpha.xml

3.在文件中设置相应的属性

4.使用AnimationUtils来装载动画设置文件

这里我的anim中四个动画代码文件：

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

<!-- aplha是一个淡入淡出的效果

startOffser时间偏移量，在动画开始之前，停顿500毫秒 -->

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha

        android:fromAlpha="1"

        android:toAlpha="0"

        android:startOffset="500"

        android:duration="2000"/>

</set>

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

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- scale是实现缩放

    privat 是设置缩放围绕的轴的缩放

    privatX="50"使用的是绝对位置

    ="%50"相对控件本身定位，在控件的1/2处

    ="50%p" 相对于父控件的位置定位-->

    <scale

        android:fromXScale="1"

        android:toXScale="0.1"

        android:fromYScale="1"

        android:toYScale="0.1"

        android:pivotX="50%"

        android:pivotY="50%"

        android:startOffset="500"

        android:duration="2000"/>

</set>

<?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="100%p"

        android:pivotY="0%p"

        android:startOffset="500"

        android:duration="2000"/>

</set>

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

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate

        android:fromXDelta="0%"

        android:toXDelta="100%p"

        android:fromYDelta="0%"

        android:toYDelta="-100%p"

        android:interpolator="@android:anim/decelerate_interpolator"

        android:startOffset="500"

        android:duration="30000"

        />

</set>

intepolator是用来设置动画执行的速度

Accelerate_Decelerate_Interpolator:在动画开始和结束时速率较慢，中间加速

Accelerate_Interpolator:在动画开始的时候速度较慢，逐渐加速

Cycle_Interpolator:速度改变沿着动画循环播放的次数，以正弦曲线式变化

Deceletrate_Interpolator:在的动画开始是速度改变比较慢，然后突然减速

Linear_Interpolator:动画匀速改变

使用：android：Interpolator="@android:anim/....."

mianActivity.java:

package com.example.animation_01;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends Activity {

    private ImageView imagView;

    private Button alphaButton;

    private Button scaleButton;

    private Button rotateButton;

    private Button translateButton;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        imagView = (ImageView) findViewById(R.id.imageView);

        alphaButton = (Button) findViewById(R.id.alphaButton);

        alphaButton.setOnClickListener(new alphaButtonListener());

        scaleButton = (Button) findViewById(R.id.scaleButton);

        scaleButton.setOnClickListener(new scaleButtonListener());

        rotateButton = (Button) findViewById(R.id.rotateButton);

        rotateButton.setOnClickListener(new rotateButtonListener());

        translateButton = (Button) findViewById(R.id.translateButton);

        translateButton.setOnClickListener(new translateButtonListener());

    }

    class alphaButtonListener implements OnClickListener{

        @Override

        public void onClick(View v) {

            //使用AnimaionUtils来装载动画设置文件

            Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);

            imagView.startAnimation(animation);

        }

    }

    class scaleButtonListener implements OnClickListener{

        @Override

        public void onClick(View v) {

            Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);

            imagView.startAnimation(animation);

        }

    }

    class rotateButtonListener implements OnClickListener{

        @Override

        public void onClick(View v) {

            Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);

            imagView.startAnimation(animation);

        }

    }

    class translateButtonListener implements OnClickListener{

        @Override

        public void onClick(View v) {

            Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);

            imagView.startAnimation(animation);

        }

    }

}

布局文件和第一个一样。

相关文章