java web 运动前端

【写在前面的话:】
前不久刚看到过一句话:说好的技术文章应该让读者感觉增加信心,而不是失去信心。
有感于这句话是因为以前觉得发一些貌似高深的,看起来nb的东西才算一篇好博文,可是多少有点炫技的成分。可是后来越发觉想把一个看起来简单的问题说通透也着实不易。我希望今后的文章多少能带给更多的读者一些帮助吧。 这是我的目标之一。

web前端,确实算编码里面的挺特殊的一个职位,不仅仅要理性的编码,还要感性的接触UI,通常我都把这种工作叫做需要情商的码字工作者。

要说前端有多难,我想会被很多做算法或者底层的同学所不齿。确实,前台的工作并不算难,尤其是web端的前台,有困难的部分,那也是少数。所以在互联网发展初期,都没有前端这个职位,就算后来有了前端这个职位,也曾被当作是门槛最低的IT类职位之一。很多同学学习前端相关的知识,初衷很简单,因为好学,包括当年的自己也是一样 : )

当然,如今随着交互逻辑的不断复杂,用户体验的不断提升,外带很多后端的逻辑也都纷纷转到前端来实现。前端的工作者们开始有了一些价值。当然,你要担当的更多,必然需要会的更多。所以如今对于一个优秀的前台编码工作者来说,要求高了很多。

但是同样,还是不能算难。因为哪怕前端们开始接触一些算法,一些数学物理的东西,但常用的,通常也仅限于初衷,高中的程度。所以神马高等数学,高等物理之类的。咱暂时还用不上,大家完全不用惧。

那么,比如:

【关于缓动】
我相信在DHTML时代,也就是所谓的动态 html 的时候,那时候javascript 脚本除了用来做一些表单验证和提交之外,开始干起让页面动起来的事情。最常见的莫过于什么幻灯片,轮播banner之类的。甚至在当时能够手写出一款好的,兼容的轮播插件成了一件非常niu的事儿。那么回想一下,我们最开始学习,尝试自己写一个轮播插件的时候,遇到的头疼的事儿,我想缓动应该算一个了吧。
好吧,咱们就先来说说它。

缓动难吗,不难,我们先说一个最简单的。所谓“缓动”,无非就是运动的越来越缓慢呗。那么怎么让一个物体运动的越来越缓慢呢。

我们用的计时器,不管你是用setInterval也好,setTimeout也好,或者 requestAnimationFrame也好,思路都一样。反正把它想象成是单位时间重复调用某个函数就行。那就好,既然单位时间是一样,那么我们让单位时间内 物体运行的距离 越来越小不就成了“缓动”了吗。

ok,咱们可以试试看:

假如我们有一段固定的路程100米,然后让物体 每个单位时间里面运动的距离都是 它距离目的地剩余距离的1/10, 什么意思呢。 即物体最开始距离目的地100米,那么它第一个单位时间里朝目的地运动 100*1/10 ,即10米, 于是,第二个单位时间里,它距离目的地 就只有90米了,那么第二次运动 90*1/10 ,即9米,... 不断叠加下去,由于物体总是距离目的地越来越近,那么 它单位时间里运动的距离必然越来越小。 这不就达到了 我们缓动的目的的了么。

(function () {

    var moveDis = 0,

        conEl = document.getElementById(‘container‘),

        maxDis = (conEl.offsetWidth-22) || (800-20), // 总距离

        moveEl = document.getElementById(‘move‘);

        

    function step () {

        var nowLeft = parseInt(moveEl.style[‘left‘]),

            leftDis = maxDis - nowLeft, // 获取距离目的地的距离

            stepDis = Math.ceil(leftDis*.015); // 每次移动 剩余距离的 固定百分比。

            

        nowLeft += stepDis; // 不断叠加

        moveEl.style[‘left‘] = nowLeft + ‘px‘;

        requestAnimFrame(step); // repeat

    }

    

    step();

})();

Tween Demo 1

当然,这是最简单的模式,咱们接着往下看。

那么,那些看起来高深的缓动公式是怎么来的呢??

其实也很简单,想想我们初中,高中学的数学吧, 二次函数,三角函数之类的。

先看二次函数,也就是我们的抛物线:

为什么我要说先看二次函数或者三角函数呢。他们的轨迹跟 缓动有什么关系?我们接着往下看:

拿上面的那个最简单的demo举例,我们把 方块的运行距离s 和时间 t的运动关系 画出来,看会是什么样子的。

看这个demo:
Tween Demo 2

这里面的缓动算法跟上面那个最简单的模式一模一样。我们把它的 t-s 路线图画出来,可以看出一点端倪了吧。没看出来的同学,把它旋转一下,想象成 x轴 时间, y轴位移。那么是不是就跟 我上面画那个二次函数 的左半部分 的形状很像。

所以,到此为止,相信不难理解,为什么缓动的公式通常和二次函数或者三角函数有关,直观一点的话说,就是在某一个区间内 位移的变化率 是随着时间递减的。 那么这种 轨迹都可以用作 缓动公式。

那么,

我们怎么用二次函数来做缓动呢?很简单,大家随着我的思路来。我们要设计一个缓动的接口api,假如是类似下面这样,我们先想一个最简单的方式。

【已知】:一物体要从 0 运行到 400, 运行时间为1秒(1000ms)。
那么我们怎么为它来设计一个二次函数的缓动呢。我们先画一个示意图:

那么求的 方程 的系数 a = 0.00005, b = -0.1;

那么方程就出来了 s = 0.00005*t^2 - 0.1*t  (0 < t <=1000);

剩下的就好办了,把每个时间点的位置渲染出来就好了。
例如,我们做个例子,设计一个api:

// from 表示起始点

// to 表示到达位置

// t 表示运行总时间

tween(from, to, t)

按照上面说的思路,其实就是已知运行距离(from-to)和运行时间t ,求一个二次函数公式而已。  

// 二次函数 s = a*t^2 + b*t;

// 顶点: (to-from) = a*t^2 + b*t

// 右侧x轴交点: 0 = a*(2t)^2 + b*2t

// 得出 a = -(to-from)/t^2; b = 2(to-from)/t;

 var left = a*st*st + b*st;

 o.style[‘left‘] = from + left + ‘px‘;

看demo:
  Tween Demo 3  (demo里面由于用的普通的dom生成的点图,会占内存,请不要测试过多次 ^^).

原理其实就是那么简单,其实大家可以自己试一下,熟悉了之后完全可以封装出自己的好用的,易用的缓动方法。

用这类的二次函数,还有一个很常见的场景,就是“重力系统”。

我们知道,如果忽略所谓的空气阻力和一些外界干扰因素,重力系统其实就完全可以简化成 二次函数(抛物线)问题。

比如我们做个小游戏,系统有固定的向下的重力 g ,那么由用户操作的主角 在像上跳的过程中,就完全可以按 上面说的方式来考虑。

基本思路上面都说了,这次我们换个思路。都说数学和物理是相通的,那么这次已知 在一个重力系统中,跳起初速度和重力大小。那么假设一个物体跳起该怎么运动呢?

S = v0*t + a*t^2

v0 = a*t

这两个应该是初中的物理公式吧。已知初速度v0 和加速度 a ,求位移还不简单。
其他的我就不多说了,看一个简单的demo吧:
弹跳Demo  

看完了【二次函数】,咱们再看看【三角函数】,其实在我们常用的特效中,三角函数能做的事情比二次函数多很多。但是今天就只讲跟【缓动】相关的。

前面说了,凡是大家看到类似这种“山坡”形状的图,基本都可以做成类似的缓动。那么我们取sin函数的前 PI/2 部分,可以看出他也完全满足所谓的 缓动的图形条件。

而且,基于sin函数做的缓动公式 相对于二次函数而言,思路更简单。因为更容易得出 位移相对时间的公式S-T:

/**

 我们假设 每一帧 间隔时间为 dt, 那么在这个dt时间内 运动的距离为ds

那么,假设一个物体 从 from 移动到 to 所花的时间为t, 则容易得出 在这个时间区间内用sin公式得到 每个dt的位移公式ds

*/

function tween (from, to, t) {

    // sin函数; ds = (to-from)*Math.sin(Math.PI*dt/(2*t));

}

剩下的工作,就是把计算出来的当前位置渲染到页面即可。我们这里还是以类似的例子为例:
  sin 缓动 demo  

【写在后面的话】
不知不觉也写了这么多了,所谓“会者不难”,本文说到底其实涉及的技术技巧其实并不多,我花这么大篇幅来说也是希望能给对运动学还不甚了解的同学一点帮助吧。
我希望我能把简单的东西说明白,至于有没有达到这个目的我也不得而知。

其实在前端的工作里,还有一些常用的数学和物理知识,但是都不难。说起来都很简单。比如前一阵的mac QQ浏览器的logo 周围的闪动旋转的星星。就是用了简单的椭圆公式。
http://hongru.github.com/test/qqbrowser/index.html

时间: 2024-10-13 12:41:52

java web 运动前端的相关文章

JAVA WEB实现前端加密后台解密

最近在研究登陆密码的加密,下边上具体代码,只是给出核心代码,具体的代码视业务而定吧,给位有什么问题或者意见请留言. 加密方法用的是AES-128-CBC,BASE64用的是org.apache.commons.codec.binary.Base64 JS代码: var password = "1234567890,./"; var key = CryptoJS.enc.Utf8.parse("0102030405060708");//密钥,128位加密密钥为16位

Java Web高性能开发 - 前端高性能

作者:IBM developerWorks链接:https://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 图片压缩 减少图片的大小,可以明显的提高性能,而对于已有图片,要想减少图片的大小,只能改变图片的格式,这里推荐的是 PNG8 的格式. 图像合并实现 CSS Sprites 把网页中一些背景图片整合到一张图片文件中,再利用 CSS 的"background

使用IDEA结合MAVEN创建一个基于SpringMVC为前端JdbcTemplate为数据库组件的Java Web项目

前言 如今的Java项目,如果还使用传统的把jar包复制到目录下这种原始的方式,对于依赖管理来说实在是灾难.对某个功能需要引入某种技术包,但是你不确定是否已存在,如果分类好的话还好找,若是杂在一堆不仅头大,还身心俱疲.Maven旨在解决依赖问题,让项目结构变得精简,而Spring解决了项目中Bean的管理以及各种配置文件配置的功能轻松读入等问题,对于Java项目来说确实是福音.对于一个Web项目来说,必然需要数据库的读写,JdbcTemplate是一个Spring实现的Jdbc Support.

关于java web开发需要哪些技术要求(简单的web界面管理系统)

目前, 国内外信息化建设已经进入基于Web应用为核心的阶段, Java作为应用于网络的最好语言,前景无限看好.然而,就算用Java建造一个不是很烦琐的web应用,也不是件轻松的事情.概括一下,实施Java的WEB项目需要掌握的技术如下: lJava语言 l面向对象分析设计思想 l设计模式和框架结构 lXML语言 l网页脚本语言 l数据库 l应用服务器 l集成开发环境 下面我们具体地看每个技术. 1.Java语言 Java语言体系比较庞大,包括多个模块.从WEB项目应用角度讲有JSP.Servle

反思java web的发展

本来网站都是一个个静态HTML的,但很快我们就不满足于这样了.动态网页应运而生.一开始是Servlet.其代码类似于下面这样.主要是Java代码,然后用out一点一点输出HTML代码.当然代码无比丑陋,且美工人员几乎不能理解这样的代码. out.write("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\r\n"); out.write("<html&g

java web 学习的一些建议

web开发无非就是 前端技术+后端技术+数据库+数据交互 分开学习,个个击破,然后融合在一起使用,下面分开介绍各种技能 一.前端技能: 1.html: 基础中的基础,需了解里面的一些标签及用途 2.css+div:页面样式布局,稍作了解即可,除非你只做前端开发 3.javascript(js):页面脚本 很有用.很强大,能精通最好 4.jquery:本质上就是js,为了开发方便,对js进行了封装,方便使用. 5.正则表达式:知道是啥就行 以上是前端开发最基本的技能,掌握了的话,前端开发 进阶:实

JAVA WEB 环境的搭建及所需的技术简介

web 开发,有点头疼,从最初一点一点开始查找,服务器查了好久才知道是什么意思,╮(╯▽╰)╭ 还有,最近再练盲打, 祝我成功咯~ 一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源(如html 页面):指web页面中供人们浏览的数据始终是不变. 动态web资源:指web页面中供人们浏览的数据是由程序产生的,不同时间点访问web页面看到的内容各不相同

Java Web项目开发到底需要掌握哪些技术?

目前, 国内外信息化建设已经进入基于Web应用为核心的阶段, Java作为应用于网络的最好语言,前景无限看好.然而,就算用Java建造一个不是很烦琐的web应用,也不是件轻松的事情.概括一下,实施Java的WEB项目需要掌握的技术如下: lJava语言 l面向对象分析设计思想 l设计模式和框架结构 lXML语言 l网页脚本语言 l数据库 l应用服务器 l集成开发环境 下面我们具体地看每个技术. 1.Java语言 Java语言体系比较庞大,包括多个模块.从WEB项目应用角度讲有JSP.Servle

自我总结 (三) --(Java Web学习)

自我完善的过程就是在不断的自我总结不断的改进. 在前的近半个月里,我们经过了考试,也开始了java web的项目. 先看看这次的考试.考完之后我就觉得有点不对劲的,结果 结果真的是一塌糊涂.上周五的时候成绩就出来了.班上一半的人及格,一半的人不及格.最后老师也没有给我们每个人的分数.最高的分数才69分.我想我应该是没有及格的吧!笔试和机试都是一塌糊涂的.之后老师也没有给我讲机试笔试的题.我们的笔试,试卷又不可以带走.做完老师就把试题给收上去了(想想怎样可以去找到这些题呢). 改进的方面: 经过这