前言
因业务上的需要,在APP
中点餐时要有商品数目增减操作,数目增减的过程中有翻动的动画效果展现。在Android
中有多种方式可以实现,本篇文章记录通过自定义View
结合控件的平移动画
相结合来实现此需求。
需求分析
根据上图分析控件的实现过程以及使用到的API
,要实现数目上下翻动的效果至少需要两个控件,所以要通过自定义ViewGroup
来实现,数字的显示使用TextView
控件,实现此控件的前提条件是ViewA
和ViewB
控件的大小一致,文字大小和颜色都相同。
1、初始状态,如下图①,默认ViewA
所在位置是显示区域,ViewB
不可视。
2、数目加1,效果如图②,ViewA
和ViewB
同时向上平移一个控件的高度。
3、数目减1,效果如图③,ViewB
从上方[ 两倍高度 ]向下平移了一个控件的高度,ViewA
从上[ 一倍高度 ]的位置。
4、每一次开始动画前,将要显示的数目值设置到ViewA
上,新设置的值设置到ViewB
。
实现
分析完需求后,可以明确要使用到哪些API
,首先是自定义ViewGroup
,因为控件ViewA
和ViewB
是上下显示,使用ViewGroup.LayoutParams
对控件进行初始位置的排布。
class NumberView(context: Context, attributeSet: AttributeSet) :
FrameLayout(context, attributeSet) {
private val viewA: TextView
private val viewB: TextView
companion object {
//向上平移
const val PAN_UP = 1001
//向下平移
const val PAN_DOWN = 1002
//10~99之间的数字,前面的数字标识
const val POS_FIRST = "POS_FIRST"
//10~99之间的数字,后面的数字标识
const val POS_SECOND = "POS_SECOND"
}
/**
* 平移模式
*/
private var mode = 0
/**
* 数字控件宽度
*/
private var vWidth = 0
/**
* 数字控件高度
*/
private var vHeight = 0
init {
LayoutInflater.from(context).inflate(R.layout.layout_number_view, this, true)
viewA = findViewById(R.id.view_a)
viewB = findViewById(R.id.view_b)
initAnim()
}
/**
* 设置字体控件宽高和大小
*/
fun setSize(w: Int, h: Int, size: Int) {
if (w == vWidth) { return }
vWidth = w
vHeight = h
textSize = size
layoutParams = LinearLayout.LayoutParams(vWidth, vHeight)
viewA.apply {
layoutParams = LayoutParams(vWidth, vHeight)
gravity = Gravity.CENTER
textSize = size.toFloat()
}
viewB.apply {
layoutParams = LayoutParams(vWidth, vHeight).apply {
topMargin = vHeight
}
gravity = Gravity.CENTER
textSize = size.toFloat()
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/view_a"
style="@style/number_txt_font"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="@string/number_one"
android:textColor="@color/color_31" />
<TextView
android:id="@+id/view_b"
style="@style/number_txt_font"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:textColor="@color/color_31" />
</FrameLayout>
在NumberView
初始化块中对平移动画进行初始化。
/**
* 初始化动画
*/
private fun initAnim() {
animator = ValueAnimator.ofFloat(0f, 1f).apply {
repeatMode = ValueAnimator.RESTART
duration = 500
repeatCount = 0
interpolator = OvershootInterpolator()
addUpdateListener {
val value = it.animatedValue as Float
startAnim(value)
}
}
}
ValueAnimator
是 Android
中用于实现动画效果的一个类。允许你在指定的时间段内从一个数值平滑过渡到另一个数值,并且可以监听和响应这个数值变化的过程。
具体参数含义不介绍了,比较简单,创建一个ValueAnimator
对象,500ms从0f-1f执行完一次动画,动画执行完成后,初始值还是0f,repeatCount
表示只执行一次,使用插值器OvershootInterpolator
,表示动画会先超出目标值,然后再回弹到目标值,以增加显示效果。
还需要使用addUpdateListener
对动画的进程进行监听,进度值用于控制控件平移的像素值。
控件是向上还是向下平移很好判断,只要拿输入的值和当前值做比较,输入值大于当前值向上平移,小于则向下平移。ViewB
设置新的值, ViewA
设置旧值,
/**
* 设置数字
*/
fun setNumber(pos: String, newNum: Int) {
if (number == newNum) { return }
mode = if (newNum > number) {
PAN_UP
} else {
PAN_DOWN
}
//设置旧值
viewA.text = "$number"
//设置新值
viewB.text = "$newNum"
if (animator?.isRunning == true) {
animator?.cancel()
}
setAnimDelay(pos)
animator?.duration = 400L + startDelay
viewA.translationY = 0F
viewB.translationY = 0F
animator?.start()
number = newNum
}
/**
* 如果是1位数字,立马执行
* 两位数的数字,设置前后延时执行,产生翻动效果
*/
private fun setAnimDelay(pos: String) {
if (pos == POS_FIRST) {
startDelay = 0
} else if (pos == POS_SECOND) {
startDelay = delay
}
}
控件上下平移使用setTranslationY
,用于设置视图(View
)在 Y 轴上的平移量。它的作用是将视图在当前的位置基础上沿着 Y 轴进行移动。参数的单位是像素。
正值 : 视图会向下移动。
负值: 视图会向上移动
setTranslationY
只会改变视图的视觉位置,并不会影响视图的布局边界(layout bounds
)。换句话说,视图的布局位置(例如 top
, bottom
)不会因为 setTranslationY
而改变,变化只是一个视觉上的移动效果。
开始平移动画,向上平移时viewA
和ViewB
同时向上平移一个控件高度的像素值,向下平移时,ViewB
从自身相对位置向上两个控件高度,向下平移一个控件高度像素值,ViewA
从自身位置向下移动一个控件高度像素值。
/**
* 开启动画
*/
private fun startAnim(value:Float){
if (mode == PAN_UP) {
viewA.translationY = -vHeight * value
viewB.translationY = -vHeight * value
} else {
viewA.translationY = vHeight * value
viewB.translationY = -2 * vHeight + vHeight * value
}
}
布局文件中引用
<com.csdn.ho.NumberView
android:id="@+id/number"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
效果
调用方式这里就不详细说明了,首先设置字体大位置和大小,加减操作时候通过调用setNumber
即可。
实际项目效果
总结
本篇文章所实现的自定义效果难度并不大,自定义ViewGroup
、使用ValueAnimator
,结合View
的setTranslationY
方法实现数字滚动效果。