iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
1

View Animation

View Animation 是Android最簡單使用的一種動畫呈現方式了,可以在各種View 上做透明度、大小、位置、旋轉的動畫。

透過xml定義動畫效果,xml置於res/anim目錄下

4 種動畫效果

  • alpha 透明度
  • scale 大小縮放
  • translate 位置移動
  • rotate 旋轉

alpha

透明度變化的動畫效果(淡入淡出)

android:duration 動畫持續的時間(毫秒)
android:fromAlpha 動畫開始的透明度。0為完全透明,1為不透明。
android:toAlpha 動畫結束的透明度。0為完全透明,1為不透明。

例:2秒慢慢變為完全透明

<?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" />
</set>

alpha

translate

移動動畫效果

android:duration 動畫持續的時間(毫秒)
android:fromXDelta 起始X座標偏移量
android:toXDelta 結束X座標偏移量
android:fromYDelta 起始Y座標偏移量
android:toYDelta 結束Y座標偏移量

以上的值可使用%設定相對View的百分比位置,或%P來設定相對Parent View的百分比位置

例:移動至XY至原View的一倍距離。

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

translate

scale

縮放的動畫效果

android:duration 動畫持續的時間(毫秒)
android:fromXScale 起始的X座標縮放倍數
android:toXScale 結束的X座標縮放倍數
android:fromYScale 起始的Y座標縮放倍數
android:toYScale 結束的Y座標縮放倍數
android:pivotX 縮放時不變的X坐標,用%表示)
android:pivotY 縮放時不變的Y坐標,用%表示)

例:將圖片放大3倍,pivotX="50%" 代表中心點在中間

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="2000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3.0"
        android:toYScale="3.0" />
</set>

scale

rotate

旋轉的動畫效果

android:duration 動畫持續的時間(毫秒)
android:fromDegrees 旋轉開始的角度
android:toDegrees 旋轉結束的角度
android:pivotX 旋轉中心點的X座標
android:pivotY 旋轉中心點的Y座標

pivot 值可設定%設定相對View的百分比位置,或%P來設定相對Parent View的百分比位置

例:旋轉720度,即2圈。pivotX="50%" 代表中心點在中間

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="720"
        android:pivotX="50%"
        android:pivotY="50%" />
</set>

rotate

啟動這些動畫的方式,在Activity呼叫View.startAnimation

imageView.startAnimation(AnimationUtils.loadAnimation(this, R.anim.alpha))

完整程式
https://github.com/evanchen76/ViewAnimation

參考
https://developer.android.com/guide/topics/graphics/view-animation.html


上一篇
Day01 Android 動畫簡介
下一篇
Day03 View Animation 進階
系列文
Android animation 30天上手30

尚未有邦友留言

立即登入留言