当前位置: 首页 > 面试题库 >

写一个动画,向上匀速移动100px,向下以1.5倍速度移动200px,一直反复循环

阮梓
2023-03-14
本文向大家介绍写一个动画,向上匀速移动100px,向下以1.5倍速度移动200px,一直反复循环相关面试题,主要包含被问及写一个动画,向上匀速移动100px,向下以1.5倍速度移动200px,一直反复循环时的应答技巧和注意事项,需要的朋友参考一下
    .animation-block {
        width: 50px;
        height: 50px;
        background: red;
        margin-top: 200px;
        animation: up 1s linear, down 1.5s linear 1s;
    }

    @keyframes up {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-100px);
        }

        100% {
            transform: translateY(0px);
        }
    }

    @keyframes down {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(100px);
        }

        100% {
            transform: translateY(0px);
        }
    }

<div class="animation-block"></div>


var box = document.querySelector('.animation-block');
var i = 0
box.addEventListener("webkitAnimationEnd", function() {  
    i++
    if (i == 2) {
        i = 0
        box.classList.remove('animation-block');
        setTimeout(function() {
            box.classList.add('animation-block');
        }, 0)
    }
}, false);
 类似资料:
  • 本文向大家介绍JS div匀速移动动画与变速移动动画代码实例,包括了JS div匀速移动动画与变速移动动画代码实例的使用技巧和注意事项,需要的朋友参考一下 1.匀速移动代码 2.变速移动代码 common.js 以上所述是小编给大家介绍的JS div匀速移动动画与变速移动动画详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!

  • 以下是您将看到的一些方法的快速描述: > :返回船的边界(一个矩形) :返回表示船边界中心的Vector2d。 :一个,它表示船的速度(每帧添加到位置) :一个新的,当给定一个角度(以弧度为单位)时,将其标准化 :不是线性插值!如果你想看代码,这里是(在类中): 当玩家没有按键时,飞船应该减速。以下是我为此所做的: 然而,现在我意识到我希望它在向目标移动时漂移。我试过这个: 这当然不会真的达到零速

  • 在IOS SpriteKit中玩SKSprites,我基本上想让一个sprite随机移动某个方向一定距离,然后选择一个新的随机方向和距离。。非常简单,创建一个生成随机数的方法,然后创建动画,并在动画的完成块中调用相同的例程。 这确实有效,但也可以防止动画以相同的速度移动,因为动画都基于持续时间。。如果物体必须移动100,它将以1/2的速度移动,如果下一个随机命令它移动200。。。那我该怎么让它以一

  • 本文向大家介绍javascript匀速动画和缓冲动画详解,包括了javascript匀速动画和缓冲动画详解的使用技巧和注意事项,需要的朋友参考一下 关于网页中的动画,在css3中我们已经可以使用一些属性快速的做出来,但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画。 使用js做动画最重要的一个函数就是setInterval函数,这里不再赘述,不懂可以直接百度用法。本文主要讲动画的

  • 动画速度 动画实际上就是一段时间内的变化,这就暗示了变化一定是随着某个特定的速率进行。速率由以下公式计算而来: velocity = change / time 这里的变化可以指的是一个物体移动的距离,时间指动画持续的时长,用这样的一个移动可以更加形象的描述(比如position和bounds属性的动画),但实际上它应用于任意可以做动画的属性(比如color和opacity)。 上面的等式假设了

  • 感谢您抽出时间阅读此文章。现在我正在制作一个非常基本的基于瓷砖的游戏。地图是大量的16x16分幅,角色图像也是16x16分幅。我的角色有自己的类,它是sprite类的扩展,x和y位置根据平铺位置保存。 要注意,我是相当缺乏经验pyplay。 我的问题是,我计划将角色移动限制在一次一个图块,我不知道如何做到这一点,即使玩家快速按下方向键几十次,(WASD或箭头键)它也只会移动以一定的速度从瓷砖到瓷砖