带你走一波Android自定义Animator属性动画相关事项（一）

一、简介

image.png

如上图所示：android动画分类大致有两种一种是View动画一种是转场动画。

帧动画：将图片一张一张按顺序播放，展现出动画效果。

补间动画：实现动画alpha（淡入淡出），translate（位移），scale（缩放大小），rotate（旋转）等效果，一般采用xml文件形式。

属性动画：（重点）它是对于对象属性的动画。补间动画的内容，都可以通过属性动画实现。

这里我们就不讲帧动画跟补间动画，这两个大家可以自己百度一下用法。(另外这篇文章中的动画都是在代码中实现的，如果要看xml的使用方法，可以看看Android 动画使用 scale、alpha、translate、rotate、set
这篇其他人写的这篇文章。

二、属性动画

基本使用（ViewPropertyAnimator）

imag_view.animate().run {
translationX(400f) //设置左移
duration = 1000//设置动画运行的时间
setInterpolator(LinearInterpolator()) //设置线性插值器
}

gifeditor_20191202_151011.gif

上面是最基本的使用，api提供的有移动、旋转、缩放、透明，看下面的api:

image.png

上面的api中可以看到都存在绝对跟相对(方法后面-by)的方法，其中绝对的方法以上面的代码为例子，区别是：
translationX(400f)代表将translationX变成400
translationXBy(400f)代表将translationX增加400

这么多api就不做逐一展示了。

ObjectAnimator

1. 基本的使用方式：

用 ObjectAnimator.ofXXX() 创建 ObjectAnimator 对象；

添加时长、差值器等各种参数

用 start() 方法执行动画。

ObjectAnimator.ofFloat(imag_view,View.ROTATION,0f,180f).run {
    duration = 1000
    interpolator = LinearInterpolator()
    start()
}

gifeditor_20191202_164532.gif

上面是对一个系统提供的View进行动画展示，主要方法是ObjectAnimator.ofFloat(imag_view,View.ROTATION,0f,180f)
第一个参数：传入要进行属性动画的view
第二个参数：要变化的属性值，这里是传入View.ROTATION，也就是"rotation"
第三个参数：属性起始值
第四个参数：属性结束值
后面还可以加入多个参数值，从第三个参数开始到最后第n个参数，表示属性开始 ->中间值->中间值.... ->结束值
注意一点：并非所有的属性都是可以有set get方法，可以进行属性动画。

2. 自定义View动画

自定义View属性动画以及使用的步骤：

为要改变的属性添加setter/getter方法

setter方法中调用invalidate()使其重新绘画

在onDraw()中根据改变的属性绘画出你要的效果

使用的时候跟ObjectAnimator基本使用方式一致

大致的模板代码


class CircleView : View {
  //提供给外面改变的属性值 这里使用kotlin语法 实际上它默认已经实现了setter/getter方法
// 但是这里个set方法我们要改写一下 记得调用 invalidate()
    var progress: Float = 0f
        set(value) {
            field = value
            invalidate()
        }

    @RequiresApi(Build.VERSION_CODES.M)
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        //省略......
        canvas!!.drawArc(rectF, 135f, progress * 2.7f, false, paint)
        //省略......
        canvas.drawText("${progress.toInt()}%", centerX, centerY+40, paint)
    }

}

真正的实现与调用

class CircleView : View {

    val paint = Paint(Paint.ANTI_ALIAS_FLAG)
    val rectF = RectF()

    init {
        paint.run {
            textSize = dpToPixel(50f)
            textAlign = Paint.Align.CENTER
        }
    }

    var radius = dpToPixel(120f)

    var progress: Float = 0f
        set(value) {
            field = value
            invalidate()
        }

    constructor(context: Context) : super(context)
    constructor(context: Context, attributeSet: AttributeSet?) : super(context, attributeSet)


    @RequiresApi(Build.VERSION_CODES.M)
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        var centerX = width / 2f
        var centerY = height / 2f
        //画弧形进度条
        paint.run {
            color = context.getColor(R.color.colorAccent)
            style = Paint.Style.STROKE
            strokeCap = Paint.Cap.ROUND
            strokeWidth = dpToPixel(20f)
        }
        rectF.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius)
        canvas!!.drawArc(rectF, 135f, progress * 2.7f, false, paint)

        //画百分比的数值
        paint.run {
            color = Color.BLACK
            style = Paint.Style.FILL
        }
        canvas.drawText("${progress.toInt()}%", centerX, centerY+40, paint)
    }

}

//调用代码
ObjectAnimator.ofFloat(circle_view,"progress",0f,80f).run {
  duration = 2000
  interpolator = OvershootInterpolator() //插值器 超过结束值后再回弹
  repeatCount = INFINITE  // 重复次数-无限循环
  repeatMode = RESTART //重复模式-重新开始
  start()
}

gifeditor_20191202_172002.gif

这里设置了OvershootInterpolator插值器，使得它可以超过后回弹回来。这里可以使用PropertyValuesHolders.ofKeyframe()做到类似效果，可以翻到下面对应内容看一下

ValueAnimator

这个是ObjectAnimator的父类，这个我并没怎么接触，后期再补充吧

2. 设置监听器

设置ObjectAnimator的监听器

监听器类型.png

//添加停止的监听器
addPauseListener( object : Animator.AnimatorPauseListener{
  override fun onAnimationPause(animation: Animator?) {
    Log.i("MainActivity","addPauseListener -- onAnimationPause ------------------------------------")
  }
  override fun onAnimationResume(animation: Animator?) {
    Log.i("MainActivity","addPauseListener -- onAnimationResume ------------------------------------")
  }
})
//添加更新的监听器
addUpdateListener(object :ValueAnimator.AnimatorUpdateListener{
  override fun onAnimationUpdate(animation: ValueAnimator?) {
//    Log.i("MainActivity","addUpdateListener -- onAnimationUpdate ------------------------------------")
    }
  })
//添加监听器
addListener(object : Animator.AnimatorListener{
  override fun onAnimationRepeat(animation: Animator?) {
    Log.i("MainActivity","AnimatorListener -- onAnimationRepeat------------------------------------")
    }
   override fun onAnimationEnd(animation: Animator?) {
    Log.i("MainActivity","AnimatorListener -- onAnimationEnd------------------------------------")
    }
  override fun onAnimationCancel(animation: Animator?) {
  Log.i("MainActivity","AnimatorListener -- onAnimationCancel------------------------------------")
  }
  override fun onAnimationStart(animation: Animator?) {
      Log.i("MainActivity","AnimatorListener -- onAnimationStart------------------------------------")
     }
  })
}

设置点击事件监听

R.id.start_object_animator ->{
                省略...
                mObjectAnim.start()
                Log.i("MainActivity","点击开始状态 --${!mObjectAnim.isStarted}")
            }

            R.id.end_object_animator ->{
                mObjectAnim.end()
                Log.i("MainActivity","点击结束状态 --${!mObjectAnim.isRunning}")

            }
            R.id.cancel_object_animator ->{
                mObjectAnim.cancel()
                Log.i("MainActivity","点击取消状态 -- ")
            }
            R.id.pause_object_animator->{
                if (mObjectAnim.isRunning) {
                    mObjectAnim.pause()
                    Log.i("MainActivity","点击暂停状态 --${mObjectAnim.isPaused}")
                }
            }
            R.id.reverse_object_animator->{
                Log.i("MainActivity","点击反向状态 --")
                mObjectAnim.reverse()
            }
            R.id.resume_object_animator->{
                mObjectAnim.resume()
                Log.i("MainActivity","点击继续执行 --")
            }

点击顺序（这里点击开始按钮是重新初始化动画，请大家不要误解）
开始start -> 暂停pause ->继续执行resume->结束end
开始start->取消cancel
开始start->结束end

效果图.gif

MainActivity: AnimatorListener -- onAnimationStart------------------------------------
MainActivity: 点击开始状态 --false
MainActivity: addPauseListener -- onAnimationPause ------------------------------------
MainActivity: 点击暂停状态 --true
MainActivity: addPauseListener -- onAnimationResume ------------------------------------
MainActivity: 点击继续执行 --
MainActivity: AnimatorListener -- onAnimationEnd------------------------------------
MainActivity: 点击结束状态 --true
MainActivity: AnimatorListener -- onAnimationStart------------------------------------
MainActivity: 点击开始状态 --false
MainActivity: AnimatorListener -- onAnimationCancel------------------------------------
MainActivity: AnimatorListener -- onAnimationEnd------------------------------------
MainActivity: 点击取消状态 -- 
MainActivity: AnimatorListener -- onAnimationStart------------------------------------
MainActivity: 点击开始状态 --false
MainActivity: AnimatorListener -- onAnimationEnd------------------------------------
MainActivity: 点击结束状态 --true

上面是点击产生的log日志，其中有个addUpdateListener监听我没有打印信息，因为动画运行中就会不停打印出来，所以就没有打印出来了。
可以看到所有的状态都是可以有回调方法监听的。

这里有个方法要注意一下 cancel()跟end()这个两个方法。

如果动画是已经结束了end()的时候，就不会有回调onAnimationCancel跟onAnimationEnd两个监听方法了,看一下ValueAnimator源码中有体现了

    @Override
    public void cancel() {
关键代码1
        if (mAnimationEndRequested) {
            return;
        }
        if ((mStarted || mRunning) && mListeners != null) {
            if (!mRunning) {
                notifyStartListeners();
            }
            ArrayList tmpListeners =
                    (ArrayList) mListeners.clone();
            for (AnimatorListener listener : tmpListeners) {
关键代码2
                  listener.onAnimationCancel(this);
            }
        }
关键代码3
        endAnimation();
    }
    private void endAnimation() {
关键代码4
        mAnimationEndRequested = true;
  省略......
            for (int i = 0; i < numListeners; ++i) {
关键代码5
                tmpListeners.get(i).onAnimationEnd(this, mReversing);
            }
        }
省略......
    }

关键代码1：mAnimationEndRequested == true则不走下面的逻辑，设置true是在关键代码4中设置的,也就是说当动画结束调用了endAnimation（）就不会调用到两个回调onAnimationCancel跟onAnimationEnd。
关键代码2跟3跟5：就是动画未结束，所以调用了回调onAnimationCancel()再调用回调onAnimationEnd()

小结:当调用cancel()的时候，动画未结束时则回调onAnimationCancel()跟onAnimationEnd()，当动画结束时，则不会调用任何监听回调方法

end方法有时候会回调两个回调分别是onAnimationStart跟onAnimationEnd,看一下ValueAnimator源码中的逻辑

    public void end() {
        if (Looper.myLooper() == null) {
            throw new AndroidRuntimeException("Animators may only be run on Looper threads");
        }
        if (!mRunning) {
            // Special case if the animation has not yet started; get it ready for ending
            startAnimation();
            mStarted = true;
        } else if (!mInitialized) {
            initAnimation();
        }
        animateValue(shouldPlayBackward(mRepeatCount, mReversing) ? 0f : 1f);
        endAnimation();
    }

从上面的逻辑可以看到，当调用到!mRunning == true的时候，会调用startAnimation()导致回调多一个onAnimationStart方法。

小结：当调用end()的时候，如果动画处于运行中，则回调onAnimationEnd，如果不处于运行中，则回调onAnimationStart跟onAnimationEnd。

设置ViewPropertyAnimator的监听器

image.png

相比ObjectAnimator的监听器，这里的ViewPropertyAnimator多了两个回调方法

withStartAction跟withEndAction分别在开始跟结束调用，但是只会被调用一次。
setListener中的onAnimationRepeat回调不会被调用，因为ViewPropertyAnimator不支持重复
其它的回调跟ObjectAnimator一致

三. 属性动画组合

image.png

ViewPropertyAnimator
改变尺寸同时改变透明度，下面这种写法是几种动画一块运行的

R.id.btn_viewProperty_mulity->{
  if (isSelect) {
    imag_view.animate().scaleX(1.5f).scaleY(1.5f).alpha(0f).duration =2000
  }else{
    imag_view.animate().scaleX(1.0f).scaleY(1.0f).alpha(1f).duration =2000
  }
   isSelect = !isSelect
}

gifeditor_20191203_163831.gif

PropertyValuesHolder
ObjectAnimator使用时则是要通过PropertyValuesHolder来实现
上面的代码可以用

R.id.btn_viewProperty_mulity->{
  if (isSelect) {
    var propertyValueHolder1 = PropertyValuesHolder.ofFloat("scaleX",1f,1.5f)
    var propertyValueHolder2 = PropertyValuesHolder.ofFloat("scaleY",1f,1.5f)
    var propertyValueHolder3 = PropertyValuesHolder.ofFloat("alpha",1f,0f)
    ObjectAnimator.ofPropertyValuesHolder(imag_view,propertyValueHolder1,propertyValueHolder2,propertyValueHolder3)
    .setDuration(2000).start()
  }else{
    var propertyValueHolder1 = PropertyValuesHolder.ofFloat("scaleX",1.5f,1f)
    var propertyValueHolder2 = PropertyValuesHolder.ofFloat("scaleY",1.5f,1f)
    var propertyValueHolder3 = PropertyValuesHolder.ofFloat("alpha",0f,1f)
    ObjectAnimator.ofPropertyValuesHolder(imag_view,propertyValueHolder1,propertyValueHolder2,propertyValueHolder3)
    .setDuration(2000).start()
    }
    isSelect = !isSelect
}

PropertyValuesHolders.ofKeyframe()同一个属性拆分
ofKeyframe （关键帧），可以把同一个动画属性拆分成多个阶段

var keyframe = Keyframe.ofFloat(0f,0f)//关键帧 0刚才开时的时候
var keyframe1 = Keyframe.ofFloat(0.5f,95f)//关键帧 0.5进行到一半的时候
var keyFrame2 = Keyframe.ofFloat(1f,80f)//关键帧1最后的时候
var holder = PropertyValuesHolder.ofKeyframe("progress", keyframe, keyframe1, keyFrame2)
ObjectAnimator.ofPropertyValuesHolder(circle_view,holder).setDuration(3000).start()

gifeditor_20191203_175839.gif

实现类似interpolator = OvershootInterpolator()插值器超过结束值后再回弹的效果

AnimatorSet
也是组合动画的，可以让多个动画配合执行，不过它可以让动画先后有序执行~~
playTogether（同时执行）、playSequentially（顺序执行）
精确配置顺序with(),before(),after()

示例代码：
var animator1 = ObjectAnimator.ofFloat(imag_view,"alpha",0f,1f)
animator1.interpolator = AccelerateDecelerateInterpolator()
var animator3 = ObjectAnimator.ofFloat(imag_view,"scaleX",0f,1f)
var animator2 = ObjectAnimator.ofFloat(imag_view,"scaleY",0f,1f)
var animator4 = ObjectAnimator.ofFloat(imag_view,"translationX",0f,200f)
animator4.interpolator = LinearInterpolator()
AnimatorSet().apply {
  playTogether(animator2,animator3)
  playSequentially(animator1,animator4)
  duration = 2000
  start()
}

gifeditor_20191203_172107.gif

解释一下上面的代码
上面使用 AnimatorSet将多个ObjectAnimator放在一块运行，并且playTogether(animator2,animator3) 代表一起运行
playSequentially(animator1,animator4) 代表先后顺序运行
所以就有了下面的效果图（x轴、y轴方向放大跟透明度由0-1）是一起的，然后在x轴方向移动。

上面的播放逻辑也可以使用精确配置顺序with(),before(),after()来实现

AnimatorSet().apply {
  play(animator1).with(animator2).with(animator3).before(animator4)
  duration = 2000
  start()
 }

注意：每个传入给AnimatorSet的animator可以自己定义自己的动画运行时间、差值器等，但是如果在AnimatorSet设置了运行时间的话则以在AnimatorSet设置的为准。

带你走一波Android自定义Animator属性动画相关事项（一）

一、简介

二、属性动画

基本使用（ViewPropertyAnimator）

ObjectAnimator

1. 基本的使用方式：

2. 自定义View动画

ValueAnimator

2. 设置监听器

设置`ObjectAnimator`的监听器

设置`ViewPropertyAnimator`的监听器

三. 属性动画组合

你可能感兴趣的:(带你走一波Android自定义Animator属性动画相关事项（一）)

带你走一波Android自定义Animator属性动画相关事项（一）

一、简介

二、属性动画

基本使用 （ViewPropertyAnimator）

ObjectAnimator

1. 基本的使用方式：

2. 自定义View动画

ValueAnimator

2. 设置监听器

设置ObjectAnimator的监听器

设置ViewPropertyAnimator的监听器

三. 属性动画组合

你可能感兴趣的:(带你走一波Android自定义Animator属性动画相关事项（一）)

基本使用（ViewPropertyAnimator）

设置`ObjectAnimator`的监听器

设置`ViewPropertyAnimator`的监听器