[frontend/mfm] Implement jelly fn node
This commit is contained in:
parent
d2964a2502
commit
3098e17a77
2 changed files with 54 additions and 1 deletions
|
@ -146,6 +146,42 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes fn-jelly {
|
||||
0% {
|
||||
transform: scaleZ(1)
|
||||
}
|
||||
30% {
|
||||
transform: scale3d(1.25, .75, 1)
|
||||
}
|
||||
40% {
|
||||
transform: scale3d(.75, 1.25, 1)
|
||||
}
|
||||
50% {
|
||||
transform: scale3d(1.15, .85, 1)
|
||||
}
|
||||
65% {
|
||||
transform: scale3d(.95, 1.05, 1)
|
||||
}
|
||||
75% {
|
||||
transform: scale3d(1.05, .95, 1)
|
||||
}
|
||||
to {
|
||||
transform: scaleZ(1)
|
||||
}
|
||||
}
|
||||
|
||||
::deep {
|
||||
.fn-jelly {
|
||||
display: inline-block;
|
||||
animation-delay: 0s;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
animation-name: fn-jelly;
|
||||
}
|
||||
}
|
||||
|
||||
::deep {
|
||||
.fn-rotate {
|
||||
display: inline-block;
|
||||
|
|
|
@ -260,7 +260,7 @@ public static partial class MfmRenderer
|
|||
"x3" => MfmFnX(node.Name, document),
|
||||
"x4" => MfmFnX(node.Name, document),
|
||||
"blur" => MfmFnBlur(document),
|
||||
"jelly" => throw new NotImplementedException($"{node.Name}"),
|
||||
"jelly" => MfmFnJelly(args, document),
|
||||
"tada" => throw new NotImplementedException($"{node.Name}"),
|
||||
"jump" => throw new NotImplementedException($"{node.Name}"),
|
||||
"bounce" => throw new NotImplementedException($"{node.Name}"),
|
||||
|
@ -331,6 +331,23 @@ public static partial class MfmRenderer
|
|||
return el;
|
||||
}
|
||||
|
||||
private static INode MfmFnJelly(Dictionary<string, string?> args, IDocument document)
|
||||
{
|
||||
var el = document.CreateElement("span");
|
||||
|
||||
el.ClassName = "fn-jelly";
|
||||
|
||||
var style = "";
|
||||
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}; " : "";
|
||||
|
||||
if (!string.IsNullOrWhiteSpace(style))
|
||||
el.SetAttribute("style", style.Trim());
|
||||
|
||||
return el;
|
||||
}
|
||||
|
||||
private static INode MfmFnRotate(Dictionary<string, string?> args, IDocument document)
|
||||
{
|
||||
var el = document.CreateElement("span");
|
||||
|
|
Loading…
Add table
Reference in a new issue