前端序列帧动画实现

切图仔

发布于 2022-09-08 18:50:33

1.1K0

发布于 2022-09-08 18:50:33

文章被收录于专栏：生如夏花绚烂生如夏花绚烂

原理

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

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

代码实现

  <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 我们不能写成

   @keyframes mouse-in{
            from{
                background-position-y: 0;
            }
            to{
                background-position-y: -10400px; // 错误
            }
        }

而是 300 * 26 = 7800

   @keyframes mouse-in{
            from{
                background-position-y: 0;
            }
            to{
                background-position-y: -7800px; // 正确
            }
        }

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-03-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

animation