2

私はベジェ曲線を持っていますが、ある時点で、最初の曲線をスムーズに「分岐」する2番目のベジェ曲線が必要です。交点 (ベジエ曲線に沿ったパーセンテージ) を計算すると共に、制御点 (タンジェントとウェイト) も必要です。交点は、次の JavaScript で計算されます。

getBezier = function getBez(percent,p1,cp1,cp2,p2) {
    function b1(t) { return t*t*t }
    function b2(t) { return 3*t*t*(1-t) }
    function b3(t) { return 3*t*(1-t)*(1-t) }
    function b4(t) { return (1-t)*(1-t)*(1-t) }
    var pos = {x:0,y:0};
    pos.x = p1.x*b1(percent) + cp1.x*b2(percent) + cp2.x*b3(percent) + p2.x*b4(percent);
    pos.y = p1.y*b1(percent) + cp1.y*b2(percent) + cp2.y*b3(percent) + p2.y*b4(percent);
    return pos;
}

(IE 以外のブラウザーでは、http: //www.iscriptdesign.com -> チュートリアル -> グループ & パスで動作を確認できます)。今必要なのは、分岐点のコントロールポイントまたは (タンジェントとウェイト) だけです (どこから始めればよいかわかりません。可能であれば、同じパラメーターからの関数として、誰かが何らかのコードまたは数式を指摘してくれることを願っています。上記の getBezier 関数と同様)。

4

2 に答える 2

1

それを見つけて実装しました。de-Casteljauアルゴリズムは、実装可能な最速のソリューションであることが判明しました。現在、 iScriptDesign (チュートリアル -> スピット ベジエ) の下にあります。

于 2010-11-08T09:19:28.820 に答える
0

使用例 (@drjerry の助けが必要だと思います)

私は css3 タイミング関数を持っています。これは ease-in-out: と呼ばれますcubic-bezier(.42,0,.58,1)。グラフィカルにこれは次のようになります: http://cubic-bezier.com/#.42,0,.58,1

このグラフの下半分と上半分だけの新しいタイミング関数を作成したいと思います。

したがって、下半分はease-in:cubic-bezier(.42,0,1,1)です。グラフィック: http://cubic-bezier.com/#.42,0,1,1

上半分はease-out:cubic-bezier(0,0,.58,1)です。グラフィック: http://cubic-bezier.com/#0,0,.58,1

だから今私を混乱させているのは、iScriptDesign のスクリプトによると、それらが異なっていると教えてくれることです。

iScriptDeisgn は、ease-in-outis (つまりease-in) の最初の半分が is:であると言いますcubic-bezier(.21, 0, .355, .25)。グラフィック: http://cubic-bezier.com/#.21,0,.35,.25

iScriptDeisgn は、ease-in-outis (つまりease-out) の末尾の半分が is:であると言いますcubic-bezier(.145, .25, .29, .5)。グラフィック: http://cubic-bezier.com/#.14,.25,.29,.5

ease-iniScriptDesign の分割関数によって返されるandが realおよび real とease-out異なるのはなぜですか? 理解できません。ease-inease-out

この例のコード。

//////////////////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);

したがってsplit50percent、次のように設定されています。

({
    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
    }]
})

と同じことeaseInOutSine

  • easeInOutSine:.44,.05,.55,.95
  • 本物
    • 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
于 2014-05-04T08:33:39.897 に答える