修改目標對象的屬性,從而使對象展現出動畫效果
//動畫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()
}
//建立一個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)
}
}
透過共同元素之間的動畫效果
讓不同頁面間的轉換提供視覺連續效果。
//步驟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
Transition 最基本的概念就是讓你在一個Scene(起始佈局)到另一個Scene(結束佈局)之間產生動畫。
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)
}
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" />
軌跡動畫
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>
把很多張圖片串起來變成動畫。
用來控制ViewGroup中所有的child view顯示的動畫。
例如Listview,Gridview,Recycleview。
在當ViewGroup中有新增、刪除、隱藏View時,呈現的動畫。