Question

我想使用3D的SVG技术创建动画。不幸的是，我只找到2D动画教程。我尝试使用atribute创建3D SVG动画，但对于transform =“ rotate3d”，“ translate3d”，“ translateX”等无效。

我的代码如下：

  <animateTransform attributeName="transform"
                    id="v1anim1" attributeType="XML"
                    type="rotate3d"
                    from="1, 1, 1, 0deg"
                    to="1, 1, 1, 90deg"
                    dur="2.5"
                    />

  <animateTransform attributeName="transform" 
                    id="v1anim2" attributeType="XML"
                    type="rotate3d"
                    from = " 60 70 50 90deg"
                    to = " 60 70 50 180deg"     
                    type="translate3d"
                    from="25 5 50"
                    to="10 5 80"


                    begin="v1anim1.end"
                    dur="4s"
                    />

有人知道关于SVG，HTML5，CSS中3D动画的任何很好的教程吗？还是可以看到错误，是否知道提示或其他帮助方法？

Answer 1

看看可能发生的事情。 prefixfree的创建者Lea Verou在此处发布了示例：http://leaverou.github.io/animatable/。我能够使用rotate3d对内联SVG进行动画处理。 Lea在示例中使用javascript将CSS代码推送到CSS文件，因此对于像我这样的新手来说有点混乱。

浏览器兼容性是一个问题，因此prefixfree将有所帮助。我还有其他问题，例如使背景图片同时工作，并且无法在多路径SVG中为一个路径设置动画，但是我是一个完整的新手。

以下代码可在我的Chrome浏览器中使用。您必须在SVG上按住鼠标才能获得正确的动画。

HTML

</head>
<body>
        <svg id="butt" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 120 120"><rect width="150" height="150" ry="0"/></svg>   
</body>
</html>

seat.css：

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@keyframes transform {
    from {transform:perspective(800px) rotate3d(1,0,0,-95deg)}
    to {transform:perspective(800px) rotate3d(1,0,0, 0deg)}
}

#butt:active {
    animation: transform .8s steps(100) backwards;
    transform-origin: 0% 90%;
}

Codepen有一些很棒的SVG动画。

HTML％动画SVG（使用AnimateTransform）

1 个答案: