🗾 👨🏾‍🍳 👂🏾 لا يحتاج مصمم التخطيط إلى الرياضيات أو وظائف ومسارات الوقت للرسوم المتحركة ثنائية الأبعاد إطارًا بإطار على مواقع الويب 🆑 🖕🏾 😖

قالوا "مصمم التخطيط لا يحتاج إلى الرياضيات!" قالوا ، "سيكون هناك ما يكفي من العمليات الحسابية للصف الثاني من المدرسة!" "مصمم التخطيط ليس مبرمجًا ، لذلك لا داعي لأن تزعج نفسك بالعلوم الدقيقة!" - ما تسمعه للتو على الإنترنت حول الحاجة إلى معرفة معينة عند تطوير المواقع. وفي الحقيقة ، في معظم الحالات ، الشخص الذي يصنع الواجهات لديه حقًا القدرة على إضافة أرقام. نادرًا ما يكون هناك شيء أكثر تعقيدًا وعادة ما توجد بالفعل خوارزمية جاهزة في مكان ما في أعماق NPM. لكن المواقع هي مفهوم فضفاض ، وفي بعض الأحيان لا تزال بحاجة إلى قلب رأسك واكتشاف بعض المشكلات. وأحد هذه الأسئلة هو المسارات في الرسوم المتحركة ثنائية الأبعاد.

, JS, , , , , , - . , path SVG-, - , , , , . , JS. .

, , 2D . , – , , .

, , . HTML CSS . , X Y, – . – , . , , WebGL. , . .

, – . – - - . - – - . – . . . . .

, ? . . , . , , . , . . , , ? , , , , . , – , , , . – HTML-, - SVG-, - – .

I. y = f(x)

. , , , , , ... , – .

(x) => {
    return Math.sin(x);
}

- JS.

, X Y, Y X. X 0 10 (), Y -, -, -… - – , . requestAnimationFrame x, y, - . , , X, Y — .

— , , . - , , - . , , .

(x) => {
    return 2 * Math.sin(x);
}

(x) => {
    return 0.5 * Math.sin(5 * x);
}

(x ) - , X. — Y. .

, , :

(x) => {
    return Math.sin(x) + 1;
}

(x) => {
    return Math.sin(x + 1);
}

. x – X, – Y. , .

, .

. , , .

, ? !

(x) => {
    return Math.sin(x) + 0.2 * Math.sin(5 * x);
}

- :

- , , . , . .

. . . . :

(x) => {
    return 2 * Math.cos(3 * x) / Math.pow(x + 1, 2);
}

, bounce ( ). , , CSS-, - JS .

, , . . , .

, , , :

y = f(x) .
.
.

II.

- - , – - -, . , . , - (X, Y), () () . .

(X, Y) (R, φ) , :

const x = r * Math.cos(p);
const y = r * Math.sin(p);

p φ, unicode-.

, « 5 -, » « GPS- ».

, – , .

(p) => {
    return p / 5;
}

, ( ), . , , , . , , . , , , , . .

– . , Y X, , .

. ? . ? , - , , . . .

, , , .

(p) => {
    return Math.sin(5 * p);
}

(p) => {
    return 2 * Math.sin(5 * p + 1);
}

! , ?

. , .

, -. ( ) , – .

, , .

(p) => {
    return Math.sin(p) + 0.2 * Math.sin(2 * p);
}

(p) => {
    return 2 * Math.sin(p) + 0.2 * Math.sin(10 * p);
}

(p) => {
    return Math.sin(3 * p - Math.PI / 2) * Math.sin(4 * p);
}

! , .

(p) => {
    return (Math.sin(p) + Math.sin(p * 2) + 2) / 4;
}

(p) => {
    return (Math.sin(p) + Math.sin(p * 3) + 2) / 2;
}

(p) => {
    return Math.sin(p) + Math.sin(p * 4) + 2;
}

, , , , - . .

.
, , , .

III.

y = f(x). x - . :

x = f1(t)
y = f2(t)

. , , . , - - . x y. , – . .

. , , . – , – . .

, :

x = t
y = f(t)

, , :

x: (t) => {
    return t;
},
y: (t) => {
    return (t / 2) - 1;
}

- :

, .. t , x , .

, , :

, , ? - . . (X, Y) , , . , - :

x: (t) => {
    return 5 * t / (t + 1);
},
y: (t) => {
    return 2 * Math.abs(Math.cos(5 * t)) / (t*t + 1);
}

- :

, - . ? ?

, . , . , , - , - , . , , , . – . :

– , .

, . .

, , . :

x: (t) => {
    return t;
},
y: (() => {
    let y0 = 2;     //    Y
    let v0 = 0;     //  
    let localT = 0; //      
    let g = 10;     //   
    let k = 0.8;    //       

    return (t) => {
        let y = y0 + v0 * localT - g * localT * localT / 2;

        if (y <= 0) {
            y = 0;
            y0 = 0;
            v0 = (-v0 + g * localT) * k;
            localT = 0;
        }

        localT += 0.005;

        return y;
    };
})()

, .

– . , , . 1.62, . ? , . , – , . . , , , .

CodePen, - , , , « , », , , , , . !

, , .

, , . , , - . , – . , , . - , , .

. – .
« X Y». .
, , – .

IV.

, , . CSS. , – . .

, , , . .

. . . . . . , -- , .

. 4 , t ( — ) – . , . , , . CSS . SVG path. .

, , . – . – ( ). – S, . – , ...

, — X Y t:

x: (t) => {
    return ((1-t)*(1-t)*(1-t)*x0) + (3*(1-t)*(1-t)*t*x1) + (3*(1-t)*t*t*x2) + (t*t*t*x3);
},
y: (t) => {
    return ((1-t)*(1-t)*(1-t)*y0) + (3*(1-t)*(1-t)*t*y1) + (3*(1-t)*t*t*y2) + (t*t*t*y3);
}