微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Animejs:我如何制作一些闪烁的东西和时间线?

如何解决Animejs:我如何制作一些闪烁的东西和时间线?

想象一下,游戏中滚动着一堆文字,当屏幕上显示所有税款时,光标会闪烁,告诉用户他们应该点击继续。这就是我正在努力实现的目标。

const timeline = window.anime.timeline({});

const blinkingCursor = $('<div class="blinking-cursor"><img src="https://static8.depositphotos.com/1320280/970/i/600/depositphotos_9703648-stock-photo-click-it.jpg" style="width: 50px"></img></div>')
        .appendTo("body")
        
timeline.add(
        {
            targets: blinkingCursor.get(0),easing: 'eaSEOutExpo',keyframes: [
                { opacity: 1 },{ opacity: 0 },],duration: 2000,loop: true,direction: 'alternate',});

const blinkingCursor2 = blinkingCursor.clone().appendTo("body")
anime(
        {
            targets: blinkingCursor2.get(0),opacity: [
                { value: 1,duration: 1000 },{ value: 0,});

const blinkingCursor3 = blinkingCursor.clone().appendTo("body")
anime(
        {
            targets: blinkingCursor3.get(0),});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

如果您运行此代码,您将看到第一个示例仅运行一次。为什么会这样,我如何让它循环?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。