如何使用 html css 和 jquery 为蒙版或剪辑下的图像设置动画？答案

【问题标题】：How to animate an image under a mask or a clip using html css and jquery?如何使用 html css 和 jquery 为蒙版或剪辑下的图像设置动画？
【发布时间】：2014-04-28 11:34:31
【问题描述】：

我正在尝试为蒙版下图像的移动设置动画，该蒙版保持不动我有两种方法：一种使用 mask 属性，第二种使用 th 剪辑

第一种使用 Mask 的方法：

在http://jsfiddle.net/2Aecz/ 或以下查看工作脚本

<html>
<head>
<style>
  #myimage {
      clip-path: url(#mask1);
      position: absolute;

   }
</style>
</head>

<body>

<img id="myimage" src="http://lorempixel.com/100/100" >
<svg width="0" height="0">
  <defs>
    <clipPath id="mask1">
      <circle cx="50" cy="50" r="50" />
    </clipPath>
  </defs>
</svg>


<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$( document ).ready(function() {
    $( "#myimage" ).click(function() {
     $( "#myimage" ).animate({ "left": "+=5px" }, "slow" );
   var left = $('path, polygon, circle').attr('cx');
    $('path, polygon, circle').attr('cx', left-5);
    });
});
</script>

</body>

第二次使用剪辑

在http://jsfiddle.net/XdtNy/ 或以下查看工作脚本

<html>
<head>
<style>
#myimage {
  mask: url("#mask2");
  position: absolute;
}


</style>


</head>

<body>
<img id="myimage" src="http://lorempixel.com/100/100" >
<svg width="0" height="0">
<defs>
  <mask id="mask2" >
    <circle cx="50" cy="50" r="40" style="fill: #ffffff"/>
  </mask>
</defs>
</svg>


<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$( document ).ready(function() {
$( "#myimage" ).click(function() {
        $( "#myimage" ).animate({ "left": "+=5px" }, "slow" );
        var left = $('path, polygon, circle').attr('cx');
        $('path, polygon, circle').attr('cx', left-5);
    });
});
</script>

</body>

我的问题：

如何将图像和蒙版（反向）一起移动并流动？或者有没有其他方法可以制作动画？

【问题讨论】：

标签： jquery html css animation html5-canvas

【解决方案1】：

目前这种屏蔽方法似乎在许多浏览器中不受支持，这在生产代码中可能没有用。

话虽如此，我会将图像应用到块对象的背景上，然后为背景设置动画。这样，对象就保持在原地，但移动只应用于背景的偏移量。

示例： http://jsfiddle.net/R5FQY/

HTML：

<div id="myimage2"> </div>
<svg width="0" height="0">
  <defs>
    <clipPath id="mask">
      <circle cx="50" cy="50" r="50" />
    </clipPath>
  </defs>
</svg>

CSS：

#myimage2 {
  background:transparent url('http://lorempixel.com/100/100');
  width:100px;
  height:100px;
  clip-path: url(#mask);
}

Javascript：

$( document ).ready(function() {
  $( "#myimage2" ).click(function() {
    $(this).animate({ 'backgroundPosition': "+=5px" }, "slow" );
  });
});

【讨论】：