jQuery实现图像旋转动画效果

下面是“jQuery实现图像旋转动画效果”的完整攻略：

1. 引入jQuery库

首先需要在html文件中引入jQuery库，可以通过以下方式进行引入：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. 编写HTML代码

在HTML文件中，需要添加一个包含图片的元素，例如：

<div id="rotate-img">
  <img src="example.jpg" alt="example">
</div>

3. 编写CSS样式

编写CSS样式，将图片进行旋转并设置动画时长和动画函数，例如：

#rotate-img {
  display: inline-block;
}

#rotate-img img {
  animation: spin 3s linear infinite;
}

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

4. 编写jQuery代码

最后，在jQuery代码中获取需要进行旋转动画的图片元素，并设置旋转中心、旋转角度及缩放比例，例如：

$(document).ready(function() {
  var rotateImg = $("#rotate-img img");
  var imgWidth = rotateImg.width();
  var imgHeight = rotateImg.height();
  var centerX = imgWidth / 2;
  var centerY = imgHeight / 2;
  var rotateDeg = 0;

  setInterval(function() {
    rotateDeg += 5;
    rotateImg.css({
      "transform": "translate(-50%, -50%) rotate(" + rotateDeg + "deg) scale(1.2)",
      "transform-origin": centerX + "px " + centerY + "px"
    });
  }, 50);
});

以上代码中，首先获取需要进行旋转动画的图片元素rotateImg，并获取图片的宽度和高度。然后计算旋转中心的坐标centerX和centerY，并初始化旋转角度rotateDeg为0。接着，使用setInterval函数定时更新旋转角度rotateDeg，每次更新旋转角度rotateDeg时，通过设置CSS属性transform来实现对图片的旋转、缩放和变换中心点等操作。

示例说明

示例一

在示例一中，假设需要实现一个将图片无限旋转的动画效果。

首先，在HTML文件中添加一张图片：

<div id="rotate-img">
  <img src="example.jpg" alt="example">
</div>

然后，在CSS样式中添加以下代码：

#rotate-img {
  display: inline-block;
}

#rotate-img img {
  animation: spin 3s linear infinite;
}

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

最后，在jQuery代码中添加以下代码：

$(document).ready(function() {
  var rotateImg = $("#rotate-img img");

  // ...
});

这样，在浏览器中打开页面，就可以看到图片不停地旋转了。

示例二

在示例二中，假设需要实现一个带有旋转中心和缩放效果的动画。

首先，在HTML文件中添加一张图片：

<div id="rotate-img">
  <img src="example.jpg" alt="example">
</div>

然后，在CSS样式中添加以下代码：

#rotate-img {
  display: inline-block;
}

#rotate-img img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  transform-origin: center center;
}

最后，在jQuery代码中添加以下代码：

$(document).ready(function() {
  var rotateImg = $("#rotate-img img");
  var imgWidth = rotateImg.width();
  var imgHeight = rotateImg.height();
  var centerX = imgWidth / 2;
  var centerY = imgHeight / 2;
  var rotateDeg = 0;

  setInterval(function() {
    rotateDeg += 5;
    rotateImg.css({
      "transform": "translate(-50%, -50%) rotate(" + rotateDeg + "deg) scale(1.2)",
      "transform-origin": centerX + "px " + centerY + "px"
    });
  }, 50);
});

这样，在浏览器中打开页面，就可以看到图片围绕中心点不停地旋转，并且每次旋转时缩放比例会随之变化。