关于#动画#的问题：怎么让这个图片自转,往红色箭头方向

img


这是一个底座上面是一个饼图,怎么让这个图片自转,往红色箭头方向旋转,

大概能想到两种方法，仅供参考
方法一：
使用webgl，把图片画到一个3D平面网格上，再去旋转网格
方法二：
让美术师多画几张旋转后的图，做成gif或者视频播放

最简单的方法就是让ui做个长图，前端通过事件处理图片位置就好了，类似于下面这种图，前端花精力去写这个东西没有意义

img




.frame img.dc_cy {
    animation: 40s linear 0s normal none infinite rotate;
    -webkit-animation: 40s linear 0s normal none infinite rotate;
}

@keyframes rotate{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}
@-webkit-keyframes rotate{
    from{-webkit-transform:rotate(0deg)}
    to{-webkit-transform:rotate(360deg)}
}

上面的人都说了CSS和SVG等的解决方法，
这边就不过多描述了，我这边就提一种其他的比较简单快速的解决方法

解决方法
1、生成一个gif图，这种很多工具都可以实现
2、直接用gif图篇来显示替换，
3、可以有两张图片放在同一个位置，一张会动的gif图，一张静止的原图，通过元素id来进行图片的替换。
一张显示则另一张隐藏，通过这种方式来达到控制图片静止和旋转的两种效果。

这样的话，
好处在于

  • 1、简单容易上手，节省时间
  • 2、想绘制什么样的动画就制作什么样的gif图，不用考虑复杂的css样式，没什么技术要求
    缺点可能在于 图片体积大小？

看你自己需求选择

如有问题及时沟通。

   @keyframes rotate-ani {
        0% {
            transform:  rotate(0deg);
        }
        100% {
            transform:  rotate(360deg);
        }
    }


.test {
    transform: rotateX(45deg);
    background-color: #fff;
    width: 100px;
}
    .inner-bg {
        width: 100px;
        height: 100px;
        background: #409eff;
        border-radius: 50%;
        animation: rotate-ani 0.8s linear infinite;
    }

```<div className="test">
                <div className="inner-bg">333</div>
            </div>

test用来变形，inner-bg用来放置背景图，带圆圈的那张，然后使用动画执行旋转

定格动画，感觉效果🤓🤓用PS的功能可以实现

img


需要平面图

img

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrap {
      transform: rotate3d(1, 0, 0, 76deg);
    }
    .rotate {
      animation: rotate 8s linear infinite;
    }
    @keyframes rotate {
      from {
        transform: rotateZ(0);
      }
      to {
        transform: rotateZ(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="wrap">
    <img class="rotate" src="./demo.png" alt="">
  </div>
</body>
</html>

方案一
1、生成一个gif图，这种很多工具都可以实现
2、直接用gif图篇来显示替换，
3、可以有两张图片放在同一个位置，一张会动的gif图，一张静止的原图，通过元素id来进行图片的替换。
一张显示则另一张隐藏，通过这种方式来达到控制图片静止和旋转的两种效果。
方案二
思路：可以使用animation先实现旋转动画，再使用rotate3d，调整x轴和y轴，最后调整Z轴

CSS使用rotate 可以实现旋转

不用那么麻烦，用视频剪辑软件，把图片做成流动的就行。

  1. 如其他回答所言，用视频剪辑软件，gif制作工具等，让UI去做一个动图，前端直接放上去即可；
  2. 多张不同角度的图片定时替换，和gif原理相同；
  3. 从前端代码角度实现，素材需要一个正面图。使用css的3d属性和动画属性。
  • 可参考菜鸟教程CSS3
  • 用一个div包一个img，给img设置动画属性，沿着Z轴（默认在中心位置）旋转。让div沿着X轴旋转（默认中线位置）呈现3d效果。
div{/*父级节点*/
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}
img{/*图片子节点*/
    animation: myFirst 5s;
    -webkit-animation: myFirst 5s; /* Safari 与 Chrome */
}
@keyframes myFirst
{
    0%   {transform: rotateZ(0deg);}
    50%  {transform: rotateZ(180deg);}
    100% {transform: rotateZ(360deg);}
}

@-webkit-keyframes myFirst /* Safari 与 Chrome */
{
    0%   {transform: rotateZ(0deg);}
    50%  {transform: rotateZ(180deg);}
    100% {transform: rotateZ(360deg);}
}
  • 到这儿功能就实现了，如果想持续旋转，修改animation即可。（别忘了兼容属性-webkit-animation）
animation: myFirst 5s infinite;

等价于

animation-name: myFirst;
animation-duration: 5s;
animation-iteration-count: infinite;/*次数，infinite表示无限*/
  • 用该方法会出现：两次旋转之间，会从360°一下子变成0°，有点三角函数常识的都知道它们是不一样的。但是实际视觉效果一样。
  • 可以给img设置旋转匀速。（别忘了兼容属性-webkit-animation-timing-function）
    animation-timing-function:linear
  • 另外，我这里旋转方向和你需求不一致，你可以把角度都改成负数即可