javascript - Jquery/javascript 文本动画

Question

好吧，我已经看到几个带有一些文本动画的网站，并且无法在我的网站上找到完成此操作的方法..如果您转到这里 https://www.battlefield.com/

文本是动画的，但不确定文本使用的是什么。如何为文本简单的淡入淡出过渡设置动画，就像上面的网站一样。

示例

第 1 行你好2号线欢迎3号线到我们的社区

等等

Answer 1

他们的做法很奇怪，我不知道他们为什么这样做。

看看该 URL:

https://media-www-battlefieldwebcore.spark.ea.com/content/dam/ea/battlefield-portal/sequence/BF1_Animated_Logo_94.png

这只是加载到页面中的约 110 张全尺寸图像(只需更改文件名中的序列号)中的一张，然后...手动播放。这意味着，他们通过 JavaScript 每秒更新图像源约 15-20 次。这解释了第一次加载图像时图像开始闪烁的原因……也许他们甚至喜欢这种效果。

所以它不是一个动画 PNG，它不是多媒体内容，它只是手动分配给图像的大约 100 帧。

您可能想要检查页面，搜索带有标签 <bf-animated-sequence> 的元素。它包含一些子元素，其中之一是其 src 每秒更改几次的图像。

并且 - 请 - 为了您的观众，请不要效仿他们的榜样。有很多更好的方法可以做到这一点( Canvas 、视频播放等)。

对于文本动画，我建议阅读 jquery animate api:http://api.jquery.com/animate/

[编辑]使用 jquery 你可以做这样的事情:

    $(function(){

        var $texts = $("#textfield .text");
        
        var textIndex = 0;

        function nextLine(){

        //Step 1: Fade in text
        $($texts[textIndex]).animate({opacity:1,"margin-top":12}, 500, "linear", function(){
        
            //Step 2: Fade out text
            setTimeout(function(){        
                $($texts[textIndex]).animate({opacity:0,"margin-top":20}, 500, "linear", function(){
                    //Step 3: Reset current and call next text
                    $($texts[textIndex]).css({"margin-top":20});
                    textIndex++;
                    textIndex %= $texts.length;
                    nextLine();
                    
                });
            }, 3000);
        });
        
        }
        
        nextLine();
        


    });

    #textfield{
        border:1px solid black;
        height:40px;
        position:absolute;
        left:10px;
        right:10px;
        top:20px;
        overflow:hidden;
    }

    #textfield .text{
        position:absolute;
        text-align:center;
        width:100%;
        margin-top:20px;
        font-family:Arial;
        opacity:0;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="textfield">
         <div class="text">Hello</div>
         <div class="text">Welcome to</div>
         <div class="text">our site</div>
    </div>