natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add delay & start adding cubic-bezier to mfm

This commit is contained in:
Freeplay 2023-06-02 14:44:41 -04:00
parent caa6408e03
commit 1efb167f8f
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/client/src/components/mfm.ts
View File

@ -57,6 +57,10 @@ export default defineComponent({
if (t == null) return null;
return t.match(/^[0-9.]+s$/) ? t : null;
};
const validEase = (e: string | null | undefined) => {
if (e == null) return null;
return e.match(/\(-?[0-9.]+,-?[0-9.]+,-?[0-9.]+,-?[0-9.]+\)/) ? e : null;
}
const genEl = (ast: mfm.MfmNode[]) =>
concat(
@ -102,22 +106,27 @@ export default defineComponent({
switch (token.props.name) {
case "tada": {
const speed = validTime(token.props.args.speed) || "1s";
style = `font-size: 150%; animation: tada ${speed} linear infinite both;`;
const delay = validTime(token.props.args.delay) || "0s";
const ease = validEase(token.props.args.ease) ?? "(0,0,1,1)";
style = `font-size: 150%; animation: tada ${speed} ${delay} cubic-bezier${ease} infinite both;`;
break;
}
case "jelly": {
const speed = validTime(token.props.args.speed) || "1s";
style = `animation: mfm-rubberBand ${speed} linear infinite both;`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-rubberBand ${speed} ${delay} linear infinite both;`;
break;
}
case "twitch": {
const speed = validTime(token.props.args.speed) || "0.5s";
style = `animation: mfm-twitch ${speed} ease infinite;`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-twitch ${speed} ${delay} ease infinite;`;
break;
}
case "shake": {
const speed = validTime(token.props.args.speed) || "0.5s";
style = `animation: mfm-shake ${speed} ease infinite;`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-shake ${speed} ${delay} ease infinite;`;
break;
}
case "spin": {
@ -132,22 +141,26 @@ export default defineComponent({
? "mfm-spinY"
: "mfm-spin";
const speed = validTime(token.props.args.speed) || "1.5s";
style = `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: ${anime} ${speed} ${delay} linear infinite; animation-direction: ${direction};`;
break;
}
case "jump": {
const speed = validTime(token.props.args.speed) || "0.75s";
style = `animation: mfm-jump ${speed} linear infinite;`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-jump ${speed} ${delay} linear infinite;`;
break;
}
case "bounce": {
const speed = validTime(token.props.args.speed) || "0.75s";
style = `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-bounce ${speed} ${delay} linear infinite; transform-origin: center bottom;`;
break;
}
case "rainbow": {
const speed = validTime(token.props.args.speed) || "1s";
style = `animation: mfm-rainbow ${speed} linear infinite;`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-rainbow ${speed} ${delay} linear infinite;`;
break;
}
case "sparkle": {
@ -161,7 +174,8 @@ export default defineComponent({
? "alternate-reverse"
: "alternate";
const speed = validTime(token.props.args.speed) || "1.5s";
style = `animation: mfm-fade ${speed} linear infinite; animation-direction: ${direction};`;
const delay = validTime(token.props.args.delay) || "0s";
style = `animation: mfm-fade ${speed} ${delay} linear infinite; animation-direction: ${direction};`;
break;
}
case "flip": {