Javascript Raphael js |如何使用两幅图像制作动画

我正在为我的网站制作一个图像滚动条，我有两张图片。 我希望用户点击下一步按钮，图像在250毫秒内旋转180度，更改图片，然后在250毫秒内再次旋转180度。 有没有办法做到这一点

back.node.onclick=function(){


kitaimage1.animate({
transform : "r180",
kitaimage1.hide();
testimg1.show();
testimg1.animate({ transform : "r180"   });

},250);

}

这是我目前所拥有的，但它不起作用。

---

提前谢谢你，诺姆·哈伯这是绝对可能的，尽管你可以用很多方法来构建它。以下是许多可能的解决方案之一。我假设始终存在一个名为

paper

的拉斐尔纸张对象

位置和尺寸

            var cx = 180, cy = 125; /* These are the coordinates of the center point of your image(s) inside the paper */
            var dx = 320, dy = 240; /* dx and dy describe the dimensions of the desired image interface. */

图像信息

我假设您希望通过ajax动态加载此信息（取决于您的库的结构），或者能够重用它。此示例使用一个对象数组来描述列表中每个项目的

url

、

width

和

height

。例如

            var imageList =
            [
                {
                    url: '/tests/images/sunset1.jpg',
                    width: 1600,
                    height: 900,
                },
                {
                    url: '/tests/images/moonrise1.jpg',
                    width: 1024,
                    height: 768,
                },
                {
                    url: '/tests/images/cityscape.jpg',
                    width: 1920,
                    height: 1080,
                },
                {
                    url: '/tests/images/forest03.jpg',
                    width: 500,
                    height: 325,
                },
            ];

代码

最后但并非最不重要的一点是，在DOM准备就绪时（或在图像加载后，或任何其他事件触发后）运行此代码。这只是创建了一个函数来进行转换，然后调用它来获得第一个图像

            var imageIndex = 0;
            var rotationMultiplier = 1;
            var currentImage = null;

            function rotateTransitionNext()
            {
                rotationMultiplier *= -1;
                imageIndex++;
                if ( imageIndex >= imageList.length )
                    imageIndex = 0;

                if ( currentImage )
                {
                    currentImage.animate( { transform: ["...r", 180 * rotationMultiplier, cx, cy], opacity: 0.0 }, 1000, '<>', function()
                        {
                            this.remove();
                        } );
                }
                var newImage = paper.image( imageList[imageIndex].url, cx - dx / 2, cy - dy / 2, dx, dy )
                                    .attr( { transform: [ "r", -180 * rotationMultiplier, cx, cy], opacity: 0.0 } )
                                    .animate( { transform: [ "...r", 180 * rotationMultiplier, cx, cy ], opacity: 1.0 }, 1000, '<>', function()
                                        {
                                            currentImage = this;
                                            this.click( rotateTransitionNext );
                                        } );
            }

            rotateTransitionNext();

var-imageIndex=0；
变量旋转乘数=1；
var currentImage=null；
函数rotateTransitionNext（）
{
旋转倍增器*=-1；
imageIndex++；
如果（imageIndex>=imageList.length）
imageIndex=0；
如果（当前图像）
{
动画（{transform:[“…r”，180*旋转倍增器，cx，cy]，不透明度：0.0}，1000'，，函数（）
{
这个。删除（）；
} );
}
var newImage=paper.image（imageList[imageIndex].url，cx-dx/2，cy-dy/2，dx，dy）
.attr（{transform:[“r”，-180*旋转倍增器，cx，cy]，不透明度：0.0}）
.animate（{transform:[“…r”，180*旋转倍增器，cx，cy]，不透明度：1.0}，1000'，，函数（）
{
currentImage=这个；
单击（旋转转换下一步）；
} );
}
rotateTransitionNext（）；

零头 作为一个粗略的起点，应该做一些事情来总结：

看在上帝的份上，把这些东西封装在它自己的名称空间中，以避免全局范围被碎屑弄乱（我的错）

保留不同图像的纵横比。现在，所有图像都必须符合全局定义的尺寸（dx和dy）

快乐编码

更新：是此代码在工作中的一个分阶段示例。只需单击图像，使其旋转到下一个