Question

看起来“破碎”了。转换右边元素的原点是不合适的。我试图让这个盒子“坚固”，但它分散了。

http://codepen.io/HappyHarlequin/pen/bZWQro

svg:hover #right{
    animation: open_right 1s linear infinite;
  animation-direction: alternate;
}
svg:hover #left{
  transform-origin: 0% 50%;
    animation: open_left 1s linear infinite;
  animation-direction: alternate;
}
@keyframes open_right{
  0% {

  }

  100% {
    transform-origin:100% 50%;
    transform: rotate(230deg) rotateX(-230deg)

  }

}

@keyframes open_left{
  0% {

  }

  100% {
   transform-origin: 0% 50%;
   transform: rotate(-230deg) rotateX(230deg)

  }

}

Answer 1

try { ApplicationInfo ai = getPackageManager().getApplicationInfo(item.packageName, 0); if ((ai.flags & ApplicationInfo.FLAG_SYSTEM ) != 0) { if((ai.flags & ApplicationInfo.FLAG_UPDATED_SYSTEM_APP ) == 0) { appItem.setSystemApp(true); Mylog.v("System Apps " + appItem.getAppName()); } } } catch (PackageManager.NameNotFoundException e) { e.printStackTrace(); }是3D旋转，您无法对SVG内的元素进行3D变换。您只能对它们应用二维变换（仅在X和Y中旋转，缩放，平移等）

即使您可以进行3D变换，您也会尝试将3D变换应用于绘制为看起来像3D的二维形状。所以它无论如何都行不通。

可能的方法

你可以：

坚持使用2D并使用关键帧动画为您的盒盖动画设置动画。在打开襟翼时绘制一系列关键帧。然后在这些形状之间进行步骤或变形。
将您的襟翼更改为HTML元素，例如rotateX()。然后对它们进行定位，使它们与您的假3D盒子对齐，并具有适当的透视量。然后，您可以对这些旋转应用3D旋转。
切换到正确的3D框并为其设置动画。有各种JS库可以帮助您，例如three.js。

我如何创建svg框打开动画？

1 个答案: