-
Notifications
You must be signed in to change notification settings - Fork 63
Description
According to BindingX Doc,
In particular, the
cubicBezierfunction is used to customize the Bessel curve, which is defined as follows:
- cubicBezier(t, begin, changeBy, duration, controlX1, controlY1, controlX2, controlY2)
- input parameter:
t: time of animation executionbegin: attribute starting valuechangeBy: attribute change value (end - start)duration: duration of animationcontrolX1: x coordinates of The first control pointcontrolY1: y coordinates of The first control pointcontrolX2: x coordinates of The second control pointcontrolY2: y coordinates of The second control point- return:
Void
the cubicBezier function's last 4 parameters are controlX1, controlY1, controlX2, controlY2.
In this animation implementation, we get the return value of formatBezier function, and join the result with ',' so that we pass it as the last 4 parameters for the cubicBezier function.
universal-api/packages/animation/src/index.js
Lines 85 to 88 in 2692aaf
| let bezier = formatBezier(prop.easing || easing); | |
| let expression = bezier && bezier.length === 4 ? | |
| `cubicBezier(t-${prop.delay},${start},${prop.end - start},${prop.duration},${bezier.join(',')})` | |
| : `${prop.easing || easing}(t-${prop.delay},${start},${prop.end - start},${prop.duration})`; |
However, the formatBezier function returns [m[1], m[4], m[3], m[4]] -- in my opinion, it means controlX1, controlY2, controlX2, controlY2.
universal-api/packages/animation/src/formatBezier.js
Lines 1 to 6 in 7424381
| export default function formatBezier(easing) { | |
| if (easing) { | |
| let m = easing.match(/cubicBezier\((.+),(.+),(.+),(.+)\)/); | |
| return m && [m[1], m[4], m[3], m[4]]; | |
| } | |
| } |
Should it return [m[1], m[2], m[3], m[4]] rather than [m[1], m[4], m[3], m[4]]?