「走马灯」动画效果实战

变态的小水瓶
3,619 阅读2分钟

在上一篇文章中我总结了实现动画的几种常见方式，接下来，我来分享一个如下图动画效果的实战，如果你没有看过上篇文章，希望能阅读收藏支持一下下～ 😄  

前端有几种实现动画的方式？ juejin.cn/post/704037…

                                               

需求分析

我们先来弄清楚我们要实现的是怎样的动画效果，是走马灯吗？是弹幕吗？看着像瀑布流？我们暂且叫"走马灯"吧，接下来拆解一下要点：

  • 两行词条，词条内容错落有秩，词条间距一致；
  • 两行词条同时滚动；
  • 滚动到左侧超出隐藏；
  • 可以无限循环滚动；

实战

根据需求，从下面两个方面入手：

第一步：搞定样式

        样式的实现没有过多可说的，如字体颜色，背景等等，要注意是元素盒子的准备和flex布局；准备一个窗口盒子，和一个词条盒子，词条盒子中有两个一模一样的子盒子，要注意子盒子宽度要比窗口盒子大，且词条盒子宽带是子盒子的2倍（刚好装下两个子盒子），子盒子内词条flex布局；

第二步：实现动画

        考虑到上篇文章不同动画实现方案的比较，我们考虑能用css实现的就用css实现；

动画要无限向左滚动，但要注意我们并可能真的让一个元素很宽，然后从当前位置一直向左移动到无穷远，我们的思路是从当前位置左移动到半个词条盒子的距离（一个子盒子的距离），然后立即回到最初位置继续循环一次动画；

        两个步骤的思路说完，具体代码见最下方；

代码实现

HTML

<body>
    <div class="wrapper">
       <div class="wrapper__box-wrapper" >
            <div class="wrapper__box-wrapper__line">
                <div>
                    <span>什么是快乐星球</span>
                    <span>爷青回</span>
                    <span>躺平</span>
                    <span>惊呆了</span>
                </div>
                <div>
                    <span>什么是快乐星球</span>
                    <span>爷青回</span>
                    <span>躺平</span>
                    <span>惊呆了</span>
                </div>
            </div>
            <div class="wrapper__box-wrapper__line">
                <div>
                    <span>requestAnimationFrame</span>
                    <span>setTimeout</span>
                    <span>setInterval</span>
                </div>
                <div>
                    <span>requestAnimationFrame</span>
                    <span>setTimeout</span>
                    <span>setInterval</span>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

       .wrapper{
            position: relative;
            height: 100px;
            width: 300px;
            overflow: hidden;
        }
        .wrapper__box-wrapper{
            height: 100px;
            animation: move 5s linear infinite;
            position: absolute;
            left: 0px;
            background: #409EFF;
            width: 800px;
        }
        .wrapper__box-wrapper__line{
            overflow: hidden;
            margin: 10px 0;
        }
        .wrapper__box-wrapper__line div{
            float: left;
            display: flex;
            text-align: center;
            width: 50%;
        }
        .wrapper__box-wrapper__line span{
            background: rgba(255, 255, 255, 0.5);
            color: #fff;
            display: inline-block;
            padding: 0 5px;
            margin-right: 10px;
            border-radius: 5px;
            flex: 1 0 auto;
            line-height: 35px;
        }
        @keyframes move {
            0%{
                left: 0;
            }
            100%{
                left: -400px;
            }
        }
avatar
文章
阅读
粉丝