Android 动画

Android基础动画

  1. Tween Animation 变换动画
  2. Frame Animation 帧动画
  3. Layout Animation 布局动画
  4. Property Animation 属性动画

Tween Animation（变换动画）在Android中又被分为四种：
Alpha：渐变透明度动画
Scale：渐变尺寸缩放动画
Translate：位置移动动画
Rotate：旋转动画

Tween Animation共同属性：

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

Animation实现方式有两种：

  1. 配置文件（/res/anim）——alpha、scale、translate、rotate。更简单。
  2. Java代码实现——AlphaAnimation、ScaleAnimation、TranAnimation、RotateAnimation。更灵活。
    两种方式各有所长：
    如果变换比较多，而且很多参数都是动态的（比如时间间隔、位移移动的坐标通过动态获取、动态计算），则推荐使用Java代码实现。
    如果动画是一个固定的效果，则推荐使用配置文件的方式。

通过加载配置文件的方式实现动画：
Animation scale = AnimationUtils.loadAnimation(TweenActivity.this,R.anim.scale_anim);
//开始动画
img.startAnimation(scale);

MainActivity.java

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity implements OnClickListener {

    private ImageView image;
    private Button scale;
    private Button rotate;
    private Button translate;
    private Button mix;
    private Button alpha;
    private Button continue_btn;
    private Button continue_btn2;
    private Button flash;
    private Button move;
    private Button change;
    private Button layout;
    private Button frame;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        image = (ImageView) findViewById(R.id.image);
        scale = (Button) findViewById(R.id.scale);
        rotate = (Button) findViewById(R.id.rotate);
        translate = (Button) findViewById(R.id.translate);
        alpha = (Button) findViewById(R.id.alpha);
        continue_btn = (Button) findViewById(R.id.continue_btn);
        continue_btn2 = (Button) findViewById(R.id.continue_btn2);
        flash = (Button) findViewById(R.id.flash);
        move = (Button) findViewById(R.id.move);
        change=(Button) findViewById(R.id.change);
        layout=(Button) findViewById(R.id.layout);
        frame=(Button) findViewById(R.id.frame);
        scale.setOnClickListener(this);
        rotate.setOnClickListener(this);
        translate.setOnClickListener(this);
        alpha.setOnClickListener(this);
        continue_btn.setOnClickListener(this);
        continue_btn2.setOnClickListener(this);
        flash.setOnClickListener(this);
        move.setOnClickListener(this);
        change.setOnClickListener(this);
        layout.setOnClickListener(this);
        frame.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        // TODO Auto-generated method stub
        Animation loadAnimation;
        switch (view.getId()) {
        case R.id.scale: {
            loadAnimation = AnimationUtils.loadAnimation(this, R.anim.scale);
            image.startAnimation(loadAnimation);
            break;
        }

        case R.id.rotate: {
            loadAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate);
            image.startAnimation(loadAnimation);
            break;
        }

        case R.id.translate: {

            loadAnimation = AnimationUtils
                    .loadAnimation(this, R.anim.translate);
            image.startAnimation(loadAnimation);
            break;
        }

        case R.id.continue_btn: {
            loadAnimation = AnimationUtils
                    .loadAnimation(this, R.anim.translate);
            image.startAnimation(loadAnimation);
            final Animation loadAnimation2 = AnimationUtils.loadAnimation(this,
                    R.anim.rotate);
            loadAnimation.setAnimationListener(new AnimationListener() {

                @Override
                public void onAnimationStart(Animation arg0) {
                    // TODO Auto-generated method stub

                }

                @Override
                public void onAnimationRepeat(Animation arg0) {
                    // TODO Auto-generated method stub

                }

                @Override
                public void onAnimationEnd(Animation arg0) {
                    // TODO Auto-generated method stub
                    image.startAnimation(loadAnimation2);
                }
            });
            break;
        }

        case R.id.continue_btn2: {
            loadAnimation = AnimationUtils.loadAnimation(this,
                    R.anim.continue_anim);
            image.startAnimation(loadAnimation);
            break;
        }

        case R.id.alpha: {      
            loadAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha);
            image.startAnimation(loadAnimation);
            break;
        }

        case R.id.move: {
            TranslateAnimation translate = new TranslateAnimation(-50, 50,
                    0, 0);
            translate.setDuration(1000);
            translate.setRepeatCount(Animation.INFINITE);
            translate.setRepeatMode(Animation.REVERSE);
            image.startAnimation(translate);

            break;
        }

        case R.id.flash: {

            AlphaAnimation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
            alphaAnimation.setDuration(100);
            alphaAnimation.setRepeatCount(10);
            
            alphaAnimation.setRepeatMode(Animation.REVERSE);
            image.startAnimation(alphaAnimation);

            break;
        }
        
        case R.id.change:
        {
            Intent intent=new Intent(MainActivity.this,MainActivity2.class);
            startActivity(intent);
            overridePendingTransition(R.anim.zoom_in,R.anim.zoom_out);
            break;
        }
        
        case R.id.layout:
        {
            Intent intent=new Intent(MainActivity.this,ListActivity.class);
            startActivity(intent);
            break;
        }
        
        case R.id.frame:
        {
            image.setImageResource(R.drawable.anim_list);       
            break;
            
        }

        }
    }

}

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="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical" >

        <Button
            android:id="@+id/scale"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="5dp"
            android:paddingBottom="5dp"
            android:paddingTop="5sp"
            android:text="ScaleAnimation(缩放动画)" />

        <Button
            android:id="@+id/alpha"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="5dp"
            android:paddingBottom="5dp"
            android:paddingTop="5sp"
            android:text="AlphaAnimation（透明度动画）" />

        <Button
            android:id="@+id/rotate"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="5dp"
            android:paddingBottom="5dp"
            android:paddingTop="5sp"
            android:text="RotateAnimation（旋转动画）" />

        <Button
            android:id="@+id/translate"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="5dp"
            android:paddingBottom="5dp"
            android:paddingTop="5sp"
            android:text="TranslateAnimation（位移动画）" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/continue_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="5dp"
                android:paddingBottom="5dp"
                android:paddingTop="5sp"
                android:text="续播1" />

            <Button
                android:id="@+id/continue_btn2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="5dp"
                android:paddingBottom="5dp"
                android:paddingTop="5sp"
                android:text="续播2" />

            <Button
                android:id="@+id/flash"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="5dp"
                android:paddingBottom="5dp"
                android:paddingTop="5sp"
                android:text="闪烁" />

            <Button
                android:id="@+id/move"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="5dp"
                android:paddingBottom="5dp"
                android:paddingTop="5sp"
                android:text="抖动" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/change"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="5dp"
                android:paddingBottom="5dp"
                android:paddingTop="5sp"
                android:text="切换动画" />

            <Button
                android:id="@+id/layout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="5dp"
                android:paddingBottom="5dp"
                android:paddingTop="5sp"
                android:text="布局动画" />

            <Button
                android:id="@+id/frame"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="5dp"
                android:paddingBottom="5dp"
                android:paddingTop="5sp"
                android:text="逐帧动画" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:src="@drawable/ic_launcher" >
        </ImageView>
    </LinearLayout>

</LinearLayout>

ListActivity.java

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.animation.AnimationUtils;
import android.view.animation.LayoutAnimationController;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class ListActivity extends Activity{
    
    private ListView listView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.list_layout);
        listView=(ListView) findViewById(R.id.listView);
        List<String>list=new ArrayList<String>();
        for(int i=0;i<20;i++)
        {
            list.add("aa"+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();
    }

}

MainActivity2.java

package com.imooc.android_animation;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity2 extends Activity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main2);
    }
    
}

res/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" >
    </alpha>

</set>

continue_anim.xml

<?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:startOffset="3000"
        android:toAlpha="0.2" />

</set>

rotate.xml

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

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="+360" />

</set>

scale.xml

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

    <scale
        android:duration="2000"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />

</set>

translate.xml

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

    <translate
        android:duration="1000"
        android:fromXDelta="10"
        android:fromYDelta="10"
        android:toXDelta="100"
        android:toYDelta="100" />

</set>

zoom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator" >
  
  <scale
        android:duration="1000"
        android:fromXScale="0.1"
        android:fromYScale="0.1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
  <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"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:zAdjustment="top" >

    <scale
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%p"
        android:pivotY="50%p"
        android:toXScale="0.1"
        android:toYScale="0.1" />

    <alpha
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromAlpha="1.0"
        android:toAlpha="0" />

</set>

演示效果：

anim.gif
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容