在图像上使用拉斐尔动画

use raphael animations on images

本文关键字：动画 图像      更新时间：2023-09-26

以下情况:

我有一个拉斐尔。js圆圈，当我点击它弹出大。缓和效果使它看起来像一个魅力

circle = paper.circle(1000, 500, 25);
circle.click(function() {
       this.animate({ r: 500 }, 1000,'super_elastic'); });

我想在一个图像上使用这个。就像

<body>
  <img src="bla.jpg" id="image"/>
</body>
 <script>
   var image_1 = $('#image')
   image_1.click(function() {
       this.animate({ r: 500 }, 1000,'super_elastic'); });
 </script>

这可能吗?

我是新的拉斐尔，这意味着我真的不知道如果它只与画布工作!

谢谢你的帮助!

请参考此示例代码。第一幅画的是拉斐尔。下一个使用jQuery。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitieal//EN">
<html>
    <head>
        <title>Test Raphael</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type ="text/javascript" src="jquery.min.js" ></script>
        <script type ="text/javascript" src="raphael.js" ></script>
    </head>
    <body>
        <div id="raphael" style=""></div>
        <script>
            var paper = Raphael("raphael", 500, 500),
                image = paper.image('bla.jpg', 0, 0, 100, 100);
            image.click(function() {
                this.animate({width: 500, height: 500}, 1000);
            });
        </script>
        <div style="position:absolute; left:600px; top: 0px">
            <img src="bla.jpg" id="image" width="100" height="100"/>
        </div>
        <script>
            var image_1 = $('#image')
            image_1.click(function() {
                $(this).animate({
                    width: 500,
                    height: 500
                }, 1000, 'linear');
            });
        </script>
    </body>
</html>

如果没有使用

在画布上创建图像，我认为您无法使用raphael函数。
 Paper.image(src, x, y, w, h);

JQuery Fancybox怎么样?

对不起，如果我误解了你的需要。

相关文章：