Android动画基础知识

一Android基础动画

1.变换动画（Tween Animation）

2.属性动画（PropertyAnimation）：

3.帧动画（FrameAnimation）

4.布局动画（LayoutAnimation）：

--------------------------------------------------------------

<1>Tween Animation种类：
Alpha渐变透明度动画
Scale渐变尺寸动画
Translate位置移动动画
Rotate旋转动画

<2>Tween Animation共同属性：
Duration：动画持续时间（ms）
fillAfter 设置为true，动画转化在动画结束后被应用
fillBefore 设置为true，动画转化在动画开始前被应用
interpolator 动画插入器（加速/减速）
repeatCount 重复次数
repateMode 顺序重复/倒序重复
startOffset 动画之间的时间间隔

<3>Animation实现方式：
配置文件（res/anim）- alpha，scale，translate，rotate（适用于固定场合）
Java代码实现-AlphaAnimation，ScaleAnimation，TranslateAnimation，RotateAnimation

<4>Example(Java代码创建)

配置xml：

Animation sacle = AnimationUtils.loadAnimation(ManiActivity.this,R.anim.scale_anim);
img.startAnimation(scale);

Java：

//创建Alpha动画，透明度10%~100%
Animation alpha = new AlphaAnimation(0.1f , 1.0f);

//设置动画时间为5秒
alpha.setDuration(5000);

//开始播放
img.startAnimation(alpha);

1-2 四种基础动画实现

1.AlphaAnimation（透明度动画）—0.0完全透明，1.0完全不透明

（1）fromAlpha：动画起始时透明度

（2）toAlpha：动画终止时的透明度

2.ScaleAnimation（缩放动画）

（1）fromX,toX：分别是起始和终止时x坐标上的伸缩尺寸

（2）fromY,toY：分别是起始和终止时y坐标上的伸缩尺寸

（3）pivotX,pivotY：分别为伸缩动画相对于x、y坐标开始的位置

3.TranslateAnimation（位移动画）

（1）fromXDelta,fromYDelta：分别是起始时x、y的坐标

（2）toXDelta，toYDelta：分别是终止时x、y的坐标

4.RotateAnimation（旋转动画）

（1）fromDegrees：起始的角度

（2）toDegrees：终止的角度

（3）pivotX,pivotY：分别为旋转动画相对于x、y坐标开始的位置

1-3 组合动画实现

代码实现如下

1.续播1：先播放动画A，设置A的AnimationListener，当onAnimationEnd触发（即A播放完毕）时，开始播放B；

2.续播2：写一个动画集AnimationSet，在其中定义动画A和B，为动画B设置atartOffset，其值就是前一个动画播放所需的时间。

3.循环闪烁：利用那个Animation的setRepeatCount、setRepeatMode来实现动画循环

4.Activity切换动画：使用overridePendingTransition方法。

5.LayoutAnimation布局动画：

　　为View Groups添加动画，使用LayoutAnimationController

LayoutAnimation布局动画
在布局动画控制器中添加一个动画
LayoutAnimationController lac=new LayoutAnimationController (AnimationUtils.loadAniamtion(this,R.anim.zoom_in))
设置加载顺序
lac.setOrder(LayoutAnimationController.ORDER_RANDOM)
ListView加载动画
listView.setLayoutAnimation(lac)
启动动画
listView.startLayoutAnimation()

6.FrameAnimation逐帧动画：

　　使用animation-list标签来分组一个item标签集合，定义要显示的图片，指定显示它的时间

代码实现：

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>

MainActivity.java

package com.imooc.android_animation;

import android.app.Activity;
import android.content.Intent;
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.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);
        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);
            //倒序重复REVERSE  正序重复RESTART
            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;
            
        }

        }
    }

}

ScaleAnimation(缩放动画)——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>

RotateAnimation（旋转动画）—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>

AlphaAnimation（透明度动画）——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>

TranslateAnimation（位移动画）——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>

-----------------------------------------------------------------------------

续播1

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;
        }

续播2——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>

闪烁

case R.id.flash: {

            AlphaAnimation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
            alphaAnimation.setDuration(100);
            alphaAnimation.setRepeatCount(10);
            //倒序重复REVERSE  正序重复RESTART
            alphaAnimation.setRepeatMode(Animation.REVERSE);
            image.startAnimation(alphaAnimation);

            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.change:
        {
            Intent intent=new Intent(MainActivity.this,MainActivity2.class);
            startActivity(intent);
            overridePendingTransition(R.anim.zoom_in,R.anim.zoom_out);
            break;
        }

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);
    }
    
}

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>

AndroidManifest.xml

 <activity android:name="com.imooc.android_animation.MainActivity2" >
        </activity>

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>

布局动画

    case R.id.layout:
        {
            Intent intent=new Intent(MainActivity.this,ListActivity.class);
            startActivity(intent);
            break;
        }

ListActivity.java

package com.imooc.android_animation;

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("慕课网"+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();
    }

}

AndroidManifest.xml

 <activity android:name="com.imooc.android_animation.ListActivity"></activity>

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

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </ListView>

</LinearLayout>

逐帧动画

case R.id.frame:
        {
            image.setImageResource(R.drawable.anim_list);        
            break;
            
        }

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>

posted @ 2016-05-12 12:57 沉默的羊癫疯阅读(128) 评论(0) 收藏举报

刷新页面返回顶部

沉默的羊癫疯

Android动画基础知识

公告