如何创建AnimeJS 文本动画效果

如何创建AnimeJS 文本动画效果 | Anime.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>How to Create AnimeJS Text Animation Effects | Anime.js</title>
        <style type="text/css">
            @import url("https://fonts.goog;eapis.com/css?family=Roboto:300,400,500,700,900&display=swap");
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'Roboto',sans-serif;
            }
            section{
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background-color: #0e1623;
                overflow: hidden;
            }
            section .text{
                position: relative;
                font-size: 5em;
                text-align: center;
                color: #00fe77;
                -webkit-box-reflect: below -0.45em linear-gradient(transparent,#0004);
            }
            section .text span{
                position: relative;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <section>
            <h2 class="text">AnimeJS Text Animation Effects</h2>
        </section>
        <script src="./js/anime.min.js" type="text/javascript" charset="utf-8"></script>
        <!-- js文件下载地址https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.min.js
        https://github.com/juliangarnier/anime/tree/master/lib
        官网：https://animejs.com/ -->
        <script type="text/javascript">
            //now,split text into words
            const text=document.querySelector('.text');
            text.innerHTML=text.textContent.replace(/S/g,"<span>$&</span>");//这里可以去F12看看h2标签的效果，每一个字都分成了span里面
            
            anime.timeline({
                loop:false
            })
            
            //动作是中间一个一个来
            .add({
                targets:'.text span',
                // translateY:[start value,end Value] 参考
                translateY:[-600 ,0],  //[start value,end Value]
                scale:[10,1],  //[start value,end Value]
                opacity:[0,1],   //[start value,end Value]
                easing:"easeOutExpo",    
                duration:1500  ,//1.5seconds
                delay: anime.stagger(100),
            })
            
            //加多一条，就有有另外的动作,从左边离开
            .add({
                targets:'.text span',
                // translateY:[start value,end Value] 参考
                translateX:[0 ,-1000],  //[start value,end Value]
                scale:[1,1],  //[start value,end Value]
                opacity:[1,0],   //[start value,end Value]
                easing:"easeOutExpo",    
                duration:2000  ,//1.5seconds
                delay: anime.stagger(100),
            })
            
            //加多一条，就有有另外的动作,从右边回来
            .add({
                targets:'.text span',
                // translateY:[start value,end Value] 参考
                translateX:[-1000 ,0],  //[start value,end Value]
                scale:[1,1],  //[start value,end Value]
                opacity:[0,1],   //[start value,end Value]
                easing:"easeOutExpo",    
                duration:2000  ,//1.5seconds
                delay: anime.stagger(100),
            })
            
            //加多一条，就有有另外的动作,一个个弹向屏幕
            .add({
                targets:'.text span',
                // translateY:[start value,end Value] 参考
                translateX:[0,0],  //[start value,end Value]
                scale:[1,50],  //[start value,end Value]
                opacity:[1,0],   //[start value,end Value]
                easing:"easeOutExpo",    
                duration:2000  ,//1.5seconds
                delay: anime.stagger(100),
            })
            
            
        </script>
    </body>
</html>