Question

我为我的网站制作了一个图像滚动条，我有两张图片。我希望用户点击下一个按钮，图像在250毫秒的过程中旋转180度，更改图片，并在250毫秒的过程中再次旋转180度。会有办法做到吗？

back.node.onclick=function(){


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

},250);

}

是我到目前为止所做的，但它不起作用。诺贝尔哈伯提前感谢

Answer 1

这绝对是可能的，尽管有很多方法可以构建它。这是许多可能的解决方案之一。我假设存在一个名为paper的Raphael纸质对象。

位置和维度

            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();

松散结束 作为一个粗略的起点，有一些事情要做，以包装它：

为了善良，请将这些内容包装在自己的名称空间中，以避免使用碎屑（我的坏）混淆全局范围
保留不同图像的宽高比。现在，所有图像都被迫符合全局定义的尺寸（dx和dy）

快乐的编码。

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

Raphael js |如何用两个图像动画

1 个答案: