[frontend/mfm] Implement spin fn node
This commit is contained in:
parent
0a9758f988
commit
cc156c9760
2 changed files with 66 additions and 1 deletions
|
@ -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;
|
||||
|
|
|
@ -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)
|
||||
{
|
||||
|
|
Loading…
Add table
Reference in a new issue