Download presentation
Presentation is loading. Please wait.
1
補間動畫 (Tween Animation) 靜宜大學資管系 楊子青
2
Tween Animation 定義一系列關於透明度、旋轉、大小和位置的改變，讓View的內容動起來 java.lang.Object
↳ android.view.animation.Animation Known Direct Subclasses 四種類型： AlphaAnimation(透明度) RotateAnimation(旋轉) ScaleAnimation(縮放) TranslateAnimation(位移) AnimationSet(多個上述特效之組合)
3
實做專案：Tween 選Empty Activity 保留原版面ConstraintLayout 原TextView
原TextView text: 鮭魚洄游 textSize: 36sp 將salmon.jpg放到res/drawable資料夾內
4
MainActivity.java TextView txv; ConstraintLayout cl;
Animation am; //動畫 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); txv = (TextView) findViewById(R.id.txv); cl = (ConstraintLayout) findViewById(R.id.cl); cl.setBackgroundResource(R.drawable.salmon); } 設定背景圖
5
1.觸控螢幕，讓圖形淡入 模擬測試看看 public boolean onTouchEvent(MotionEvent event) {
//1.AlphaAnimation 起始透明度,最後透明度(Alpha)值 am = new AlphaAnimation(0.0f, 1.0f); //設定動畫開始到結束的執行時間 am.setDuration(5000); //設定重複次數，-1為無限次數 am.setRepeatCount(0); //將動畫特效設定到背景圖並開始執行動畫 cl.startAnimation(am); return false; } 模擬測試看看
6
2.加入特效組合，同時淡入及旋轉 public boolean onTouchEvent(MotionEvent event) {
//0.特效組合 AnimationSet AnimationSet set = new AnimationSet(true); //1.AlphaAnimation 起始透明度,最後透明度(Alpha)值 am = new AlphaAnimation(0.0f, 1.0f); //設定動畫開始到結束的執行時間 am.setDuration(5000); //設定重複次數，-1為無限次數 am.setRepeatCount(0); //加入特效組合 set.addAnimation(am);
7
加入旋轉特效 模擬測試看看 //2.RotateAnimation 起始,最後旋轉角度
am = new RotateAnimation(0.0f, 360.0f); am.setDuration(5000); am.setRepeatCount(0); set.addAnimation(am); //將動畫特效組合設定到背景圖並開始執行動畫 cl.startAnimation(set); return false; } 模擬測試看看
8
3.圖形從0.2倍放大回原尺寸 public boolean onTouchEvent(MotionEvent event) { … //3.ScaleAnimation縮放x起,始倍率,y起,始倍率 Animation am = new ScaleAnimation(0.2f, 1.0f, 0.2f, 1.0f); am.setDuration(5000); am.setRepeatCount(0); set.addAnimation(am); //將動畫特效組合設定到背景圖並開始執行動畫 cl.startAnimation(set); return false; } 模擬測試看看
9
4.圖形從右下角位移到原位置 模擬測試看看 public boolean onTouchEvent(MotionEvent event) {
… //4.TranslateAnimation座標x1,x2,y1,y2位移 //右下角座標 cl.getWidth(), cl.getHeight() am = new TranslateAnimation(cl.getWidth(), 0.0f, cl.getHeight(), 0.0f); am.setDuration(5000); am.setRepeatCount(0); set.addAnimation(am); //將動畫特效組合設定到背景圖並開始執行動畫 cl.startAnimation(set); return false; } 模擬測試看看
10
5.若動畫效果固定，可設xml資源檔 先在res新增一資料夾，命名為anim 於anim資料夾，新增動畫資源檔，如anim1
11
撰寫anim1.xml資源檔 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android=" <alpha android:duration="5000" android:fromAlpha="0" android:repeatCount="0" android:toAlpha="1" > </alpha> <rotate android:fromDegrees="0" android:toDegrees="360" > </rotate> <scale android:duration="5000" android:fromXScale="3" android:fromYScale="3" android:repeatCount="0" android:toXScale="1" android:toYScale="1" > </scale> <translate android:fromXDelta="0" android:fromYDelta="0" android:toXDelta="200" android:toYDelta="600" > </translate> </set>
12
撰寫程式，讓文字套用anim1.xml 所定義的動畫格式
public boolean onTouchEvent(MotionEvent event) { … //讀取xml方式所定義之特效 am = AnimationUtils.loadAnimation(this, R.anim.anim1); am.setStartOffset(5000); txv.startAnimation(am); return false; } 延遲5秒後再開始， 以避免同步看不到特效 模擬測試看看
Similar presentations
