前端序列帧动画实现

2022-09-08 18:50:33 浏览数 (1)

原理

1.UI 提供精灵图/雪碧图(就是将序列帧排在一张图片上的图)

2.通过代码不断改变图片的位置,从而形成动画效果

代码实现

代码语言:javascript复制
  <style>
        .logo_gif {
            width: 300px; // 单个动画帧尺寸
            height: 300px;
            cursor: pointer;
            background-image: url(./sequence.png);
            background-size: 100%;
            background-position-y: 0;
            animation: mouse-in 1.5s;
            animation-timing-function:steps(26); // 动画帧数量
            animation-iteration-count:infinite  // 动画循环播放
        }
        @keyframes mouse-in{
            from{
                background-position-y: 0;
            }
            to{
                background-position-y: -7800px; // 根据 元素大小*动画帧数量得出
            }
        }
    </style>
</head>
<body>
    <div class="logo_gif" ></div>
</body>

注意点

animation-timing-function:steps();;里面的数字为动画帧数量也就是雪碧图里面的图片数量 background-position-y的值不能随便取,必须根据元素的大小乘以动画帧数量得出 如本例元素大小为300,虽然雪碧图的大小是 400 x 10400 我们不能写成

代码语言:javascript复制
   @keyframes mouse-in{
            from{
                background-position-y: 0;
            }
            to{
                background-position-y: -10400px; // 错误
            }
        }

而是 300 * 26 = 7800

代码语言:javascript复制
   @keyframes mouse-in{
            from{
                background-position-y: 0;
            }
            to{
                background-position-y: -7800px; // 正确
            }
        }

如果是 200的元素 则 background-position-y的值为 200 * 26 = 5200

0 人点赞