Informacje o pakiecie.

"@svgdotjs/svg.js": "^3.0.16",
"svg.easing.js": "svgdotjs/svg.easing.js"

Problem

Czy ktoś może wyjaśnić, jak poprawnie animować rotacji z funkcją łagodzenia przy użyciu biblioteki SVG.JS V3?

Dokumentacja w https://svgjs.com/docs/3.0/animating/ daje nie Przykłady, a ja próbowałem wiele różnych sposobów na pracę, ale wszystkie próby skutkują domyślnym zachowaniem "& GT" (aka funkcja łatwościowa). Dokumentacja wtyczek nie jest również głączona ( https://svgjs.com/docs/3.0/plugins/ / A>) i nie zapewnia żadnego kierunku, jak wykorzystuje wtyczkę, takie jak biblioteka SVG.As.JS. Instalowanie tego pakietu też nie zmienia wyniku.

Moje próby

const mySvg = SVG(<svg>...</svg>)
const rotatable = mySvg.find('#rotatable');

rotatable.animate(3000, '<>').rotate(360);
rotatable.animate(3000, 'easeInOut').rotate(360);
rotatable.animate({ duration: 3000, ease: '<>').rotate(360);
rotatable.animate({ duration: 3000, ease: 'easeInOut').rotate(360);

// Defining an actual easing function for easeInOut
rotatable.animate({ duration: 3000, ease: function(pos) { return (-Math.cos(pos * Math.PI) / 2) + 0.5; }}).rotate(360);

// Providing the function as a string, since that's what `animate` seems to expect
rotatable.animate({ duration: 3000, ease: 'function(pos) { return (-Math.cos(pos * Math.PI) / 2) + 0.5; }'}).rotate(360);

Żadna z powyższych prac nie jest pożądana. Użyłem je na elemencie {{x 1}} i

Każda pomoc jest bardzo doceniana, ponieważ wykorzystanie tej biblioteki zdecydowanie była bardzo pomocna dla wszystkich innych aspektów!

0
gpsugy 5 grudzień 2019, 19:17

1 odpowiedź

Najlepsza odpowiedź

Mimo że dokumenty opóźniają się wyraźnym przykładem (przepraszam), możesz to znaleźć:

Łatwienia animacji można zmienić za pomocą metody łatwości ().

Więc możesz zadzwonić el.animate(...).ease('<>'), co powinno zrobić sztuczkę

1
Fuzzyma 5 grudzień 2019, 19:32