cubic-bezier mit canvas

  • Hey,


    ich habe ein Pfeil und möchte diesen gerne drehen.
    Die Funktion ist nicht das Problem, bisher funktioniert das, leider aber linear und das möchte ich nicht.
    Ich möchte das mein Pfeil sich so dreht wie die css transform Funktion "cubic-bezier" (Bsp: cubic-bezier(0,.2,.8,1)), erst schnell, dann immer langsamer.
    Ich benutze bisher folgenden Code:



    Info zu den Variablen:
    img.widht/height ist die Größe des Bildes.
    canW/canH ist die Canvas Größe.
    aim ist der Zielgrad (z.B. 1080 (4 Umdrehungen)).
    spinTime ist die bisherige Zeit seit dem sich der Pfeil dreht.
    maxTime beschreibt wie lange sich der Pfeil drehen soll.
    und rotate ist die aktuelle Gradzahl vom Pfeil.


    Ich habe mir mal folgendes angeschaut, da ich denke dass es das ist was ich suche: https://de.wikipedia.org/wiki/B%C3%A9zierkurve
    Habe sonst nichts anderes gefunden als diese eine Formel. :/
    Aber leider komme ich da nicht mehr weiter..., egal was ich mache irgendwas ist falsch. ^^
    Der Pfeil dreht sich am Anfang (recht langsam sogar :/) und dann dreht er sich einfach zurück....


    Hier meine ausgefüllte Formel (t = Zeit von 0 - 1):

    JavaScript
    (-0.1+3*0.2-3*0.8+1)*Math.pow(t,3) + (3*0.1 - 6 * 0.2 + 0.8)*Math.pow(t,2) + (-3*0.1 + 3*0.2)*t + 0.1

    Ich berechne hier auch noch nicht die Gradzahlen mit ein, also fehlt das auch schon mal. ^^
    Vielleicht findet ja jemand den Fehler oder weiß wie das ganze funktinoiert was ich vor habe.


    Danke im voraus :)