Android开发 ViewPropertyAnimator 属性动画

朱祥军 發表於 2023-1-17 10:50:00

Android开发 ViewPropertyAnimator 属性动画

<h1>版权声明</h1>
本文来自博客园，作者：观心静 ，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/17057256.html
<div>本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。</div>
<h1>前言</h1>
　　View类里自带实现的动画，ViewPropertyAnimator是基于ValueAnimator实现的，这点在ViewPropertyAnimator的源码中的 private void startAnimation() 方法里可以看到。Android的动画实现方式很多，但是基本上都是基于ValueAnimator。在代码上实现动画的方式有三种，这三种的区别是什么？下面会一一说明：
>>ValueAnimator  相对底层的数值动画，它不实现动画，但是提供动画执行的时间轴中每一步的数值，需要你将数值导入到对应的View的方法里。比如setTranslationY()方法，实现平移。参考博客：android 开发属性动画ValueAnimator
>>ObjectAnimator 基于ValueAnimator 实现的属性动画，它实现动画且功能强大，可以实现各种能完成一连串的同步执行与流程执行的组合动画，但是较为复杂。但是你一定需要掌握，参考博客：android 开发属性动画ObjectAnimator与动画效果
>>ViewPropertyAnimator  也是基于ValueAnimator 实现的属性动画，但是这是View这个类自带的属性动画。简单快速是它的优点，缺点就是完成一些流程执行的组合动画十分麻烦。但是一些简单的动画实现优先选择它来使用。
<h1>alpha 透明度动画</h1>
<h2>绝对值透明度</h2>
代码
<div class="cnblogs_code">
<pre> override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContentView(mBinding.root)
 mBinding.demoView.setOnClickListener {
 val animate : ViewPropertyAnimator = mBinding.demoView.animate()
 animate.alpha(0f) //透明度
 animate.setDuration(2000L) //持续时间
// animate.start() //动画开始,也可以不调用，在ViewPropertyAnimator配置完成后会自动执行start，但是会延迟一些些时间
 }
}</pre>
</div>
效果图：
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230117150606674-169764153.gif" alt="">
<h2>相对值透明度</h2>
代码：
 
<div class="cnblogs_code">
<pre> mBinding.demoView.setOnClickListener {
 val animate : ViewPropertyAnimator = mBinding.demoView.animate()
 animate.alphaBy(-0.2f)
 animate.setDuration(2000L)
 }</pre>
</div>
 
效果图：
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230117163612556-1191450745.gif" alt="">
<h1>绝对坐标平移动画</h1>
代码
<div class="cnblogs_code">
<pre> mBinding.demoView.setOnClickListener {
 val animate : ViewPropertyAnimator = mBinding.demoView.animate()
 animate.y(500f) //y轴移动坐标点，这是一个绝对坐标值
 animate.x(1000f) //x轴移动坐标点，这是一个绝对坐标值
 animate.z(100f) //z轴移动坐标点，这是一个绝对坐标值,乍看可能没有效果，但是这是增加阴影高度的，需要添加阴影才能体现效果
 animate.setDuration(2000L) //持续时间
 }</pre>
</div>
效果图
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230117151036724-901412875.gif" alt="">
<h1>相对偏移量平移动画</h1>
代码
<div class="cnblogs_code">
<pre> mBinding.demoView.setOnClickListener {
 val animate : ViewPropertyAnimator = mBinding.demoView.animate()
 animate.yBy(100f) //y轴偏移量，这是一个相对偏移量
 animate.xBy(100f) //x轴偏移量，这是一个相对偏移量
 animate.setDuration(2000L) //持续时间
 }</pre>
</div>
此方式与上面的代码效果一致
<div class="cnblogs_code">
<pre> mBinding.demoView.setOnClickListener {
 val animate : ViewPropertyAnimator = mBinding.demoView.animate()
 animate.translationY(100f) //y轴偏移量，这是一个相对偏移量
 animate.translationX(100f) //x轴偏移量，这是一个相对偏移量
 animate.setDuration(2000L) //持续时间
 }</pre>
</div>
效果图
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230117151336898-1566392807.gif" alt="">
<h2>平移Z轴</h2>
乍看可能没有效果，但是这是增加阴影高度的，需要添加阴影
代码：
<div class="cnblogs_code">
<pre> mBinding.demoView.setOnClickListener {
 val animate : ViewPropertyAnimator = mBinding.demoView.animate()
 animate.translationZ(100f) //以相对值倍数比例缩放宽度
 animate.setDuration(2000L)
 }</pre>
</div>
<h1>旋转动画</h1>
<h2>绝对值平面旋转</h2>
<div class="cnblogs_code">
<pre> mBinding.demoView.setOnClickListener {
 val animate : ViewPropertyAnimator = mBinding.demoView.animate()
 animate.rotation(180f)
 animate.setDuration(2000L)
 }</pre>
</div>
效果图：
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230117155409770-666145446.gif" alt="">
<h2>绝对值X轴旋转</h2>
代码：
<div class="cnblogs_code">
<pre> mBinding.demoView.setOnClickListener {
 val animate : ViewPropertyAnimator = mBinding.demoView.animate()
 animate.rotationX(180f)
 animate.setDuration(2000L)
 }</pre>
</div>
效果图：
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230117160602467-1771757020.gif" alt="">
<h2>绝对值Y轴旋转</h2>
代码：
<div class="cnblogs_code">
<pre> mBinding.demoView.setOnClickListener {
 val animate : ViewPropertyAnimator = mBinding.demoView.animate()
 animate.rotationY(180f)
 animate.setDuration(2000L)
 }</pre>
</div>
效果图：
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230117161122752-1008920849.gif" alt="">
<h2>相对值旋转</h2>
可以连续点击旋转，代码：
<div class="cnblogs_code">
<pre> mBinding.demoView.setOnClickListener {
 val animate : ViewPropertyAnimator = mBinding.demoView.animate()
 animate.rotationBy(90f)
 animate.setDuration(2000L)
 }</pre>
</div>
效果图：
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230117161751498-845240010.gif" alt="">
<h1>缩放动画</h1>
<h2>绝对值缩放</h2>
代码：
<div class="cnblogs_code">
<pre> mBinding.demoView.setOnClickListener {
 val animate : ViewPropertyAnimator = mBinding.demoView.animate()
 animate.scaleX(2f) //以绝对值倍数比例缩放宽度
 animate.scaleY(2f) //以绝对值倍数比例缩放高度
 animate.setDuration(2000L)
 }</pre>
</div>
 
效果图：
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230117162046678-14660190.gif" alt="">
<h2>相对值缩放</h2>
代码：
<div class="cnblogs_code">
<pre> mBinding.demoView.setOnClickListener {
 val animate : ViewPropertyAnimator = mBinding.demoView.animate()
 animate.scaleXBy(-0.3f) //以相对值倍数比例缩放宽度
 animate.scaleYBy(-0.3f) //以相对值倍数比例缩放高度
 animate.setDuration(2000L)
 }</pre>
</div>
效果图：
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230117162243633-623338137.gif" alt="">
<h1>开启动画延迟</h1>
代码：
<div class="cnblogs_code">
<pre> mBinding.demoView.setOnClickListener {
 val animate : ViewPropertyAnimator = mBinding.demoView.animate()
 Toast.makeText(this, "点击了", Toast.LENGTH_SHORT).show()
 animate.setStartDelay(2000L) //设置开始动画延迟时间
 animate.rotation(90f)
 animate.setDuration(2000L)
 }</pre>
</div>
效果图：
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230117164709090-425153048.gif" alt="">
<h1>设置插值器</h1>
插值器的意义是改变动画的执行过程，使其产生先慢后快、先快后慢、回弹等等效果。此部分内容在 android 开发属性动画ObjectAnimator与动画效果  博客中有详细介绍过。这里只演示一下效果：
回退效果查找器，代码：
<div class="cnblogs_code">
<pre> mBinding.demoView.setOnClickListener {
 val animate: ViewPropertyAnimator = mBinding.demoView.animate()
 animate.yBy(200f)
 animate.setInterpolator(BounceInterpolator())
 animate.setDuration(2000L)
 }</pre>
</div>
效果图：
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230117165423038-1104496029.gif" alt="">
<h2>其他快捷方便使用的插值器</h2>
<ul>
<li>BaseInterpolator 基础插值器</li>
<li>LinearInterpolator 线性插值器</li>
<li>AccelerateDecelerateInterpolator 先加速在减速插值器</li>
<li>AccelerateInterpolator 加速插值器</li>
<li>OvershootInterpolator　超出回弹插值器</li>
<li>AnticipateOvershootInterpolator 预期超出回弹插值器</li>
<li>DecelerateInterpolator 减数插值器</li>
<li>CycleInterpolator 循环插值器</li>
<li>BounceInterpolator 回弹查插值器</li>
<li>PathInterpolator 路径查插值器</li>
</ul>
<h2>自定义插值器</h2>
如果你有时间，且不满意现有的插值器效果，你可以自定义插值器，自定义插值器需要一些数学功底，需要涉及一些抛物线函数
<div class="cnblogs_code">
<pre> val animate: ViewPropertyAnimator = mBinding.demoView.animate()
 animate.setInterpolator(object :BaseInterpolator(){
 override fun getInterpolation(input: Float): Float {
 TODO("Not yet implemented")
 }
 })</pre>
</div>
<h1>动画的流程监听</h1>
<div class="cnblogs_code">
<pre> animate.setListener(object : AnimatorListenerAdapter() {
 override fun onAnimationStart(animation: Animator?) {
 super.onAnimationStart(animation)
 //动画开始
 }
 override fun onAnimationEnd(animation: Animator?) {
 super.onAnimationEnd(animation)
 //动画结束
 }

 override fun onAnimationRepeat(animation: Animator?) {
 super.onAnimationRepeat(animation)
 //动画重复
 }

 override fun onAnimationPause(animation: Animator?) {
 super.onAnimationPause(animation)
 //动画暂停
 }

 override fun onAnimationResume(animation: Animator?) {
 super.onAnimationResume(animation)
 //动画恢复
 }
 override fun onAnimationCancel(animation: Animator?) {
 super.onAnimationCancel(animation)
 //动画取消
 }
 })</pre>
</div>
<h1>监听动画值的变化</h1>
这个接口返回ValueAnimator，这样你就可以监听动画时间轴中的每一个数值。所以这里已经涉及到了ValueAnimator的内容，要理解这个接口的使用，你需要了解 android 开发属性动画ValueAnimator  
代码:
<div class="cnblogs_code">
<pre> /**
* Sets a listener for update events in the underlying ValueAnimator that runs
* the property animations. Note that the underlying animator is animating between
* 0 and 1 (these values are then turned into the actual property values internally
* by ViewPropertyAnimator). So the animator cannot give information on the current
* values of the properties being animated by this ViewPropertyAnimator, although
* the view object itself can be queried to get the current values.
*
* @see android.animation.ValueAnimator.AnimatorUpdateListener
*
* @param listener The listener to be called with update events. A value of
* <code>null</code> removes any existing listener.
* @return This object, allowing calls to methods in this class to be chained.
*/
public ViewPropertyAnimator setUpdateListener(ValueAnimator.AnimatorUpdateListener listener) {
 mUpdateListener = listener;
 return this;
}</pre>
</div>
 
 
End
 

</div>
<div id="MySignature" role="contentinfo">
<div style="text-align: center">
本文来自博客园，作者：观心静，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/17057256.html 
<div style="color:orange;font-size:16px;">本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。 </div>
</div> 
来源：https://www.cnblogs.com/guanxinjing/p/17057256.html

頁: [1]

琼殿技术论坛's Archiver

Android开发 ViewPropertyAnimator 属性动画