安卓修改动画效果--动画差值器TimeInterpolator

前一段时间让实现一个类似弹幕的效果,从右到左飘过去,时间八秒,嗯,很好做,一个动画就ok了

布局代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"android:orientation="vertical"><include layout="@layout/title_activity" /><Buttonandroid:id="@+id/bt"android:text="浮动轮播"android:layout_width="@dimen/dp100"android:layout_marginLeft="-100dp"android:layout_height="@dimen/dp40"/><Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="start"android:layout_marginTop="@dimen/dp100"android:id="@+id/btStart"/></LinearLayout>

文件代码:

val width = windowManager.defaultDisplay.width//获取屏幕的宽
val dp100 = R.dimen.dp100.toDimen()
btStart.setOnClickListener {//播放一个平移代码bt.startAnimator(AnimatorUtil.translationX, 8000, width.toFloat() + dp100, 0F)//这个工具类放在最后面
}

效果图:

需求出现了

现在改了需求,需要把弹幕的视图改成跟屏幕一样宽,然后动画时间还是8秒,但是需要在中间停留五秒

现在拆分需求

调整宽度,并且设置layout_marginLeft为屏幕宽
动画改变:从右往中间1.5秒播完,然后中间等5秒,然后从中间往左1.5秒播完

上手

调整宽度,布局代码,调整宽度

    <Buttonandroid:id="@+id/bt"android:text="浮动轮播"android:layout_width="match_parent"android:layout_height="@dimen/dp40"/>

然后把layout_marginLeft设置为负的屏幕的宽度

val layoutParams = LinearLayout.LayoutParams(width, R.dimen.dp40.toDimen().toInt())
layoutParams.leftMargin = -width
bt.layoutParams = layoutParams

然后直接改动画,把动画拆成三步,第一步从右走到中间,第二部停留五秒,第三部从中间走到左边

        btStart.setOnClickListener {bt.startAnimator(AnimatorUtil.translationX, 1500, width.toFloat() * 2, width.toFloat()) {if (it == AnimatorUtil.END) {btStart.postDelayed({//从右往左进到中间动画结束后,//在中间停五秒//然后再播从中间往左走到外面的动画bt.startAnimator(AnimatorUtil.translationX, 1500, width.toFloat(), 0F)}, 5000)}}}

效果图:

优化

虽然上面的动画确实做到了效果,但是安全性不高,并且嵌套也很深,能不能优化一下呢?

我们可以使用动画差值器来进行优化,并且可以把上面实现的两个动画缩减到一个动画,而且中间不用做定时操作,提升了安全性,也减少了嵌套

我们可以实现动画差值器的接口(TimeInterpolator)来实现上面的效果,接口源码:

public interface TimeInterpolator {float getInterpolation(float input);
}

该接口只有一个方法,输入的是动画执行的百分比,返回值也是动画执行的百分比,所以可以重写该方法来动态的调整进度实现变更的需求效果

代码如下:

        btStart.setOnClickListener {bt.startAnimator(AnimatorUtil.translationX, 8000, width.toFloat() * 2, 0F).setInterpolator {//添加一个动画差值器,这个是kt风格的代码,java也类似return@setInterpolator when {it <= 0.1875F -> //0.1875是1.5秒相对于8秒的比例值//因为需要在0.1875(18.75%)走完0.5(50%),所以需要做一下数学计算it / 0.1875F * 0.5Fit >= 0.8125F ->//0.8125‬是6.5秒相对于8秒的比例值(it - 0.8125F) / 0.1875F * 0.5F + 0.5Felse -> 0.5F}}}

效果和上面一样,而且使用动画差值器基本可以不修改原有动画代码,并且可以实现很多的效果,当然,取决于自身的数学水平..

附上动画工具类的代码:

import android.animation.Animator
import android.animation.ObjectAnimator/*** creator: lt  2019/8/9--18:46    lt.dygzs@qq.com* effect : 属性动画工具类* warning:*//*** 动画回调的状态*/
typealias AnimatorState = Int/*** 动画常用的属性和状态*/
object AnimatorUtil {/**开始动画*/const val START: AnimatorState = 0/**动画结束*/const val END: AnimatorState = 1/**取消了动画*/const val CANCEL: AnimatorState = 2/**重复动画*/const val REPEAT: AnimatorState = 3/**透明动画*/const val alpha = "alpha"/**x轴旋转*/const val rotationX = "rotationX"/**y轴旋转*/const val rotationY = "rotationY"/**缩放x轴*/const val scaleX = "scaleX"/**缩放y轴*/const val scaleY = "scaleY"/**位移x轴*/const val translationX = "translationX"/**位移y轴*/const val translationY = "translationY"
}/*** 开始一个属性动画*/
fun Any.startAnimator(funName: String,time: Long,vararg floats: Float,listener: ((AnimatorState) -> Unit)? = null): ObjectAnimator {val objectAnimator = ObjectAnimator.ofFloat(this, funName, *floats).setDuration(time)if (listener != null) {objectAnimator.addListener(object : Animator.AnimatorListener {override fun onAnimationRepeat(animation: Animator?) {listener.invoke(AnimatorUtil.REPEAT)}override fun onAnimationEnd(animation: Animator?) {listener.invoke(AnimatorUtil.END)}override fun onAnimationCancel(animation: Animator?) {listener.invoke(AnimatorUtil.CANCEL)}override fun onAnimationStart(animation: Animator?) {listener.invoke(AnimatorUtil.START)}})}objectAnimator.start()return objectAnimator
}

动画估值器:TypeEvaluator,使用:

anim.setEvaluator(ArgbEvaluator())

安卓修改动画效果--动画差值器TimeInterpolator相关推荐

P85-前端基础动画效果-动画缩放效果
P85-前端基础动画效果-动画缩放效果 1.概述这篇文章介绍动画缩放效果对元素进行缩放的函数: scaleX() 水平方向缩放 scaleY() 垂直方向缩放 scaleZ() Z方向缩放 sca ...
P84-前端基础动画效果-动画3D复仇者联盟练习
P84-前端基础动画效果-动画3D复仇者联盟练习 1.概述这篇文章通过一个3D动画,对前面学习的动画效果做一个总结性的练习. 知识点: 元素设置透明效果设置3d变形效果设置动画旋转 2. 3D复 ...
P82-前端基础动画效果-动画旋转练习鸭子表
P82-前端基础动画效果-动画旋转练习鸭子表 1.概述这篇文章做个练习复习上篇文章学习的旋转动画,鸭子表. 2.鸭子表我们的目标是做一个鸭子背景图案的钟表,有三个表针旋转.在这个案例中我们通过拆分 ...
P83-前端基础动画效果-动画奔跑的小子练习
P83-前端基础动画效果-动画奔跑的小子练习 1.概述这篇文章通过一个奔跑的少年练习动画效果 2.奔跑的小子 2.1.奔跑的小子图片 2.2.奔跑的小子代码 <!DOCTYPE html> ...
android自定义差值器,如何创建自定义插值器以在android中应用翻译动画
我想创建一个自定义插值来应用平移动画,其中动画应该通过以下函数: public static float easeIn(float t,float b , float c, float d) { re ...
php动画效果,动画效果总结
摘要: 动画效果总结 .main{width:100px;height: 100px;margin: 20px 20px;float:left;} .fadein,.fadeout,.fadetogg ...
js动画效果 - 动画曲线
1 参考常见的动画都是速率相同的平滑效果,而有些动画在变动过程中速率不同,比如有些网站的返回顶部的动画效果会经过慢-快-慢的效果,这就设计到数学模型了,有一片参考文章:http://blog.csd ...
用计算机做动画效果,动画图片多种效果制作步骤
动画图片多种效果制作步骤:文字绕月旋转做法 <一>打开FLASH软件,设置版面及导入背景图片,按图解进行,并在35帧处插入帧 . 当这些操作完后与平时在办公软件打字一样,打一部分就保存,这 ...
王学岗的属性动画上(五)------抛物线效果的实现(估值器和插值器)
布局文件只有一个<ImageView/> package com.example.propertyOfGang;import android.animation.Animator; imp ...

安卓修改动画效果--动画差值器TimeInterpolator

需求出现了

上手

优化

安卓修改动画效果--动画差值器TimeInterpolator相关推荐

最新文章

热门文章