]>
git.r.bdr.sh - rbdr/canvas/blob - src/lib/animations/blink.js
c12e031361361f2e764fb960c7878c4b775bfe59
1 import { sineInOut
} from 'svelte/easing';
3 export const blink
= function blink(node
, params
) {
4 const originalWidth
= parseFloat(getComputedStyle(node
).width
);
5 const originalHeight
= parseFloat(getComputedStyle(node
).height
);
8 delay: params
.delay
|| 0,
9 duration: params
.duration
|| 400,
10 easing: params
.easing
|| sineInOut
,
12 const halfWidth
= originalWidth
/ 2;
13 const halfHeight
= originalHeight
/ 2;
14 const width
= Math
.round(t
<= 0.2 ? (originalWidth
* t
) / 0.2 : originalWidth
);
15 const marginY
= Math
.round(t
<= 0.2 ? halfHeight
* (1 - t
/ 0.2) : 0);
16 const height
= Math
.round(t
> 0.2 ? ((t
- 0.2) / 0.8) * originalHeight : 0);
17 const marginX
= Math
.round(t
> 0.2 ? (1 - (t
- 0.2) / 0.8) * halfWidth : halfWidth
);
19 console
.log(width
, height
);
21 return `width: ${width}px; height: ${height}px;`;