Android 作者: android Fly

Android View Animation(補間動畫)教學

Android View Animation(補間動畫)教學

  1. 創建amin資料夾
  2. 透明動畫
  3. 平移動畫
  4. 縮放動畫
  5. 旋轉動畫
  6. 混合動畫+插值器

1.創建amin資料夾

2.透明動畫(anim_alpha)

XML
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="1000"
        android:fromAlpha="1"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:toAlpha="0" />
</set>

val animation = AnimationUtils.loadAnimation(this, R.anim.anim_alpha)
icon.startAnimation(animation)
程式碼
val alphaAnimation = AlphaAnimation(0f, 1f)
alphaAnimation.duration = 1000
alphaAnimation.repeatCount = INFINITE
alphaAnimation.repeatMode = REVERSE
icon.startAnimation(alphaAnimation)

3.平移動畫(anim_translate)

XML
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:toXDelta="400"
        android:toYDelta="400" />
</set>

val animation = AnimationUtils.loadAnimation(this, R.anim.anim_translate)
icon.startAnimation(animation)
程式碼
val translateAnimation = TranslateAnimation(0f, 400f,0f,400f)
translateAnimation.duration = 1000
translateAnimation.repeatCount = INFINITE
translateAnimation.repeatMode = REVERSE
icon.startAnimation(translateAnimation)

4.縮放動畫XML(anim_scale)

XML
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:toXScale="3"
        android:toYScale="3" />
</set>

val animation = AnimationUtils.loadAnimation(this, R.anim.anim_scale)
icon.startAnimation(animation)
程式碼
val scaleAnimation = ScaleAnimation(
    1f, 3f, 1f, 3f,
    RELATIVE_TO_SELF, 0.5f,
    RELATIVE_TO_SELF, 0.5f
)
scaleAnimation.duration = 1000
scaleAnimation.repeatCount = INFINITE
scaleAnimation.repeatMode = REVERSE
icon.startAnimation(scaleAnimation)

5.旋轉動畫XML(anim_rotate)

XML
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:toDegrees="360" />
</set>

val animation = AnimationUtils.loadAnimation(this, R.anim.anim_rotate)
icon.startAnimation(animation)
程式碼
val rotateAnimation = RotateAnimation(0f, 360f,
    RELATIVE_TO_SELF, 0.5f,
    RELATIVE_TO_SELF, 0.5f)
rotateAnimation.duration = 1000
rotateAnimation.repeatCount = INFINITE
rotateAnimation.repeatMode = REVERSE
icon.startAnimation(rotateAnimation)

6.混合動畫+插值器XML(anim_mix)

XML
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    <scale
        android:duration="2000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:toXScale="2"
        android:toYScale="2" />
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:toDegrees="360" />
</set>

val animation = AnimationUtils.loadAnimation(this, R.anim.anim_mix)
icon.startAnimation(animation)
程式碼
val rotateAnimation = RotateAnimation(0f, 360f,
    RELATIVE_TO_SELF, 0.5f,
    RELATIVE_TO_SELF, 0.5f)
rotateAnimation.duration = 2000
rotateAnimation.repeatCount = INFINITE
rotateAnimation.repeatMode = REVERSE

val scaleAnimation = ScaleAnimation(1f, 2f,1f, 2f,
    RELATIVE_TO_SELF, 0.5f,
    RELATIVE_TO_SELF, 0.5f)
scaleAnimation.duration = 2000
scaleAnimation.repeatCount = INFINITE
scaleAnimation.repeatMode = REVERSE

val set = AnimationSet(true)
set.interpolator = AccelerateInterpolator()
set.addAnimation(scaleAnimation)
set.addAnimation(rotateAnimation)
icon.startAnimation(set)

發表迴響