Android动画插值器之PathInterpolator浅析

本文深入探讨了PathInterpolator在Android动画中的应用,介绍了通过不同类型的贝塞尔曲线控制动画效果的方法,并提供了具体的实现示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  好了,详细大家已经了解了插值器的作用和用法,那么我们开始这篇博文吧!

  

Method code
PathInterpolator(Path path) Create an Interpolator for an arbitrary Path.
PathInterpolator(float controlX1, float controlY1, float controlX2, float controlY2) Create an Interpolator for a cubic Bezier curve.
PathInterpolator(float controlX, float controlY) Create an Interpolator for a quadratic Bezier curve.

 先说第三种用法:传入一个控制点坐标,内部代码为:

[java]  view plain  copy
  1. Path path = new Path();  
  2. path.moveTo(00);  
  3. path.quadTo(controlX, controlY, 1f, 1f);  
也就是起始点为(0,0),结束点为(1,1),控制点为用户传入的一条二阶贝塞尔曲线,不熟悉贝塞尔曲线的可以看这篇Android贝塞尔曲线的魅力

 或者看一个gif图: 


 gif图的代码地址:http://git.oschina.net/zhengxu.zmit.cn/bezierview

 那么这里插值器为什么要用到贝塞尔曲线呢?请看下图:(以translate位移动画为例)


  这里要说一下,距离和时间的单位都可以看做百分比,最大值是100%,也就是1,所以这里使用贝塞尔曲线的目的就是控制每时每刻的动画应该走的位移,这样说很抽象,下面举个例子:

  首先画出"正确"的坐标图:


  上面的代码稍微改了一下。下面,我移到控制点,找到两个算是极端的位置,演示一下效果:

1、控制点坐标大概为(0f,2f)


动画演示为:


可以看出,符合坐标,先在很快时间走完所有位移,然后超过最大位移后再回到原来的100%位置

2、控制点坐标大概为(1f,2f):


预期:缓慢走完全部位移,然后继续缓慢超出,然后瞬间回到原100%位置

动画:


哈哈,我们可以根据自己制定贝塞尔曲线的控制点,传入PathInterpolator,就可以控制动画啦~


我们接着说第二个构造方法:传入两个控制点坐标,构造一个三阶贝塞尔曲线,功能和二阶一样,具体我就不做赘述,

大家可以去这个网址http://cubic-bezier.com/#.17,.67,.83,.67,查看一下三阶贝塞尔曲线可以变成啥样子~


第一个构造方法:传入一个Path对象,可以用path构造出贝塞尔曲线,也可以是别的曲线,比如:

[java]  view plain  copy
  1. Path path = new Path();  
  2. path.moveTo(0f,0f);  
  3. path.lineTo(1f,0.5f);  
  4. path.lineTo(1f,1f);  

坐标:



这样的动画预期就是:缓慢走完一般路程,最后瞬间走完剩下的路程

动画展示:



好了,就到这里啦~喜欢的或不喜欢的都可以评论给我表扬或者批评,与诸君共勉!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值