Android 動(dòng)畫

Android基礎(chǔ)動(dòng)畫

  1. Tween Animation 變換動(dòng)畫
  2. Frame Animation 幀動(dòng)畫
  3. Layout Animation 布局動(dòng)畫
  4. Property Animation 屬性動(dòng)畫

Tween Animation(變換動(dòng)畫)在Android中又被分為四種:
Alpha:漸變透明度動(dòng)畫
Scale:漸變尺寸縮放動(dòng)畫
Translate:位置移動(dòng)動(dòng)畫
Rotate:旋轉(zhuǎn)動(dòng)畫

Tween Animation共同屬性:

  1. Duration:動(dòng)畫持續(xù)時(shí)間(單位:毫秒)
  2. fillAfter:設(shè)置為true,動(dòng)畫轉(zhuǎn)化在動(dòng)畫結(jié)束后被應(yīng)用
  3. fillBefore:設(shè)置為true,動(dòng)畫轉(zhuǎn)化在動(dòng)畫開始前被應(yīng)用
  4. interpolator:動(dòng)畫插入器(加速、減速插入器)
  5. repeatCount:動(dòng)畫重復(fù)次數(shù)
  6. repateMode:順序重復(fù)/倒序重復(fù)
  7. startOffset:動(dòng)畫之間的時(shí)間間隔

Animation實(shí)現(xiàn)方式有兩種:

  1. 配置文件(/res/anim)——alpha、scale、translate、rotate。更簡(jiǎn)單。
  2. Java代碼實(shí)現(xiàn)——AlphaAnimation、ScaleAnimation、TranAnimation、RotateAnimation。更靈活。
    兩種方式各有所長(zhǎng):
    如果變換比較多,而且很多參數(shù)都是動(dòng)態(tài)的(比如時(shí)間間隔、位移移動(dòng)的坐標(biāo)通過動(dòng)態(tài)獲取、動(dòng)態(tài)計(jì)算),則推薦使用Java代碼實(shí)現(xiàn)。
    如果動(dòng)畫是一個(gè)固定的效果,則推薦使用配置文件的方式。

通過加載配置文件的方式實(shí)現(xiàn)動(dòng)畫:
Animation scale = AnimationUtils.loadAnimation(TweenActivity.this,R.anim.scale_anim);
//開始動(dòng)畫
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(縮放動(dòng)畫)" />

        <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(透明度動(dòng)畫)" />

        <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(旋轉(zhuǎn)動(dòng)畫)" />

        <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(位移動(dòng)畫)" />

        <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="續(xù)播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="續(xù)播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="抖動(dòng)" />
        </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="切換動(dòng)畫" />

            <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="布局動(dòng)畫" />

            <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="逐幀動(dòng)畫" />
        </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動(dòng)畫配置文件
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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容