微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何为动画创建自己的三次贝塞尔曲线?就像CSS的“动画计时功能:三次贝塞尔曲线x1,y1,x2,y2”,

如何解决如何为动画创建自己的三次贝塞尔曲线?就像CSS的“动画计时功能:三次贝塞尔曲线x1,y1,x2,y2”,

我正在学习三次方贝塞尔曲线,并尝试编写自己的三次方贝塞尔曲线函数以用于动画,这与css的用法类似。

根据wikipedia,三次贝塞尔曲线可以定义为

enter image description here

所以我创建了自己的函数 cubicBezier ,其中P0为(0,0),P1为(x1,y1),P2为(x2,y2),P3为(1,1) 。 我下面的函数根据输入的t在[0,1]之间的时间返回曲线上的一个点。

function cubicBezier(t,x1,y1,x2,y2)
    return Vector2f(0,0) * (1 - t) * (1 - t) * (1 - t) + Vector2f(x1,y1) * 3 * (1 - t) * (1 - t) * t + Vector2f(x2,y2) * 3 * (1 - t) * t * t + Vector2f(1,1) * t * t * t

我对应该用于动画的三次贝塞尔函数的返回值的哪一部分感到困惑。

例如,如果要在转换X上设置“ myObj”动画,输入参数t是系统时间,则返回值是[0,1]内任意给定t处的vector2 point 我应该将哪个值插入translateX?

是基于t返回的 point.y 吗?我应该忽略返回的 point.x 吗? 如果是这样,您能给我解释 point.x 值何时对动画有用以及我应该如何使用它吗?

谢谢!


编辑:

在帖子中 When exactly does an ease animation reach its midpoint?

批准的答案解释了x和y的含义。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。