Android animation

關於我

Evan Chen 陳瑞忠

https://medium.com/@evanchen76

 

為什麼要有動畫?

真實世界裡…

狀態的改變是有過程的

Google 幫你做了…

Material Design Component

Android animation

View animation

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

Facebook Like button

步驟:

  1. 換成藍色按讚後的按鈕
  2. 新增圖片放大1.2倍的動畫
  3. 新增圖片旋轉-20度 (這是為了讓讚的大姆指翹高)
  4. 開始動畫

Property Animation

修改目標對象的屬性,從而使對象展現出動畫效果

//動畫XML animator.anim_alpha
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:propertyName="alpha"
    android:valueTo="0.1f" />
    
//載入動畫    
AnimatorInflater.loadAnimator(this, R.animator.anim_alpha)
    .apply {
        setTarget(textView)
        start()
    }

Value Animation

 

 //建立一個1.0~0.1之間漸變的動畫
 val animation = ValueAnimator.ofFloat(1.0f, 0.1f)
 //監聽動畫值的改變
 animation.addUpdateListener { animation ->
     //在這裡取得從1.0~0.1之間的每個值
     textView.alpha = animation.animatedValue as Float
     textView.requestLayout()
 }
 //動畫期間
 animation.duration = 2000
 animation.start()
class BezierEvaluator(private val controlPoint: Point) : TypeEvaluator<Point> {
    override fun evaluate(t: Float, startValue: Point, endValue: Point): Point {
        val x =
            ((1 - t) * (1 - t) * startValue.x.toFloat() 
            	+ 2f * t * (1 - t) * controlPoint.x.toFloat() 
            	+ t * t * endValue.x.toFloat()).toInt()
        val y =
            ((1 - t) * (1 - t) * startValue.y.toFloat() 
            	+ 2f * t * (1 - t) * controlPoint.y.toFloat() 
            	+ t * t * endValue.y.toFloat()).toInt()
        return Point(x, y)
    }
}

Activity transition

透過共同元素之間的動畫效果

讓不同頁面間的轉換提供視覺連續效果。

//步驟1:取得imageView、title

val imageView = view!!.findViewById<View>(R.id.sceneryImageView)
val title = view.findViewById<View>(R.id.sceneryTitle)

//步驟2:將imageView、title 設定Transition Name,這裡的Transition Name會與DetailActivity一樣
val activityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(
        this,
        Pair(imageView, DetailActivity.TRANSITION_SCENERY_IMAGE_NAME),
        Pair(title, DetailActivity.TRANSITION_SCENERY_TITLE_NAME)
)

//步驟3:startActivity,並將activityOptions傳入
startActivity(intent, activityOptions.toBundle())
setTransitionName(sceneryImageView, TRANSITION_SCENERY_IMAGE_NAME)
setTransitionName(sceneryTitle, TRANSITION_SCENERY_TITLE_NAME)

MainActivity

DetailActivity

TransitionManager

 

Transition 最基本的概念就是讓你在一個Scene(起始佈局)到另一個Scene(結束佈局)之間產生動畫。

ConstraintSet animation

layout1.xml
還沒有標題與下方的描述
layout2.xml
出現了標題、下方的標題
private fun showDetail() {
    isShow = true
    //Clone layout2
    val constraintSet = ConstraintSet()
    constraintSet.clone(this, R.layout.layout2)
    //設定動畫方式
    val transition = ChangeBounds()
    transition.interpolator = AnticipateOvershootInterpolator(1.0f)
    transition.duration = 1000
    //開始動畫
    TransitionManager.beginDelayedTransition(constraintLayout, transition)
    constraintSet.applyTo(constraintLayout)
}

Motion Layout

VectorDrawable 

Android實現SVG向量圖的方式

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="240dp"
    android:height="240dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:name="iconPath"
        android:fillColor="#274fe1"
        android:pathData="M5,8 V16 H19 V8" />
</vector>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:interpolator="@android:interpolator/linear"
    android:propertyName="pathData"
    android:valueFrom="M8,5 V19 H16 V5"
    android:valueTo="M5,8 V16 H19 V8"
    android:valueType="pathType" />

VectorDrawable Animation 匯入動畫

  1. 匯入SVG至AndroidStudio

  2. 利用Shapeshifter制作動畫

VectorDrawable

TrimPath

軌跡動畫

trimPathStart

valueFrom:0, valueTo:1
線由起點(0%)縮短至終點(100%)

trimPathStart

valueFrom:1, valueTo:0
線由終點增長至起點

trimPathEnd

valueFrom:0,valueTo:1
線由起點增長至終點

trimPathEnd

valueFrom:1,valueTo:0
線由終點縮短至起點

//objectAnimator
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:propertyName="trimPathStart"
    android:valueFrom="0"
    android:valueTo="1"
    android:valueType="floatType" />
    
//Vector Drawable
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0"
    android:width="24dp">
    <path
        android:name="line"
        android:strokeColor="#0c6bf9"
        android:strokeWidth="1.5"
        android:pathData="M0,20 L24,20"/>
</vector>
    
//動畫
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/line">
    <target
        android:name="line"
        android:animation="@animator/anim_trim_path_end_0_to_1" />
</animated-vector>


Material Motion

  • Container transform
  • Shared axis
  • Fade Through
  • Fade

Shared axis

Fade Through

Fade

Frame Animation

逐格動畫 

把很多張圖片串起來變成動畫。

Layout Animation

用來控制ViewGroup中所有的child view顯示的動畫。

例如Listview,Gridview,Recycleview。

LayoutTransition

在當ViewGroup中有新增、刪除、隱藏View時,呈現的動畫。

Ripple Effect

漣漪效果

Reveal Effect

End

Android Animation

By evanchen76

Android Animation

  • 789