Android動畫-View動畫的使用場景

目錄

  1. PopupWindow的動畫
    1.1. 原效果
    1.2. 加動畫
  2. Activity過場動畫
    2.1. 通過overridePendingTransition
    2.2. 也是通過style
  3. 給ViewGroup的子控件加進(jìn)場動畫
    3.1. 通過XML
    3.2. 通過java

View動畫的一個特點就是,他的動畫僅僅是動的View的繪制地方,View真正的位置并沒有一起動畫。

View除了會用作直接作用頁面中的View外,通常還用用在下面一些地方
博客地址

PopupWindow的動畫

原效果

先做一個PopupWindow,這個PopupWindow的View只有一個背景圖片,一只大貓。:

private void initWindow() {
        View view = new View(this);
        view.setBackground(getDrawable(R.drawable.xiaomao));
        popupWindow = new PopupWindow(view, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    }

然后給按鈕的點擊事件設(shè)置為顯示PopupWindow:

btnRun.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (popupWindow.isShowing()) {
                    popupWindow.dismiss();
                } else {
                    popupWindow.showAsDropDown(btnRun);
                }
            }
        });

這時的效果是這樣的:

加動畫

那么現(xiàn)在加上一個動畫,首先要定義動畫。

  1. 進(jìn)入的動畫:
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="0"
        android:fromYDelta="100%"
        android:toYDelta="0"
        android:duration="2000" />
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="2000"
        />
</set>
  1. 消失的動畫:
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="0"
        android:fromYDelta="0"
        android:toYDelta="100%"
        android:duration="2000" />
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="2000"
        />
</set>
  1. 做成一個style,在res/values/styles.xml文件里加上:
<style name="pop_anim">
        <item name="android:windowEnterAnimation">@anim/pop_in</item>
        <item name="android:windowExitAnimation">@anim/pop_out</item>
    </style>
  1. 設(shè)置動畫

這一步就很簡單,就加一行代碼

private void initWindow() {
        View view = new View(this);
        view.setBackground(getDrawable(R.drawable.xiaomao));
        popupWindow = new PopupWindow(view, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        popupWindow.setAnimationStyle(R.style.pop_anim);
    }

這時效果就成下面那樣了:

Activity過場動畫

通過overridePendingTransition

這種方法寫著簡單但是不好用,通過overridePendingTransition,他的兩個參數(shù)分別是新Activity進(jìn)入時的動畫和舊Activity退出時的動畫.如果設(shè)置為0則沒有動畫。

這個方法必須跟在startActivity()或finish()后面才會生效。

還是先定義兩個動畫:

進(jìn)入時的動畫:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="0"
        android:fromYDelta="100%"
        android:toYDelta="0"
        android:duration="2000" />
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="2000"
        />
</set>

退出時的動畫:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="0"
        android:fromYDelta="0"
        android:toYDelta="-100%"
        android:duration="2000" />
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="2000"
        />
</set>

跳轉(zhuǎn)時調(diào)用:

startActivity(new Intent(MainActivity.this,SecondActivity.class));
overridePendingTransition(R.anim.activity_in,R.anim.activity_out);

效果:

也是通過style

首先看res/values/styles.xml。定義了一個叫ActivityAnim的style,里面有四個屬性,分表代表下面的含義

屬性 含義
activityOpenEnterAnimation 打開一個新的Activity時,要顯示的新的Activit執(zhí)行的動畫
activityOpenExitAnimation 打開一個新的Activity時,當(dāng)前的舊的Activit執(zhí)行的動畫
activityCloseEnterAnimation 關(guān)閉一個activity時,要顯示的上一個Activity執(zhí)行的動畫
activityCloseExitAnimation 關(guān)閉一個activity時,被關(guān)閉的Activity執(zhí)行的動畫

這四個動畫可以針對需要只設(shè)置需要的。

ActivityAnim設(shè)置給APP要用的主題AppTheme的android:windowAnimationStyle屬性

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowAnimationStyle">@style/ActivityAnim</item>
    </style>
    <style name="ActivityAnim">
        <item name="android:activityOpenEnterAnimation">@anim/activity_in</item>
        <item name="android:activityOpenExitAnimation">@anim/activity_out</item>
        <item name="android:activityCloseEnterAnimation">@anim/activity_close_in</item>
        <item name="android:activityCloseExitAnimation">@anim/activity_close_out</item>
    </style>
</resources>

在后再清單文件里引用這個主題:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.sunlinlin.animademo">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".SecondActivity"></activity>
    </application>
</manifest>

上面的四個動畫分別是:

activity_in:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="0"
        android:fromYDelta="100%"
        android:toYDelta="0"
        android:duration="2000" />
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="2000" />
</set>

activity_out:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="0"
        android:fromYDelta="0"
        android:toYDelta="-100%"
        android:duration="2000" />
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="2000" />
</set>

activity_close_in:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="0"
        android:fromYDelta="-100%"
        android:toYDelta="0"
        android:duration="2000" />
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="2000" />
</set>

activity_close_out:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="0"
        android:fromYDelta="0"
        android:toYDelta="100%"
        android:duration="2000" />
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="2000" />
</set>

最終的效果是:

給ViewGroup的子控件加進(jìn)場動畫

LayoutAnimation是作用于ViewGroup的,用來指定ViewGroup的子控件出現(xiàn)的動畫

先做一個子控件出現(xiàn)的動畫,從之前隨便選個activity_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="0"
        android:fromYDelta="100%"
        android:toYDelta="0"
        android:duration="2000" />
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="2000" />
</set>

準(zhǔn)備好了動畫,接下來有兩種方法,也是xml和java

通過XML

然后新建一個動畫文件,這里叫anim_layout.xml,這里有三個屬性:

屬性 作用
android:delay 可以取值為數(shù)值,百分?jǐn)?shù),或百分?jǐn)?shù)p。表示兩個子控件執(zhí)行出場動畫的間隔時間,為0時,所有控件的動畫沒有延遲全部開始執(zhí)行;為1時表示等上一個控件動畫執(zhí)行完畢才開始執(zhí)行下一個;為0.5時表示等上一個控件動畫執(zhí)行一半開始執(zhí)行下一個??梢源笥?。。。當(dāng)這個值為百分?jǐn)?shù)時,如50%,表示這個延遲時間是當(dāng)前動畫執(zhí)行時間的50%。。。當(dāng)這個值是百分?jǐn)?shù)p的時候,如50%p,表示這個延遲時間是父View的動畫時間的50%。
android:animationOrder 有三個值::normal表示按正常順序出現(xiàn)。random表示亂序出現(xiàn)。reverse表示反序出現(xiàn)。
android:animation 指定出現(xiàn)時要執(zhí)行的動畫

anim_layout.xml文件代碼,設(shè)置上一個動畫執(zhí)行五分之一時開始下一個動畫,倒序執(zhí)行:

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:delay="0.2"
    android:animationOrder="reverse"
    android:animation="@anim/activity_in">
</layoutAnimation>

然后在Activity的布局文件中,將一個LinearLayout通過android:layoutAnimation加上了這個動畫:

<LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/btn_back"
        android:layoutAnimation="@anim/anim_layout"
        android:orientation="vertical">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="哈哈" />
        ...
    </LinearLayout>

然后進(jìn)入這個Activity時就會看到這個效果:

通過java

這里不需要建新的文件了。覺得比上面的方便許多,效果跟上圖是一樣的。

        ll = (LinearLayout) findViewById(R.id.ll);
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.activity_in);
        LayoutAnimationController controller = new LayoutAnimationController(animation);
        controller.setDelay(0.2f);
        controller.setOrder(LayoutAnimationController.ORDER_REVERSE);
        ll.setLayoutAnimation(controller);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

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