unity路径途径有几个关键帧

Posted 2023-04-25

参考技术A Unity中的关键帧可以有多个路径点。一个关键帧可以包含具有不同动画属性值的多个路径点，每个路径点代表动画属性在给定时刻（关键帧时间）的值。

例如，如果您想要为3D模型创建动画，您可以在一个关键帧上设置模型的位置、旋转和缩放值。对于位置属性，您可以定义多个路径点来指定动画物体在不同时刻的位置。这些路径点在关键帧上显示为小圆点，并且您可以使用工具栏上的控件来编辑它们。

因此，在Unity中，一个关键帧可以有多个路径点，具体取决于您需要设置的动画属性的数量。

关键帧中的背景图像在 Firefox 或 Internet Explorer 中不显示

【中文标题】关键帧中的背景图像在 Firefox 或 Internet Explorer 中不显示

【英文标题】：Background-image in keyframe does not display in Firefox or Internet Explorer

【发布时间】：2016-06-29 21:41:05

【问题描述】：

我的网站上有几个动画，我刚刚意识到它们甚至没有出现在 Firefox 或 Internet Explorer 中。我在关键帧中有background-image。我这样做是因为我在动画中有不同百分比的不同图像。

为什么background-image 不显示在 Firefox 和 Internet Explorer 的关键帧中，有没有办法让它工作？

【参考方案1】：

根据specs，background-image 不是可动画的或可转换的属性。但它似乎没有说明当它用作过渡或动画的一部分时应该如何处理或如何处理。因此，每个浏览器似乎处理它的方式不同。当 Chrome (Webkit) 显示背景图片时，Firefox 和 IE 似乎什么都不做。

an article at oli.jp 中的以下引用提供了一些有趣的信息：

虽然 CSS 背景和边框模块 Level 3 Editor's Draft 在撰写本文时对背景图像说“可动画：否”，但在 Chrome 19 Canary 中出现了对 CSS 中交叉淡入淡出图像的支持。在得到广泛支持之前，这可以通过图像精灵和背景位置或不透明度来伪造。要为渐变设置动画，它们必须是相同的类型。

从表面上看，Firefox 和 IE 似乎可以正确处理它，而 Chrome 则没有。但是，事情并非如此简单。 Firefox 在处理背景图像而不是动画的过渡方面似乎自相矛盾。在转换background-image 时，它会立即显示第二张图像（hover 在 sn-p 中的第一张div），而在动画时，第二张图像根本不会显示（hover 第二张@987654330 @ 在 sn-p)。

因此，结论是 最好不要设置 background-image 在关键帧内。相反，我们必须使用background-position 或opacity，就像指定的@oli.jp 一样。

div 
  background-image: url(https://placehold.it/100x100);
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid;

div:nth-of-type(1) 
  transition: background-image 1s ease;

div:nth-of-type(1):hover 
  background-image: url(https://placehold.it/100/123456/ffffff);

div:nth-of-type(2):hover 
  animation: show-img 1s ease forwards;

@keyframes show-img 
  to 
    background-image: url(https://placehold.it/100/123456/ffffff);
  

<div></div>
<div></div>

---

如果您有多个图像应该在关键帧内以不同的百分比显示，那么最好在开始时将所有这些图像添加到元素上并像下面的 sn-p 那样为它们的位置设置动画。这在 Firefox、Chrome 和 IE 中的工作方式相同。

div 
  background-image: url(https://placehold.it/100x100), url(https://placehold.it/100/123456/ffffff);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0px 0px, 100px 0px;
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid;

div:hover 
  animation: show-img 1s steps(1) forwards;

@keyframes show-img 
  to 
    background-position: -100px 0px, 0px 0px;
  

<div></div>

或者，就像下面的sn-p。基本上每个图像与容器大小相同，因为background-size 设置为100% 100%，但在任何给定时间只显示一个图像，因为它们与容器大小相同。在0% 到50% 之间显示第一张图片，因为它位于0px,0px（左上角），而第二张图片位于100px,0px（右边框外）。在50.1%，第一张图片在-100px,0px（左边框外），第二张图片在0px,0px，因此可见。

div 
  background-image: url(https://picsum.photos/id/0/367/267), url(https://picsum.photos/id/1/367/267);
  background-size: 100% 100%; /* each image will be 100px x 100px */
  background-repeat: no-repeat;
  background-position: 0px 0px, 100px 0px;
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid;
  animation: show-img 5s ease forwards;

@keyframes show-img 
  0%, 50%
    background-position: 0px 0px, 100px 0px; /* initially 1st image will be shown as it it as 0px 0px */
  
  50.1%, 100% 
    background-position: -100px 0px, 0px 0px; /* at 50.1% 2nd image will be shown as it it as 0px 0px */
  

<div></div>

【讨论】：

感谢您对此进行澄清！我对如何使多图像场景工作感到有些困惑，因为我真的看不到您的 sn-p 中有任何变化。假设我有两张不同的图片，一张来自0%, 50%，另一张来自50.1%, 100%...我将如何更改图片？

@Becky：我在 sn-p 中添加了一个不同的示例（请参阅最后一个 sn-p）。原来的那个只会在悬停时改变图像，所以也许这就是你不清楚的原因:)

是的，它帮了很多忙！感谢您一直以来对我的帮助。

@Becky：关键帧中有几个不必要的background-image: none。 Here 是固定的小提琴。

@Becky：您应该使用图像的实际宽度进行位置计算。我使用了 100 像素，因为那是我的图像宽度。 Here 是一个增加了宽度的样本。酌情调整。