<script>
// usually this import strategy should work:
//import {Motion} from "svelte-motion";
import Motion from 'svelte-motion/src/motion/MotionSSR.svelte';
import {useMotionValue, animate} from 'svelte-motion/dist/index.mjs';
const rotate = useMotionValue(0);
let animation = {};
let status = "turn"
const click = () => {
if (animation.stop) {
status = "turn"
animation.stop();
animation={}
} else {
status = "stop"
let updates;
let start = new Date().getTime();
const getDiffTime = _=>(new Date().getTime() - start)
animation = animate(rotate, rotate.get()+45, {
type: "spring",
duration:1.5,
delay:0.1,
stiffness: 2000,
onComplete: (v) => {console.log(`complete after, ${getDiffTime()} and ${updates} updates`);animation={};status="turn"},
onUpdate:_=>updates++,
onPlay:_=>console.log(`play after ${getDiffTime()} ms`)||(updates=0),
onStop:_=>console.log(`stoped after, ${getDiffTime()} and ${updates} updates`)
});
}
};
</script>
<style>
.background{
background:linear-gradient(250deg, rgb(50,50,255), rgb(150,150,250));;