最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

Day 15 Ball (Animator)

XAMPP下载 admin 681浏览 0评论
 今天學習如何做出動畫效果
主要使用 ValueAnimator 和 ObjectAnimator 來達成

ValueAnimator,將重點放在
透過值的變化來產生動畫,可以將值設定給 View 的 translationX, translationY, alpha 值… 等等;主要是在規範時間內得到不同的值,再看如何去操作這些值
ObjectAnimator
ObjectAnimator 繼承 ValueAnimator,將重點放在直接操作物件的某一個”屬性”上,藉此來達成動畫的效果
ValueAnimator
下方程式碼為使用範例:

ofFloat 代表每一動畫的目標值
duration 代表動畫時間,單位為毫秒,預設值為 300
addUpdateListener 裡面就是每一次拿到 Value 要做的事情,animator 會把動畫時間做切割,所以這個 function 不會只進 3 個 float 的 3 次,而是一連串的數值;如範例為改變一連串的數值來移動 Y 軸
最後記得要使用 start() 來啟動動畫
val animator = ValueAnimator.ofFloat(0f, -350f, 0f)
animator.duration = 500
animator.addUpdateListener {
valueBall.translationY = it.animatedValue as Float
}

valueBall.setOnClickListener {
animator.start()
}
ObjectAnimator
ObjectAnimator 是對物件屬性的操作
所以我們依序傳入物件、屬性名稱、數值組…就可以達成動畫的效果
一樣要注意 start() 才會執行

val animator = ObjectAnimator.ofFloat(
objectBall,
“rotationY”,
0.0f, 360.0f)
animator.duration = 500

objectBall.setOnClickListener{
animator.start()
}
AnimatorSet
AnimatorSet 可以用來把不同的 ObjectAnimator 包成一包執行,可以設定有先後順序或是同時執行等等
下方程式碼先製作了 2 個 animator,接著有個按鈕分別執行 “連續播放動畫” 和 “同時播放動畫”

連續播放動畫
使用 .play() 後可以繼續加 .after() 來串接動畫
同時播放動畫
使用 .playTogether() 將傳入的 animator 同時執行
val animator1 = ObjectAnimator.ofFloat(
setBall01,
“translationY”,
0f, -500f, 0f
)
val animator2 = ObjectAnimator.ofFloat(
setBall02,
“translationY”,
0f, 500f, 0f
)

val animatorSet_onebyone = AnimatorSet()
animatorSet_onebyone.duration = 500

oneByOne.setOnClickListener {

if (!animatorSet_onebyone.isRunning) {
animatorSet_onebyone.play(animator1).after(animator2)
animatorSet_onebyone.start()
}
}

val animatorSet_sameTime = AnimatorSet()
animatorSet_sameTime.duration = 500

sameTime.setOnClickListener {
if (!animatorSet_sameTime.isStarted) {
animatorSet_sameTime.playTogether(animator1, animator2)
animatorSet_sameTime.start()
}
}
Interpolator
這是 ObjectAnimator 的其中一個設定,表示說這個動畫的呈現該套用什麼演算法
基本上有以下幾種:

LinearInterpolator
AccelerateInterpolator
DecelerateInterpolator
AccelerateDecelerateInterpolator
AnticipateInterpolator
OvershootInterpolator
AnticipateOvershootInterpolator
BounceInterpolator
CycleInterpolator
套用方式:指定給 animator.interpolator 即可,動畫即會有改變速度愈來愈快、愈來愈慢… 等等不同的效果

val animator = ObjectAnimator.ofFloat(interpolatorBall, “translationX”, 0f, 500f, 0f)
animator.interpolator = LinearInterpolator()
animator.start()

转载请注明:XAMPP中文组官网 » Day 15 Ball (Animator)

您必须 登录 才能发表评论!