JavaScript 运动(加速度运动,弹性运动)
加速度运动(加速度不变的加速运动)
function addSpeed(dom){
var a = 5;
timer = setInterval(function(){
speed = speed + a;
dom.style.left = dom.offsetLeft + speed + 'px';
},30)
}
弹性运动

当一根弹簧链接小球弹性运动时过程
- (钉子左侧),小球运动方向向右,受到的力向右,加速度向右,做加速度减小的加速运动
- 当向右时(钉子右侧),小球运动方向向右,收到的力向左,加速度向左,做加速度增加的减速运动
- 当向左时(钉子右侧),小球运动方向向左,收到的力向左,加速度向左,做加速度减小的加速运动
- 当向左时(钉子左侧),小球运动方向向左,收到的力向右,加速度向右,做加速度增大的减速运动
也就是说当小球距离钉子(目标位置)越远,受到的加速度越大,随着距离不断减小,加速度也不断减小。在实现代码时通过判断物体距离目标点的距离来控制加速度的大小,也就是说我们可以使用a = target - dom.offsetleft;由于此时加速度太大可以除以一个数。
function moveStart(dom, targetPosition) {
clearInterval(timer);
var speed = 0; var a = 3;
timer = setInterval(function () {
a = (targetPosition - dom.offsetLeft) / 5;
speed = speed + a;
speed = speed * 0.8;if (Math.abs(speed) < 1 && Math.abs(targetPosition - dom.offsetLeft) <= 1) {
clearInterval(timer);
dom.style.left = targetPosition + "px";
} else {
dom.style.left = dom.offsetLeft + speed + "px";
}
}, 30)
}
而在真生的弹性运动中,由于受到摩擦力以及空气阻力,是有速度的能量损耗的。我们让摩擦力作用在速度的身上例如:speed * u;当speed减小到0并且距离目标位置小于1是,停止定时器。
JavaScript 运动(加速度运动,弹性运动)的更多相关文章
- JS运动基础(三) 弹性运动
加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...
- [Js]弹性运动
描述:像弹簧一样左右弹动,最后缓慢停下来 一.加减速运动 1.加速运动 var iSpeed=0;iSpeed++; 速度越来越快,最后冲出去 2.减速运动 var iSpeed=20;iSpeed- ...
- javascript运动系列第五篇——缓冲运动和弹性运动
× 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...
- js 运动函数篇(二) (加速度运动、弹性运动、重力场运动(多方向+碰撞检测+重力加速度+能量损失运动)拖拽运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...
- javascript每日一练(十四)——弹性运动
一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- 新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了
新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了 <!DOCTYPE html> <html> <hea ...
- jQuery插件之-----弹性运动
<!doctype html><html><head><meta charset="utf-8"><title>弹性运动 ...
- canvas链式弹性运动
上一课我学习了相对于鼠标为目标点的弹性运动,这次就学习了如何以上一个球为目标点的弹性运动,这次的函数比较复杂,首先分成了如下几个函数,首先定义了一个球的model,之后添加了4个球,在加载中调用了动画 ...
- JS学习之路,之弹性运动框架
弹性运动:顾名思义,就如同物理中的加速减速运动,当开始时速度过大,到达终点时,速度不会立刻停下,而是再前进一段距离,而后再向相反方向运动,如此往复. var timer=null; var speed ...
随机推荐
- 创建基于ASP.NET core 3.1 的RazorPagesMovie项目(一)-创建和使用默认的模板
声明:参考于asp.net core 3.1 官网(以后不再说明) 本教程是系列教程中的第一个教程,介绍生成 ASP.NET Core Razor Pages Web 应用的基础知识. 在本系列结束时 ...
- Could not find any version that matches com.android.support:appcompat-v7:29.+
新学Android开发设计用到Android Studio,说实话真的是BUG满天飞,稍有不慎就会蹦出一个不明所以的问题. 新建Android工程时编译运行报错: 目测是本地文件和工程对应的依赖包不匹 ...
- React的世界观及与Vue之比较
写在前面:本文谈论的是主观的个人感受,不追求立场的“客观.公正”,因此我下面所说的很可能是错的,欢迎交流指正. 我学习前端时,跟大部分beginner一样,学的第一个框架是Vue,入职后也一直写Vue ...
- 汇编 易混淆指令lea offset
lea 是机器指令,offset 是伪指令. LEA BX, BUFFER ;在实际执行时才会将变量buffer的地址放入bx MOV BX, OFFSET BUFFER ;在编译时就已经计算出buf ...
- swoole简介
swoole是PHP的扩展,又不是一个普通的扩展.普通的扩展只是提供一个库函数.而swoole扩展在运行后会接管PHP的控制权,进入事件循环.当IO事件发生后,swoole会自动回调指定的PHP函数. ...
- angular cli http请求封装+拦截器配置+ 接口配置文件
内容:接口配置文件.http请求封装 .拦截器验证登录 1.接口配置文件 app.api.ts import { Component, OnInit } from '@angular/core'; / ...
- 如何快速找到多个字典中的公共键(key)
from random import randint, sample #sample随机取样 d1 = {k: randint(1, 4) for k in sample('abcdefgh', ra ...
- Linux常用命令及详细说明 — 结合工作(侧重性能监控,包括CPU、内存、IO、网络、磁盘等)
(一)Linux监控的几个常用命令(对于服务器后端程序猿很重要,必须掌握): 命令 功能 命令 功能 iostat 统计CPU及网络.设备和分区IO的数据 vmstat 展示给定时间服务器的状态值(包 ...
- jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- SERCOS总线程序相关
SERCOS程序就是围绕主机发送MDT电报,伺服在下一个周期发送AT电报作为应答这个原则来实现的,这个过程是由控制字等控制实现的,读程序的时候如果忽略这点,可能在想程序从哪里读数据,在哪里写数据呢.. ...