如何用js使小球来回弹动

JavaScript08

如何用js使小球来回弹动,第1张

你好,

可以通过判断小球边缘和窗口高度来实现

例如垂直下落,给小球y方向的初速度和加速度(模拟重力加速度),当小球的小边缘接触窗口底部时,将 y = -y;加速度不反向;当达到最高点及y方向速度为零,将y再反向向下落。

来回弹动关键在于 对边缘的判断,和速度方向的判断和计算

setFPS、getFPS是EaselJS中Ticker类用于设置和获取帧频的函数。

EaselJS中Ticker类动画机制:

1、 逐帧动画

逐帧动画,把动画(例如人物动作)进行分解,然后绘制出连续的、具有代表性的动作,连续播放形成动画,逐帧动画适用于复杂的不连续的动画。

        实现逐帧动画主要需要两个东西,动作关键帧和动起来的机制。

        “动画”机制: 使动画动起来的机制,这里使用EaselJS的一个类Ticker

createjs.Ticker.addEventListener("tick", tick)  

function tick(evt) {  

    //some code   

}

Ticker的几个关键方法,setFPS、getFPS设置和获取帧频,setInterval、getInterval设置和获取时间间隔,setPaused、getPaused设置和获取暂停等,这些都是静态方法。

createJS上的逐帧动画示例:

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <meta author="pingfan" content="creatJSGame">

        <title>玩转createJS游戏</title>

        <link rel="stylesheet" href="../css/game.css">

</head>

<body>

        <canvas id='canvas' width="960" height="400">浏览器不支持canvas,请使用现代浏览器。</canvas>

        <script src='http://code.createjs.com/createjs-2013.12.12.min.js'></script>

        <script>

                var  stage=new createjs.Stage("canvas"),

                     container=new createjs.Container(),

                     // 定义SpriteSheet 参数

                     data={

                                "animations":{

                                        "run": [0, 25, "jump"],

                                        //start,end,next,speed开始帧,结束帧,下一个动作,运行速度

                                        "jump": [26, 63, "run",1]

                                },

                             "images": ["http://createjs.com/Demos/EaselJS/assets/runningGrant.png"],

                             "frames":{

                                     //单个帧的高度,宽度,就是png图片里面那么多个帧一个帧的大小

                                        "height": 292.5,

                                        "width":165.75,

                                        //相对于原始偏移的位置

                                        "regX": 0,

                                        "regY": 0,

                                        //帧数

                                        "count": 64

                                }

                     }

                //实例精灵动画集

                var move = new createjs.SpriteSheet(data)

                //SpriteSheet类设置帧和动画,里面的run为开始的动画

                var grant = new createjs.Sprite(move,"run")

                        //设置在舞台中的位置

                         grant.x=360

                         grant.y=100

                // 把动画放到舞台上,创建一个间隔事件侦听,进行动画  

                container.addChild(grant)

                stage.addChild(container)

                createjs.Ticker.setFPS(60)        

                createjs.Ticker.addEventListener("tick",stage)

                stage.update()    

        </script>        

</body>

</html>

2、补间动画

        补间动画,指我们给定动作的初始状态和结束状态,然后动画系统(例如动画软件)自动补齐中间状态,从而形成动画,补间动画适用于物体的移动、状态的改变等简单的动画。

        补间动画实例,让刚刚那个原地跑步的人,向前方跑动,单击时表示跳起:

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <meta author="pingfan" content="creatJSGame">

        <title>玩转createJS游戏</title>

        <link rel="stylesheet" href="../css/game.css">

</head>

<body>

        <canvas id='canvas' width="960" height="400">浏览器不支持canvas,请使用现代浏览器。</canvas>

        <button id='btn'>暂停pause</button>

        <script src='http://code.createjs.com/createjs-2013.12.12.min.js'></script>

        <script>

                var  stage=new createjs.Stage("canvas"),

                     container=new createjs.Container(),

                     // 定义SpriteSheet 参数

                     data={

                                "animations":{

                                        "run": [0, 25, "run",1.5],

                                        //start,end,next,speed开始帧,结束帧,下一个动作,运行速度

                                        "jump": [26, 63, "run",1.5]

                                },

                             "images": ["../img/runningGrant.png"],

                             "frames":{

                                     //单个帧的高度,宽度,就是png图片里面那么多个帧一个帧的大小

                                        "height": 292.5,

                                        "width":165.75,

                                        //相对于原始偏移的位置

                                        "regX": 0,

                                        "regY": 0,

                                        //帧数

                                        "count": 64

                                }

                     }

                //实例精灵动画集

                var move = new createjs.SpriteSheet(data)

                //SpriteSheet类设置帧和动画,里面的run为开始的动画

                var grant = new createjs.Sprite(move,"run")

                        //设置在舞台中的位置

                         grant.x=20

                         grant.y=22

                // 把动画放到舞台上,创建一个间隔事件侦听,进行动画  

                container.addChild(grant)

                stage.addChild(container)

                createjs.Ticker.setFPS(60)

                createjs.Ticker.addEventListener("tick",tick)

                //speed用来做加速度

                var speed=1

                function tick(){

                        if(!createjs.Ticker.getPaused()){

                                grant.x+=3*speed

                                stage.update()

                                speed+=.01

                                (grant.x>stage.canvas.width) && (grant.x=0,speed=1)

                        }

                }

                //侦听鼠标事件

                stage.addEventListener("stagemousedown",handleClick)

                function handleClick(){

                                //alert(11)

                                grant.gotoAndPlay("jump")

                }

                //设置按钮暂停

                var btn=document.getElementById("btn")

                btn.addEventListener("click",toggleMove,false)

                function toggleMove(){

                        //        grant.gotoAndStop()

                        //其实实现暂停和运动就是false和true切换

                        var paused = !createjs.Ticker.getPaused()

                        createjs.Ticker.setPaused(paused)

                        btn.value="暂停pause" ? "运动play" : "暂停pause"

                }

                stage.update()    

        </script>        

</body>

</html>

加速度跟速度一样,有平均加速度和瞬时加速度之分 ,虽然高中阶段没有明确指出,但很多问题中都有涉及。对a=(v'-v)/t和Δx=aT2以及所有含加速度的运动学公式,都只适用于匀变速直线运动。 在圆周运动中,a=v2/r或a=ω2r,前者求得的是与速度对应的瞬时向心加速度,后者求得的是与匀速圆周运动的角速度对应的平均向心加速度。