[frontend/mfm] Implement spin fn node

This commit is contained in:
pancakes 2024-11-11 11:59:27 +10:00 committed by Laura Hausmann
parent 0a9758f988
commit cc156c9760
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
2 changed files with 66 additions and 1 deletions

View file

@ -241,6 +241,44 @@
}
}
@keyframes fn-spin {
0% {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
@keyframes fn-spin-x {
0% {
transform: perspective(128px) rotateX(0)
}
to {
transform: perspective(128px) rotateX(360deg)
}
}
@keyframes fn-spin-y {
0% {
transform: perspective(128px) rotateY(0)
}
to {
transform: perspective(128px) rotateY(360deg)
}
}
::deep {
.fn-spin {
display: inline-block;
animation-delay: 0s;
animation-duration: 1.5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
::deep {
.fn-rotate {
display: inline-block;

View file

@ -264,7 +264,7 @@ public static partial class MfmRenderer
"tada" => MfmFnAnimation(node.Name, args, document),
"jump" => MfmFnAnimation(node.Name, args, document),
"bounce" => MfmFnAnimation(node.Name, args, document),
"spin" => throw new NotImplementedException($"{node.Name}"),
"spin" => MfmFnSpin(args, document),
"shake" => throw new NotImplementedException($"{node.Name}"),
"twitch" => throw new NotImplementedException($"{node.Name}"),
"rainbow" => throw new NotImplementedException($"{node.Name}"),
@ -346,6 +346,33 @@ public static partial class MfmRenderer
return el;
}
private static INode MfmFnSpin(Dictionary<string, string?> args, IDocument document)
{
var el = document.CreateElement("span");
el.ClassName = "fn-spin";
var name = args.ContainsKey("y")
? "fn-spin-y-mfm"
: args.ContainsKey("x")
? "fn-spin-x-mfm"
: "fn-spin-mfm";
var direction = args.ContainsKey("alternate")
? "alternate"
: args.ContainsKey("left")
? "reverse"
: "normal";
var style = $"animation-name: {name}; animation-direction: {direction};";
style += args.TryGetValue("speed", out var speed) ? $" animation-duration: {speed};" : "";
style += args.TryGetValue("delay", out var delay) ? $" animation-delay: {delay};" : "";
style += args.TryGetValue("loop", out var loop) ? $" animation-iteration-count: {loop};" : "";
el.SetAttribute("style", style.Trim());
return el;
}
private static INode MfmFnRotate(Dictionary<string, string?> args, IDocument document)
{