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

【问题标题】：how to loop on a set of animations with velocity.js如何使用velocity.js循环一组动画
【发布时间】：2014-07-30 21:40:22
【问题描述】：

你好，

我试图让一个字符串逐个字符地出现和消失。首先，我使用 lettering.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>

效果很好，我的第一个角色移动并消失了 yiha！但是没有办法循环所有这些。如果您查看速度文档，对某物施加多种效果的唯一方法是调用尽可能多的 .velocity 来添加效果...存在循环属性，但您不能将所有速度调用都放入一行。

有没有人知道我如何用速度做到这一点？我实际上不想使用动画。

感谢您的帮助！

托马斯

【问题讨论】：

要使用单个字符制作动画，您应该查看 blast 库：julian.com/research/blast。它来自与velocity.js 相同的作者，Julian Shapiro。

标签： javascript jquery velocity.js

【解决方案1】：

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

$("#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();

希望对您有所帮助！

【讨论】：