`

我谈弹性运动(动画编程深入)

阅读更多
说到弹性运动,大家首先想到的是弹簧了吧,是的,我们都学过物理,有很强的物理基础,想必都比我学的要好。弹性运动到底怎么过运动呢,也许有人马上就去拿根弹簧过来,可生活中东西并不是好找,这样常见的。找不到是不是就不去研究了呢,当然不是。在学生时代,见过很多弹性运动,只是很少放心上去,比如,拉橡皮筋,松开反弹,就是了。 我现讨论是把弹性运动运用到计算机科学当中,也许大家学了很久的计算机,却不知道数学,物理对计算机有什么帮助,我在这里作一下解释。因为我们还没有深入计算机,如果你学习计算机动画,或者计算机图形学,哪要用到的数学,物理可就多了,大到天体运动,小到粒子引力。跑题了,还是探讨一下弹性运动吧。

    在读书时,大家有没有想过,弹簧拉长是因为弹簧自身有保持原来的状态的能力,当改变它的长度,会使产生恢复到原来状态的力,这个就是弹力。我们知道,有力必然产生加速度,这个加速度有可能是负加速度。但在计算机中,弹力这个概念还是有的,但却会省略掉,因为,我们要用到的只有加速度,只要知道它产生的加速度就够了。然而这个加速度怎么得来呢?可能物理学中会给它一个弹簧系数。其实我们有没有细细观察分析,可能我没有。在这里只要能明白一个原理就足够了。就是弹簧产生的加速度与弹簧拉伸的长度成正比,也就是拉伸的长度越长,所获得的加速度越大。

    但在计算机中表示弹性运动,要注意几个点:其一,弹簧的初始状态,这个状态我们可以用位置表示,也就是弹簧在屏幕上的x,y坐标表示。然后也给定一个点,一个弹簧的最远点(X,Y)。我在这里给出表示弹性运的公式原理及表示方法:

        我们假设是计算机坐标,就是以屏幕左上角为原点,Y轴正方向向下,X轴右方向为正。我们计算机中的弹簧为逻辑上的,也就是我们虚构存在的,其实际中并看不到弹簧的存在,我们假设有这么一个力存在,这也是我之前说的,弹力我们只要知道存在就可以了,我们只要知道加速度与位移的关系就可以了。现在以一个小球为例。这里我用AS3.0实现。实现一个小球受到弹力,并在弹力的作用下作弹性运动。所要用到个类,一个小球类Ball.as,一个文档类,Demo.as现在给出代码:

Ball.as;

package{

    import flash.display.Sprite;

    public class Ball extends Sprite{

        public var radius:Number=0;//这里我们不考虑安全性,主要是为了方便调用,因此定义为public;

        public var vx:Number=0;//小球X方向的速度;

        public var vy:Number=0;//小球Y方向的速度;

        public var ax:Number=0;//小球X方向的加速度;

        public var ay:Number=0;//小球Y方向的加速度;

        function Ball(radius:Number=10){

                    this.radius=radius;

                    this.graphics.beginFill(1);

                    this.graphics.drawCircle(0,0,this.radius);

                    this.endFill();

                }

    }

}

Demo.as;

package{

    import flash.display.Sprite;

   public class Demo extends Sprite{

        private ball:Ball;

        private ox:Number;//小球远移点X坐标;

        private oy:Number;//小球远移点Y坐标;

        private spring:Number=0.8;//弹簧力系数,加速度的比例因子,你可以自己,但要运动正常。

        function Demo(){

             ball=new Ball();

             this.addChild(ball);

             ball.x=stage.stageWidth/2;

             ball.y=stage.stageHeight/2;

             stage.addEventListener(Event.ENTER_FRAME,onEnterFrame);

         }

        private function onEnterFrame(evt:Event){

            var dx=ball.x-ox;

            var dy=blaa.y-oy;

            ball.ax=spring*dx;ball.ay=spring*dy;

            ball.vx+=ball.ax;ball.vy+=ball.ay;

            ball.x+=ball.vx;ball.y+=ball.vy;

            //到这里就全部表示完成了,这就是一个成功的弹性运动,弹性运动非常的好玩,谢谢收看。

}

    }

}

   

分享到:
评论

相关推荐

    js弹性运动

    综上所述,"js弹性运动"是一个涉及JavaScript编程、动画原理、缓动函数应用以及性能优化的综合性技术。通过学习和实践,你可以创建出更具动态美感和用户体验的网页交互。"move.html"和"move.js"的代码将为你提供一个...

    Canvas彩色弹性碰撞小球动画.zip

    在这个“Canvas彩色弹性碰撞小球动画”项目中,我们将深入探讨如何利用JavaScript和Canvas API来实现这样一个生动有趣的动画效果。 1. **Canvas基础**:Canvas是一个HTML元素,通过JavaScript的绘图方法,可以在其...

    弹性字母js特效动画代码

    在“弹性字母”特效中,开发者可能通过监听用户的鼠标点击事件,然后计算出字母的初始状态和目标状态,通过一系列定时器或requestAnimationFrame函数,逐渐改变字母的样式,模拟弹性运动。 此外,"物理力学弹性"是...

    Js弹性缓冲反弹动画演示示例.rar

    在本示例中,“Js弹性缓冲反弹动画演示示例.rar”提供了一个使用JavaScript实现的弹性缓冲运动动画,这通常涉及到CSS3动画与JavaScript的结合,以创建更加自然且流畅的用户界面动态效果。 在网页设计中,动画效果...

    杆件运动与动画效果

    在VB.Net编程环境中,我们可以利用其强大的图形处理能力来实现理论力学和机械原理中的运动模拟,从而创建出杆件运动与动画效果。这样的模拟对于学习、理解和演示物理现象,特别是机械系统的动态行为,具有非常高的...

    弹性小球和自行车 turbo动画

    "弹性小球和自行车 turbo动画"这个项目,显然是一种使用 Turbo 编程环境创建的动态视觉效果。Turbo,这里很可能指的是 Turbo C,一个经典的C语言编译器,曾广泛用于教学和早期软件开发。下面将详细探讨 Turbo C 和...

    Mootools 带弹性动画的图片切换.rar

    2. **弹性动画原理**:弹性动画是一种基于物理模拟的动画效果,模拟了弹簧的弹性运动。在Mootools中,这通常通过自定义的动画函数实现,如使用`Fx.Tween`或`Fx.Morph`类,并结合缓动函数(easing function)来创造出...

    HTML5无尽下坠弹性僵尸背景Canvas特效动画

    开发者可能会使用加速度、速度和位置的计算,模拟物体在重力影响下的弹性运动。僵尸在下落过程中可能会有弹跳,这需要对碰撞检测进行处理,以确定僵尸何时与地面或其他障碍物接触,并据此改变其速度和方向。 至于...

    HTML5基于Canvas绘制的弹性水滴动画效果源码.zip

    在这个“HTML5基于Canvas绘制的弹性水滴动画效果源码”中,我们将深入探讨如何利用HTML5的Canvas元素来实现一个生动有趣的水滴动画效果。 Canvas是HTML5中的一个核心特性,它是一个可编程的二维绘图表面,通过...

    HTML5立体小球运动动画效果.zip

    深入研究这个代码,我们可以学习到如何将理论知识应用到实际项目中,理解HTML5 Canvas和JavaScript如何协同工作,以及如何通过编程实现动态的3D动画效果。 总的来说,"HTML5立体小球运动动画效果"是一个很好的学习...

    购物车类的抛物线动画(支持上抛或者下抛) && 阻尼动画(弹球动画).zip

    在IT行业中,动画效果是提升用户体验的关键因素之一。在电商应用中,购物车动画的巧妙设计可以...这两个动画的实现都涉及到了物理原理和编程技巧,对于想要提升应用动画质量的开发者来说,是一个值得深入研究的案例。

    安卓动画效果相关-仿windos桌面气泡.rar

    学习这个压缩包中的内容,你可以深入理解安卓动画机制,掌握如何创建和控制自定义动画。不过,由于文件过多且可能无法逐一验证,你需要自行调试和优化代码,使其适应实际项目需求。此外,代码中可能存在的功能模块和...

    swift-KYShareMenu-带弹性动画的分享菜单

    Swift-KYShareMenu 是一个基于 Swift 语言开发的开源项目,专为 iOS 应用程序设计的具有弹性动画效果的分享菜单。这个组件提供了一种优雅的方式来展示分享选项,通过弹性的过渡动画增强了用户体验,使得分享操作更加...

    swift 简单的动画框架

    Spring库不仅包含了基本的动画效果,如淡入淡出、平移、旋转和缩放,还支持更高级的功能,比如弹性动画,这种动画模拟真实世界物体的物理运动,增加了视觉的真实感和动态感。 在Swift中,我们可以使用Spring库来...

    swift-Swift开发的实用易用的iOS动画集合库

    Spring-master这个文件名可能指的是该库中的一个核心模块或者示例项目,通常这样的命名方式暗示着这个库提供了一种弹簧动画的效果,这种动画模拟了物理世界中的弹性运动,使得用户界面更加生动和自然。 Spring动画...

    HTML5_JavaScript动画基础(高清带目录)

    例如,线性运动、缓动运动、弹性运动等。 4. 动画的触发:动画可以通过事件触发,如鼠标点击、触屏操作、计时器事件等。理解这些事件监听和处理是创建交互式动画的基础。 5. CSS动画和过渡:虽然重点是HTML5和...

Global site tag (gtag.js) - Google Analytics