Question

我正在尝试找到一种方法来为已应用遮罩的图像设置动画，而不会影响遮罩本身。

这是我发现应用蒙版的最好的跨浏览器方式，但是我不确定如何将CSS动画应用于它，这样我可以让中心图像在蒙版内旋转，而不是两者同时进行。

例如，我当前的代码只是旋转整个图像并屏蔽在一起 HTML 的

<div class="svgMask">
    <svg width="726" height="726" baseProfile="full" version="1.2">
        <defs>
            <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
                <image width="100%" height="100%" xlink:href="http://www.mikerezl.com/img/testmask.png"/>
            </mask>
        </defs>
        <image id="interior" mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="http://www.mikerezl.com/img/valknut.jpg"/>
    </svg>
</div>

CSS

#interior {
 -webkit-animation-name: rotate;
 -webkit-animation-duration:2s;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-timing-function:linear;
 -moz-animation-name: rotate;
 -moz-animation-duration:2s;
 -moz-animation-iteration-count:infinite;
 -moz-animation-timing-function:linear;
}

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {  -webkit-transform:rotate(360deg);}
}

@-moz-keyframes rotate {
  from {-moz-transform:rotate(0deg);}
  to {  -moz-transform:rotate(360deg);}
}

Fiddle link

Answer 1

您需要像这样设置原点（http://jsfiddle.net/icodeforlove/f5RE4/1/）

-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;

但对我来说，性能非常糟糕，而且Firefox无法运行。我建议使用画布来合成你的图像和动画。

context.save();
context.drawImage(valknut, 0, 0);
context.globalCompositeOperation = 'destination-in';
context.drawImage(mask, 0, 0);
context.restore();

使用画布你可以获得很多控制权！下面是一个如何用画布（http://jsfiddle.net/f5RE4/）

实现这一目标的例子

动画图像独立于面具？

1 个答案: