how to calculate control points on a bezier curve?

断了今生、忘了曾经 提交于 2019-12-06 09:56:47
dr jerry

Found and implemented it: de-Casteljau algorithm turned out to be the fastest implementable solution. It is currently present under: iScriptDesign (Tutorial ->Spit Bezier).

Example usage (I think, i need help from @drjerry)

I have a css3 timing function, this is called ease-in-out: cubic-bezier(.42,0,.58,1). Graphically this looks like: http://cubic-bezier.com/#.42,0,.58,1

I want to make a new timing function that is just the bottom half and then top half of this graph.

So the bottom half is ease-in: cubic-bezier(.42,0,1,1). Graphically: http://cubic-bezier.com/#.42,0,1,1

And the top half is ease-out: cubic-bezier(0,0,.58,1). Graphically: http://cubic-bezier.com/#0,0,.58,1

So now what confuses me is that according to the script at iScriptDesign it tells me they are different.

iScriptDeisgn says the starting half of ease-in-out is (which is ease-in) is: cubic-bezier(.21, 0, .355, .25). Graphically: http://cubic-bezier.com/#.21,0,.35,.25

iScriptDeisgn says the ending half of ease-in-out is (which is ease-out) is: cubic-bezier(.145, .25, .29, .5). Graphically: http://cubic-bezier.com/#.14,.25,.29,.5

Why is the ease-in and ease-out returned by the iScriptDesign split function different from the real ease-in and real ease-out? I don't get it.

Code for this example.

//////////////////START FROM ISCRIPTDESIGN
var splitBezier = function(array, perc) {
    array.unshift({x:0, y:0});
    var coll = [];
    while (array.length > 0) {
    for (var i = 0;i < array.length-1; i++) {
        coll.unshift(array[i]);
        array[i] = interpolate(array[i], array[i+1], perc);
    }
    coll.unshift(array.pop());
    }
    return {b1: [{x:coll[5].x, y:coll[5].y}, {x:coll[2].x, y:coll[2].y},{x:coll[0].x, y:coll[0].y}]
        , b2: [{x:coll[1].x - coll[0].x,y:coll[1].y-coll[0].y}, {x:coll[3].x - coll[0].x,y:coll[3].y-coll[0].y}, {x:coll[6].x - coll[0].x,y:coll[6].y-coll[0].y}]};
}

var interpolate = function (p0, p1, percent) {
    if (typeof percent === 'undefined') percent = 0.5;  
    return  {x: p0.x + (p1.x - p0.x) * percent
         , y: p0.y + (p1.y - p0.y) * percent};
}
//////////////////END FROM ISCRIPTDESIGN
var coord = function (x,y) {
  if(!x) var x=0;
  if(!y) var y=0;
  return {x: x, y: y};
}
var easeInOut = [new coord(.42,0), new coord(.58,1), new coord(1,1)];
var split50percent = splitBezier(easeInOut.slice(), .5);

So split50percent is set to:

({
    b1: [{
        x: 0.21,
        y: 0
    }, {
        x: 0.355,
        y: 0.25
    }, {
        x: 0.5,
        y: 0.5
    }],
    b2: [{
        x: 0.14500000000000002,
        y: 0.25
    }, {
        x: 0.29000000000000004,
        y: 0.5
    }, {
        x: 0.5,
        y: 0.5
    }]
})

Same thing with easeInOutSine

  • easeInOutSine:.44,.05,.55,.95
  • REAL
    • easeInSine:0.47, 0, 0.745, 0.715
    • easeOutSine:0.39, 0.575, 0.565, 1
  • iScriptDesign
    • easeInSine:.22,.03,.36,.26
    • easeOutSine:.14,.24,.28,.48
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!