Android中通过属性动画实现文字轮播效果

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂，风趣幽默"，感觉非常有意思,忍不住分享一下给大家。
👉点击跳转到教程

一、创建一个自定义ProvinceView类,具体代码如下

/*** @Author: ly* @Date: 2024/2/22* @Description:*/
private val provinces = listOf("中原区","二七区","管城回族区","金水区","上街区","惠济区","中牟县","巩义市","荥阳市","新密市","新郑市","登封市"
)class ProvinceView(context: Context, attrs: AttributeSet) : View(context, attrs) {private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {textSize = 30.dptextAlign = Paint.Align.CENTER}var province = "中原区"set(value) {field = valueinvalidate()}init {paint.color = Color.parseColor("#FF0000")setLayerType(LAYER_TYPE_SOFTWARE, null)}override fun onDraw(canvas: Canvas) {super.onDraw(canvas)canvas.drawText(province, width / 2f, height / 2f, paint)}
}class ProvinceEvaluator : TypeEvaluator<String> {override fun evaluate(fraction: Float, startValue: String, endValue: String): String {val startIndex = provinces.indexOf(startValue)val endIndex = provinces.indexOf(endValue)val currentIndex = startIndex + ((endIndex - startIndex) * fraction).toInt()return provinces[currentIndex]}
}

二、在对应的xml中引入该自定义View

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><com.example.customviewanimation.view.ProvinceViewandroid:id="@+id/view"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

三、在Activity中通过属性动画来实现文字轮播效果

class MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)val animator = ObjectAnimator.ofObject(view, "province", ProvinceEvaluator(), "登封市")animator.startDelay = 1000animator.duration = 8000animator.start()}
}

具体效果如图所示：