Javascript 如何使用velocity.js循环一组动画

你好

我试图让一个字符串一个字符一个字符地出现和消失。 首先，我使用letting.js将字符串拆分为与字符串长度相同的跨度元素。 第二，我用速度对它们施加一些影响

比如说

<div id="demo1" class="demo">
    <h1>Rainbow</h1>
</div>

<script>
        $(document).ready(function() {

            $("#demo1 h1").lettering();

            $(".char1").velocity("transition.whirlIn", 1000);
            $(".char1").velocity({translateX: "201px"});
            $(".char1").velocity({translateY: "20px"});
            $(".char1").velocity({opacity: "0"});   

            $(".char2").velocity("transition.whirlIn", 2000);
            $(".char2").velocity({translateX: "201px"});
            $(".char2").velocity({translateY: "20px"});
            $(".char2").velocity({opacity: "0"});

        });
</script>

彩虹
$（文档）.ready（函数（）{
$（“#demo1 h1”）。刻字（）；
$（“.char1”）.velocity（“transition.whirlIn”，1000）；
$（“.char1”）.velocity（{translateX:“201px”}）；
$（“.char1”）.velocity（{translateY:“20px”}）；
$（“.char1”）.velocity（{opacity:“0”}）；
$（“.char2”）.velocity（“transition.whirlIn”，2000年）；
$（“.char2”）.velocity（{translateX:“201px”}）；
$（“.char2”）.velocity（{translateY:“20px”}）；
$（“.char2”）.velocity（{opacity:“0”}）；
});

它工作得很好，我的两个第一个角色移动并消失了，哈哈！但这一切都无法循环。如果您查看velocity文档，在某些内容上放置多个效果的唯一方法是调用您想要添加效果的尽可能多的.velocity…存在循环属性，但您不能将所有velocity调用放在一行中

有人知道我如何使用velocity实现这一点吗？实际上我不想使用动画

谢谢你的帮助

---

托马斯

好的，我刚刚找到了一个解决办法

$("#demo1 h1").lettering('words').children('span').lettering().find('span').velocity({opacity: 0}, 0);

        var titles = ['First title', 'Second title', 'Third title'];
        var titleIndex = 0;

        var transitionsIn = ["flipXIn","slideDownIn","perspectiveLeftIn"];
        var transitionsOut = ["flipXOut","slideUpOut","perspectiveRightOut"];

        function animateText() {
            var transIn = transitionsIn[Math.floor(Math.random()*transitionsIn.length)];;
            var transOut = transitionsOut[Math.floor(Math.random()*transitionsOut.length)];;
            $('#demo1 h1 span span')
                    .velocity("transition." + transIn, {stagger: 100})
                    .delay(2000)
                    .velocity("transition." + transOut, {
                        complete: function(elements) {
                            console.log(elements);
                            titleIndex++;
                            if (titleIndex > titles.length) {
                                titleIndex = 0;
                            }
                            $("#demo1 h1").hide().html(titles[titleIndex]).lettering('words').children('span').lettering().find('span').velocity({opacity: 0}, {
                                complete: function(els) {
                                    $("#demo1 h1").show();
                                    animateText();
                                }});

                        }
                    })
                    ;
        }
        animateText();

---

希望这会有帮助

要使用单个角色制作动画，您应该查看blast库：。它与velocity.js出自同一作者Julian Shapiro。