這篇要來聊一下View Animation ，在Android中寫動畫的基礎用法
聊天一下...老實講我覺得用程式寫動畫簡直超麻煩！ORZ
雖然這篇只會寫到最簡單的做法
不過日後動畫系列大概還會繼續往下寫...
所以Emmm..加油(；´д｀)ゞ
Android 的動畫其實有非常多種，有機會的話我再來一篇一篇發(´∀｀）
今天的文章會先來寫最簡單的做法，View Animation
View Andimation是一個總稱，實際上Google在這方面已經提供了套件給你了
你只要串些套件的方法，再加入設定；基本上就可以寫出一些不錯的動畫
以動畫來說，最基本就是控制透明度、縮放、移動、旋轉等四種
也因此今天的文章也就是用這四種下去講(･ω･)b
Okay，那上功能
然後沒有Github，因為這篇內容較簡單
需要源碼的話下面留言留信箱我再寄給你
開始吧
1. 建立動畫資源&寫介面
1.1 寫介面
首先是介面的樣子
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/button_XML_Alpha" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:text="透明度" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/button_XML_Scale" /> <Button android:id="@+id/button_XML_Scale" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="縮放" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.352" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/button_XML_Translate" /> <Button android:id="@+id/button_XML_Translate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="移動" app:layout_constraintBottom_toTopOf="@+id/guideline2" app:layout_constraintEnd_toStartOf="@+id/button_Java_Rotate" app:layout_constraintStart_toEndOf="@+id/button_Java_Scale" app:layout_constraintTop_toBottomOf="@+id/textView2" /> <Button android:id="@+id/button_XML_Rotate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:text="旋轉" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="@+id/button_XML_Translate" /> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:text="用程式寫動畫腳本" android:textAppearance="@style/TextAppearance.AppCompat.Body1" android:textStyle="bold" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/guideline2" /> <TextView android:id="@+id/textView_Object" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="少在那邊旋轉我" android:textAppearance="@style/TextAppearance.AppCompat.Large" android:textStyle="bold" app:layout_constraintBottom_toTopOf="@+id/guideline" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <androidx.constraintlayout.widget.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.5" /> <androidx.constraintlayout.widget.Guideline android:id="@+id/guideline2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.75" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:text="用XML寫動畫腳本" android:textAppearance="@style/TextAppearance.AppCompat.Body1" android:textStyle="bold" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/guideline" /> <Button android:id="@+id/button_Java_Alpha" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:text="透明度" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/button_Java_Scale" /> <Button android:id="@+id/button_Java_Scale" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="縮放" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.352" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/button_Java_Translate" /> <Button android:id="@+id/button_Java_Translate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="移動" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@+id/button_Java_Rotate" app:layout_constraintStart_toEndOf="@+id/button_Java_Scale" app:layout_constraintTop_toBottomOf="@+id/textView3" /> <Button android:id="@+id/button_Java_Rotate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:text="旋轉" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="@+id/button_Java_Translate" /> </androidx.constraintlayout.widget.ConstraintLayout>
整個介面也沒有在幹嘛，就是東西拉一拉而已，請複製貼上吧(-‿◦)
1.2 寫動畫資源檔
首先看一看專案結構
基本上沒什麼特別要注意的，接下來要做的事就是要新增紅色方框的內容
資料夾的部分請向下圖一樣建立即可
res右鍵->New->Directory
然後命名不能自定義，請一定要命名anim哦(應該吧...)
再來是建立動畫檔案，會的人可以跳過圖片
anim右鍵->New->Animation Resource File
然後命名，及完成囉！
再來是分別四個動畫資源檔案內容
alpha.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:duration="2000" android:fromAlpha="1.0" android:toAlpha="0" /> <!-- duration 動畫執行時間 fromAlpha 起始時物件的透明度(Alpha) toAlpha 結束時物件的透明度 --> </set>
rotate.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <rotate android:duration="2000" android:fromDegrees="0" android:toDegrees="3600" android:pivotX="50%" android:pivotY="50%" /> <!-- duration 動畫執行時間 fromDegrees 動畫開始時物件的角度 toDegrees 動畫結束時物件的角度 pivotX、pivotY 代表旋轉的中心點 50%、50%表示中心旋轉 --> </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:fromXScale="1.0" android:fromYScale="1.0" android:toXScale="0.5" android:toYScale="0.5" android:pivotX="50%" android:pivotY="50%" /> <!-- duration 動畫執行時間 fromXScale 動畫開始時X的大小 fromYScale 動畫開始時Y的大小 toXScale 動畫結束時X的大小 toYScale 動畫結束時Y的大小 1.0跟0.5分別代表物件的倍率 pivotX、pivotY 代表縮小的中心點 50%、50%表示中心縮小 --> </set>
treanslate.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="2000" android:fromXDelta="0%" android:fromYDelta="0%" android:toXDelta="25%p" android:toYDelta="25%p" /> <!-- duration 動畫執行時間 fromXScale 動畫開始時X的大小 fromYScale 動畫開始時Y的大小 toXScale 動畫結束時X的大小 toYScale 動畫結束時Y的大小 1.0跟0.5分別代表物件的倍率 pivotX、pivotY 代表縮小的中心點 50%、50%表示中心縮小 --> </set>
到這邊為止，就完成了基本設置囉
下一段就是寫程式的部分(・ωｰ)～☆
2. 撰寫相關程式
接下來就是用程式把物件套用到資源檔了
在大部分的UI中幾乎都有繼承到一個叫做startAnimation的一個方法
運用這個方法，我們就可以很輕鬆地使UI套用動畫資源
公式是這樣:
物件.startAnimation(AnimationUtils.loadAnimation(this,R.anim.xxxx));
所以我們的程式就這樣寫
public class MainActivity extends AppCompatActivity { Button btXmlAlpha,btXmlScale,btXmlTrans,btXmlRotate,btJavaAlpha,btJavaScale,btJavaTrans,btJavaRotate; TextView tvObject; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btXmlAlpha = findViewById(R.id.button_XML_Alpha); btXmlScale = findViewById(R.id.button_XML_Scale); btXmlTrans = findViewById(R.id.button_XML_Translate); btXmlRotate = findViewById(R.id.button_XML_Rotate); btJavaAlpha = findViewById(R.id.button_Java_Alpha); btJavaScale = findViewById(R.id.button_Java_Scale); btJavaTrans = findViewById(R.id.button_Java_Translate); btJavaRotate = findViewById(R.id.button_Java_Rotate); tvObject = findViewById(R.id.textView_Object); byXml(); } private void byXml(){ btXmlAlpha.setOnClickListener(v->{ tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.alpha)); }); btXmlScale.setOnClickListener(v->{ tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.scale)); }); btXmlTrans.setOnClickListener(v->{ tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.translate)); }); btXmlRotate.setOnClickListener(v->{ tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.rotate)); }); } }
到這邊就完成用動畫資源檔設置囉
3. 用程式寫動畫
剛剛上述段落我們使用動畫資源檔案來控制動畫
那麼能不能直接寫程式控制動畫？
當然可以啊～
剛才在上面有說道，其實google都已經把方法寫好給你了
所以我們只要呼叫他的方法就行囉:D
來看一下幾個方法吧
透明度
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f); alphaAnimation.setDuration(2000);
縮放
ScaleAnimation scaleAnimation = new ScaleAnimation( 1.0f,2.0f,1.0f,2.0f, Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF,0.5f); scaleAnimation.setDuration(2000);
移動
TranslateAnimation translateAnimation = new TranslateAnimation( 0f, 100f, 0f, -100f );
旋轉
RotateAnimation rotateAnimation = new RotateAnimation( 0f, 3600, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f ); rotateAnimation.setDuration(2000);
雖然你們看起來只是數字
不過實際上在編輯器看起來是這樣的
編輯器很貼心，會自動幫你把參數名稱寫進去～哈哈
最後，這部分的程式如下
public class MainActivity extends AppCompatActivity { Button btXmlAlpha,btXmlScale,btXmlTrans,btXmlRotate,btJavaAlpha,btJavaScale,btJavaTrans,btJavaRotate; TextView tvObject; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btXmlAlpha = findViewById(R.id.button_XML_Alpha); btXmlScale = findViewById(R.id.button_XML_Scale); btXmlTrans = findViewById(R.id.button_XML_Translate); btXmlRotate = findViewById(R.id.button_XML_Rotate); btJavaAlpha = findViewById(R.id.button_Java_Alpha); btJavaScale = findViewById(R.id.button_Java_Scale); btJavaTrans = findViewById(R.id.button_Java_Translate); btJavaRotate = findViewById(R.id.button_Java_Rotate); tvObject = findViewById(R.id.textView_Object); byJava(); } private void byJava(){ btJavaAlpha.setOnClickListener(v -> { AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f); alphaAnimation.setDuration(2000); tvObject.startAnimation(alphaAnimation); }); btJavaScale.setOnClickListener(v -> { ScaleAnimation scaleAnimation = new ScaleAnimation( 1.0f,2.0f,1.0f,2.0f, Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF,0.5f); scaleAnimation.setDuration(2000); tvObject.startAnimation(scaleAnimation); }); btJavaTrans.setOnClickListener(v -> { TranslateAnimation translateAnimation = new TranslateAnimation( 0f, 100f, 0f, -100f ); translateAnimation.setDuration(2000); tvObject.startAnimation(translateAnimation); }); btJavaRotate.setOnClickListener(v -> { RotateAnimation rotateAnimation = new RotateAnimation( 0f, 3600, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f ); rotateAnimation.setDuration(2000); rotateAnimation.setFillAfter(true); tvObject.startAnimation(rotateAnimation); }); } }
最後，是全部的程式碼
public class MainActivity extends AppCompatActivity { Button btXmlAlpha,btXmlScale,btXmlTrans,btXmlRotate,btJavaAlpha,btJavaScale,btJavaTrans,btJavaRotate; TextView tvObject; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btXmlAlpha = findViewById(R.id.button_XML_Alpha); btXmlScale = findViewById(R.id.button_XML_Scale); btXmlTrans = findViewById(R.id.button_XML_Translate); btXmlRotate = findViewById(R.id.button_XML_Rotate); btJavaAlpha = findViewById(R.id.button_Java_Alpha); btJavaScale = findViewById(R.id.button_Java_Scale); btJavaTrans = findViewById(R.id.button_Java_Translate); btJavaRotate = findViewById(R.id.button_Java_Rotate); tvObject = findViewById(R.id.textView_Object); byXml(); byJava(); } private void byXml(){ btXmlAlpha.setOnClickListener(v->{ tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.alpha)); }); btXmlScale.setOnClickListener(v->{ tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.scale)); }); btXmlTrans.setOnClickListener(v->{ tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.translate)); }); btXmlRotate.setOnClickListener(v->{ tvObject.startAnimation(AnimationUtils.loadAnimation(this,R.anim.rotate)); }); } private void byJava(){ btJavaAlpha.setOnClickListener(v -> { AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f); alphaAnimation.setDuration(2000); tvObject.startAnimation(alphaAnimation); }); btJavaScale.setOnClickListener(v -> { ScaleAnimation scaleAnimation = new ScaleAnimation( 1.0f,2.0f,1.0f,2.0f, Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF,0.5f); scaleAnimation.setDuration(2000); tvObject.startAnimation(scaleAnimation); }); btJavaTrans.setOnClickListener(v -> { TranslateAnimation translateAnimation = new TranslateAnimation( 0f, 100f, 0f, -100f ); translateAnimation.setDuration(2000); tvObject.startAnimation(translateAnimation); }); btJavaRotate.setOnClickListener(v -> { RotateAnimation rotateAnimation = new RotateAnimation( 0f, 3600, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f ); rotateAnimation.setDuration(2000); rotateAnimation.setFillAfter(true); tvObject.startAnimation(rotateAnimation); }); } }
那麼今天的文章就寫到這邊
希望這篇文章能幫助到你(･ω･)b
文章標籤
全站熱搜
留言列表
Python攻略大小事 (1)
