Question

当沿着从红色方块到蓝色方块的直线移动时，应该对方形进行动画旋转。我无法让这个工作，因为你可以从移动的方块看到永远不会匹配固定的蓝色方块。

这个问题反复出现，因此我需要一个可重复使用的解决方案。那就是：不要只给出矩阵的具体数字，也要给出你得到这些数值的计算。

所以我需要根据以下变量进行matrix()转换：

x1,y1是直线移动路径的起始点（在75,75下面的示例中）;
x2,y2是直线移动路径的最后一点（在175,75下面的示例中）;
cx,cy是轮换中心（在下面的示例中为75,75）;
a作为旋转的角度（在下面的示例45deg中 - 我更愿意以弧度为单位给出值，但CSS似乎并不接受）;

使得对象围绕cx,cy按角度a旋转，而点x1,y1沿直线移动到x2,y2（注意x1,y1和cx,cy <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250px" height="150px" viewBox="0 0 250 150"> <style> *{stroke:black;stroke-width:1px;} @keyframes ani { 0% {fill:#f00;transform:translate(0, 0 );} /* illustrating that movement works without rotation. */ 25% {fill:#00f;transform: translate( 100px, 0 );} 50% {fill:#f00;transform:translate(0, 0 );} /* with rotation it ends up anywhere but where it is supposed to go. */ 75% {fill:#00f;transform: translate( 100px, 0 ) translate( 175px, 75px) rotate( 45deg ) translate( -175px, -75px );} 100% {fill:#f00;transform:translate(0, 0 );} } #p {animation: ani 4000ms ease-in-out 10ms infinite normal forwards;} </style> <defs> <path id="def" d="m0,0 l50,0 l0,50 l-50,0 l0,-50" /> </defs> <use xlink:href="#def" x="50" y="50" style="fill:#faa;" /> <use xlink:href="#def" x="150" y="50" style="fill:#aaf;" transform="rotate( 45 175 75 )" /> <use id="p" xlink:href="#def" x="50" y="50" /> </svg>在下面的示例中重合，并非总是如此，但示例应该很简单。）

请注意，我确实知道矩阵是如何工作的，包括如何组合变换。问题是我不知道这个特定问题需要哪些特定的转换。

＆＃13;

.two-pics {
  display: flex;
  justify-content: space-around;        /* 1 */
}
.pic {
  position: relative;
}
img:first-child {
  height: 30vw;                         /* 2 */
}
img:last-child {
  height: 25vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);     /* 3 */
}
@media (max-width: 600px) {
  .two-pics {
    flex-direction: column;
    align-items: center;
  }
}

＆＃13;

Answer 1

我相信你想要的矩阵基本上是这样的（感谢this page帮助我弄清楚）：

transform: matrix(cos(angle),sin(angle),-sin(angle),cos(angle),translateDiffX,translateDiffY);

我不认为你可以在CSS中设置三角函数值（除非是使用预处理器），所以我做了 this fiddle ，其中CSS被JavaScript覆盖（虽然以某种严厉的方式），并改变角度和翻译值进行测试，以确保它适用于其他情况。

请注意，如果{0}和100％处的transform-origin没有，则动画会产生一种弧效（尽管这可能是不可取的/不重要的）。

在翻译过程中计算旋转SVG动画的CSS变换矩阵

1 个答案: