• <noscript id="e0iig"><kbd id="e0iig"></kbd></noscript>
  • <td id="e0iig"></td>
  • <option id="e0iig"></option>
  • <noscript id="e0iig"><source id="e0iig"></source></noscript>
  • 安卓學習筆記32:實現補間動畫

    標簽: 安卓應用開發

    零、學習目標

    1. 了解安卓實現動畫的三種方式
    2. 掌握如何實現四種類型的補間動畫

    一、安卓實現動畫的三種方式

    1、補間動畫(tween animation)

    針對同一張圖片進行各種變換,比如平移、旋轉、縮放、深淺等等。

    2、幀式動畫(frame animation)

    事先準備好動畫所需要的每一幀圖片,然后利用線程每隔一段時間切換圖片,這樣來實現的動畫效果。

    3、屬性動畫(property animation)

    通過動畫的方式改變對象的屬性。

    二、補間動畫類型

    1. 透明度動畫(alpha animation)
    2. 縮放動畫(scale animation)
    3. 平移動畫(translate animation)
    4. 旋轉動畫(rotate animation)

    三、補間動畫案例 - 透明度動畫

    • 透明度動畫可以通過Java代碼實現,也可以通過xml配置文件實現。

    (一)運行效果

    在這里插入圖片描述

    (二)實現步驟

    1、創建安卓應用【AlphaAnimation】

    在這里插入圖片描述
    在這里插入圖片描述

    2、將圖片素材拷貝到drawable目錄

    在這里插入圖片描述

    3、主布局資源文件activity_main.xml

    在這里插入圖片描述

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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"
        android:orientation="vertical"
        android:padding="10dp"
        tools:context=".MainActivity">
    
        <ImageView
            android:id="@+id/ivBelle"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="20dp"
            android:layout_weight="7"
            android:src="@drawable/belle" />
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">
    
            <Button
                android:id="@+id/btnAnimationByCode"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="doAnimationByCode"
                android:text="@string/animation_by_code" />
    
            <Button
                android:id="@+id/btnAnimationByXML"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="doAnimationByXML"
                android:text="@string/animation_by_xml" />
        </LinearLayout>
    </LinearLayout>
    

    4、創建透明度動畫配置文件

    • 在res目錄里創建anim目錄,在anim里創建alpha_animator.xml
      在這里插入圖片描述
    <?xml version="1.0" encoding="utf-8"?>
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="3000"
        android:fromAlpha="1"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toAlpha="0" />
    
    • duration —— 持續時間(單位:毫秒)
    • fromAlpha —— 起始透明度(0~1)
    • toAlpha —— 終止透明度(0~1)
    • repeatMode —— 重復模式(restart,reverse)
    • repeatCount —— 重復次數(1、2、3、……、infinite)

    5、字符串資源文件strings.xml

    在這里插入圖片描述

    <resources>
        <string name="app_name">補間動畫 - 透明度動畫</string>
        <string name="animation_by_code">通過Java代碼實現動畫</string>
        <string name="animation_by_xml">通過xml配置實現動畫</string>
    </resources>
    

    6、主界面類 - MainActivity

    在這里插入圖片描述

    • 聲明變量
      在這里插入圖片描述
    • 通過資源標識符獲取控件實例
      在這里插入圖片描述
    • 通過Java代碼實現透明度動畫
      在這里插入圖片描述
    • 通過XML配置實現透明度動畫
      在這里插入圖片描述
    • 查看主界面完整源代碼
    package net.hw.alpha_animation;
    
    import android.os.Bundle;
    import android.view.View;
    import android.view.animation.AlphaAnimation;
    import android.view.animation.Animation;
    import android.view.animation.AnimationUtils;
    import android.widget.ImageView;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    public class MainActivity extends AppCompatActivity {
    
        private ImageView ivBelle; // 美女圖像控件
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            // 利用布局資源文件設置用戶界面
            setContentView(R.layout.activity_main);
    
            // 通過資源標識符獲取控件實例
            ivBelle = findViewById(R.id.ivBelle);
        }
    
        /**
         * 通過Java代碼實現透明度動畫
         *
         * @param view
         */
        public void doAnimationByCode(View view) {
            // 創建透明度動畫對象, 從不透明到透明
            Animation animation = new AlphaAnimation(1, 0);
            // 設置動畫持續時間
            animation.setDuration(3000);
            // 設置動畫重復模式(RESTART - 重啟;REVERSE - 反向)
            animation.setRepeatMode(AlphaAnimation.REVERSE);
            // 設置動畫重復次數
            animation.setRepeatCount(1);
            // 啟動圖像控件的透明度動畫
            ivBelle.startAnimation(animation);
        }
    
        /**
         * 通過XML配置實現透明度動畫
         *
         * @param view
         */
        public void doAnimationByXML(View view) {
            // 啟動圖像控件的透明度動畫
            ivBelle.startAnimation(AnimationUtils.loadAnimation(this, R.anim.alpha_animator));
        }
    }
    

    7、啟動應用,查看效果

    在這里插入圖片描述

    四、補間動畫案例 - 縮放動畫

    • 縮放動畫可以通過Java代碼實現,也可以通過xml配置文件實現。

    (一)運行效果

    在這里插入圖片描述

    (二)實現步驟

    1、創建安卓應用【ScaleAnimation】

    在這里插入圖片描述
    在這里插入圖片描述

    2、將圖片素材拷貝到drawable目錄

    在這里插入圖片描述

    3、主布局資源文件activity_main.xml

    在這里插入圖片描述

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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"
        android:orientation="vertical"
        android:padding="10dp"
        tools:context=".MainActivity">
    
        <ImageView
            android:id="@+id/ivBelle"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="20dp"
            android:layout_weight="7"
            android:src="@drawable/belle" />
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">
    
            <Button
                android:id="@+id/btnAnimationByCode"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="doAnimationByCode"
                android:text="@string/animation_by_code" />
    
            <Button
                android:id="@+id/btnAnimationByXML"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="doAnimationByXML"
                android:text="@string/animation_by_xml" />
        </LinearLayout>
    </LinearLayout>
    

    4、創建縮放動畫配置文件

    • 在res目錄里創建anim目錄,在anim目錄里創建scale_animator.xml
      在這里插入圖片描述
    <?xml version="1.0" encoding="utf-8"?>
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="3000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toXScale="0"
        android:toYScale="0" />
    
    • fromXScale —— 起始橫向比例(1表示原圖大小)
    • fromYScale —— 起始縱向比例(1表示原圖大小)
    • toXScale —— 終止橫向比例(0表示縮小到無)
    • toYScale —— 終止縱向比例(0表示縮小到無)
    • pivotX —— 縮放中心橫向比例(50% - 水平居中位置)
    • pivotY —— 縮放中心縱向比例(50% - 垂直居中位置)

    5、字符串資源文件strings.xml

    在這里插入圖片描述

    <resources>
        <string name="app_name">補間動畫 - 縮放動畫</string>
        <string name="animation_by_code">通過Java代碼實現動畫</string>
        <string name="animation_by_xml">通過xml配置實現動畫</string>
    </resources>
    

    6、主界面類 - MainActivity

    在這里插入圖片描述

    • 聲明變量
      在這里插入圖片描述
    • 通過資源標識符獲取控件實例
      在這里插入圖片描述
    • 通過Java代碼實現縮放動畫
      在這里插入圖片描述
    • 通過XML配置文件實現縮放動畫
      在這里插入圖片描述
    • 查看主界面類完整源代碼
    package net.hw.scale_animation;
    
    import android.os.Bundle;
    import android.view.View;
    import android.view.animation.AlphaAnimation;
    import android.view.animation.Animation;
    import android.view.animation.AnimationUtils;
    import android.view.animation.ScaleAnimation;
    import android.widget.ImageView;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    public class MainActivity extends AppCompatActivity {
    
        private ImageView ivBelle; // 美女圖像控件
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            // 利用布局資源文件設置用戶界面
            setContentView(R.layout.activity_main);
    
            // 通過資源標識符獲取控件實例
            ivBelle = findViewById(R.id.ivBelle);
        }
    
        /**
         * 通過Java代碼實現縮放動畫
         *
         * @param view
         */
        public void doAnimationByCode(View view) {
           // 創建縮放動畫對象,從原尺寸到零尺寸
            Animation animation = new ScaleAnimation(1, 0, 1, 0,
                    ScaleAnimation.RELATIVE_TO_SELF, 0.5f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
            // 設置動畫持續時間
            animation.setDuration(3000);
            // 設置動畫重復模式(RESTART - 重啟;REVERSE - 反向)
            animation.setRepeatMode(AlphaAnimation.REVERSE);
            // 設置動畫重復次數
            animation.setRepeatCount(1);
            // 啟動圖像控件的縮放動畫
            ivBelle.startAnimation(animation);
        }
    
        /**
         * 通過XML配置文件實現縮放動畫
         *
         * @param view
         */
        public void doAnimationByXML(View view) {
            // 啟動圖像控件的縮放動畫
            ivBelle.startAnimation(AnimationUtils.loadAnimation(this, R.anim.scale_animator));
        }
    }
    

    7、啟動應用,查看效果

    在這里插入圖片描述

    8、改變縮放基準點位置

    • 將圖像控件左上角作為縮放基準點
      在這里插入圖片描述
    • 啟動應用,查看效果
      在這里插入圖片描述
    版權聲明:本文為howard2005原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
    本文鏈接:https://blog.csdn.net/howard2005/article/details/111380931

    智能推薦

    android 補間動畫

    效果圖:  實現步驟: 1、在項目中的 res 目錄下創建一個 anim 文件夾,然后鼠標右擊該文件夾,創建一個 動畫資源文件 然后選擇動畫類型,下面以動畫集 set為例創建一個動畫集文件 正常格式如下: 創建一個平移動畫...

    補間動畫

    補間動畫 老規矩,先上菜單: 現在我們來談一談補間動畫的特點,通常我們再需要一些動畫特效時,需要改變控件的形狀等屬性,而用幀動畫的效果時無法完全滿足這樣對的需求的,所以補間動畫就應運而生,但是補間動畫也是有缺點的,動畫效果只是將圖片的顯示位置改變到指定的地點,并沒有將其對應的屬性和資源位置改變,如其點擊效果,還是在控件最初的位置有效。 總結一下: * 每個動畫效果的參數不一樣,所以這里就沒有具體描...

    transition 補間動畫

    CSS中動畫的類型 transition 補間動畫(從一個狀態到另一個狀態,狀態切換之間是有動畫的) keyframe 關鍵幀動畫(指定的每一個狀態就是一個關鍵幀) 逐幀動畫(跳動) transition 補間動畫 展示效果: 動畫進度與時間的關系 例子: 推薦:動畫進度與時間關系模擬網站...

    Android UI之補間動畫以及幀動畫學習

    1、簡介 動畫想必大家做開發的時候都有用到吧,本文將介紹的是補間動畫中的平移動畫,包括xml形式的常用于彈出框的動畫,還有java代碼中 new TranslationAnimation()構造參數的解析。簡要的為大家介紹下幀動畫。 2、xml平移動畫 2.1.平移固定數值: anim文件中的animation_translation.xml: 運行效果:    &n...

    android 動畫-補間動畫

    補間動畫 包含漸變Alpha、旋轉Rotate、縮放Scale、平移Translate 布局代碼 rotate、scale動畫的android:pivotX和android:pivotY屬性、translate動畫的android:toXDelta和android:toYDelta屬性的取值都可以是都可以數值、百分數、百分數p,比如:50、50%、50%p,他們取值的代表的意義各不相同: 50表示...

    猜你喜歡

    Android動畫--補間動畫

    補間動畫可以應用于View,讓開發者可以定義一些透明、旋轉、平移、縮放的效果,達到讓View的內容動起來的效果 補間動畫的狀態:透明、旋轉、平移、縮放 注意:補間動畫不會改變動畫真實的位置 使用補間動畫的效果,有兩種方法: 1.在xml文件中設置動畫效果 2.在Java代碼中設置 效果圖: 一.在xml文件中設置動畫效果 1.在res文件夾下新建anim文件夾,在anim文件夾下新建對應的動畫標簽...

    安卓學習筆記

    學習安卓的學習筆記,留存一下,雖然以后可能都不會從事安卓相關的工作了,紀念一下。 1 Activity 1 返回棧 活動可以層疊,啟動一個新的活動會覆蓋在原活動上,Back會銷毀最上面的活動,下面的一個活動就會重新顯示。 用任務管理一系列活動。任務用返回棧描述。 啟動一個新的活動,這個活動就在返回棧中入棧,finish()即棧頂元素出棧,系統總是會顯示處于棧頂的活動給用戶。(所以finish()銷...

    神奇的Batch Normalization 如果一個模型僅訓練BN層會是什么樣的

    您可能會感到驚訝,但這是有效的。 ? 最近,我閱讀了arXiv平臺上的Jonathan Frankle,David J. Schwab和Ari S. Morcos撰寫的論文“Training BatchNorm and Only BatchNorm: On the Expressive Power of Random Features in CNNs”。 這個主意立刻引起了...

    用Python實現校園通知更新提醒

    前言 這個項目實已經在一個月前已經完成了,一直都想寫一篇博客來總結這個過程中遇到的一些問題。但最近一個月來都比較忙,所以一直拖到了現在。 首先說說起因吧,我沒事的時候,總喜歡依次點開學校主頁、教務處、圖書館以及學院的網站,看看有沒有什么新通知,雖然大多與我無關。恰逢最近正在學Python,經常聽到別人說用Python寫爬蟲很簡單,但自己尚未接觸過爬蟲。于是抱著試一試的心態看了幾篇關于Python爬...

    spring_ioc相關_第一章

    1 spring是一站式框架,在javaee的三層結構中,每一層都提供不提并的解決技術 web層:springMVC service層:spring的ioc dao層:spring的jdbcTemplate 2 javaee為避免兩個類之間出現耦合,則把對象的創建交給spring進行管理,spring的ioc操作:(1)ioc的配置文件方式;(2)ioc注解方式 3 ioc的底層原理使用技術(1)...

    精品国产乱码久久久久久蜜桃不卡