Question

你好，

我试图让字符串出现并通过char消失char。首先，我使用fonts.js将我的字符串拆分为与字符串长度一样多的span元素。其次，我使用速度对它们施加一些影响。

所以例如

<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>

它运作良好，我的2个第一个字符移动并消失yiha！但是没有办法循环所有这一切。如果你看一下速度的文档，把几个效果放在某个东西上的唯一方法就是调用你想要添加效果的.velocity ...一个循环属性存在，但你不能把所有的速度都放连续打电话。

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

感谢您的帮助！

托马斯

Answer 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();

希望它会有所帮助！

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

1 个答案: