Question

我有动画（type TMyStringGrid = class(TCustomControl) private FGroupBox: TGroupBox; FStringGrid: TStringGrid; public constructor Create(AOwner: TComponent); override; end; constructor TMyStringGrid.Create(AOwner: TComponent); begin inherited Create(AOwner); FGroupBox := TGroupBox.Create(Self); FGroupBox.Parent := Self; FStringGrid := TStringGrid.Create(Self); FStringGrid.Parent := FGroupBox; end;，#svg_tag）。动画完成后，然后淡入图像（.st0）。我希望在页面完全加载（动画和图像）之后开始播放动画。

.logo_svg

Answer 1

感谢您上传HTML。

如果我错了，请纠正我，但我认为你想要在页面加载时为徽标设置动画，以绘制自己。然后你想要制作另一个标志，然后逐渐消失。

如果标识相同 - 那么您可以使用一个动画为第一个SVG徽标本身设置动画。不需要两个：）

Here's a little codepen就是这样做的。

这是必不可少的动画：

svg{
    max-width: 80%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.st0 {
  fill-opacity: 0;
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 1350;
  stroke-dashoffset: 1350;
  animation: draw 5s linear forwards;
}
@keyframes draw {
  95% {
    stroke-dashoffset: 0;
        fill-opacity:0;
        stroke-width:1;
  }
    100%{
        fill-opacity:1;
        stroke-width:0;
    }
}

这会解决您的问题吗？

如何在页面完全加载后开始播放动画？

1 个答案: