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(); })(); |
当然,这是最简单的模式,咱们接着往下看。
那么,那些看起来高深的缓动公式是怎么来的呢??
其实也很简单,想想我们初中,高中学的数学吧, 二次函数,三角函数之类的。
先看二次函数,也就是我们的抛物线:
为什么我要说先看二次函数或者三角函数呢。他们的轨迹跟 缓动有什么关系?我们接着往下看:
拿上面的那个最简单的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
java web 运动前端的更多相关文章
- JAVA Web从前端到后台常用框架介绍
原博客:https://blog.csdn.net/u013142781/article/details/50922010 一.SpringMVC http://blog.csdn.net/evank ...
- JAVA WEB实现前端加密后台解密
最近在研究登陆密码的加密,下边上具体代码,只是给出核心代码,具体的代码视业务而定吧,给位有什么问题或者意见请留言. 加密方法用的是AES-128-CBC,BASE64用的是org.apache.com ...
- Java Web 前端高性能优化(一)
Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.所有 Web 的思想都是通用的,它们也可以运用到 Java Web.这一系列 ...
- Java Web 前端高性能优化(二)
一.上文回顾 上回我们主要从图片的合并.压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)) 本次我们主要从图像BASE64 编码.GZIP压缩.懒加载与预加载以及 OneAP ...
- Java Web 高性能开发,第 2 部分: 前端的高性能
Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.Web 的思想是通用的,它们也可以运用到 Java Web.这一系列的文章, ...
- Java Web 高性能开发,第 1 部分: 前端的高性能
Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.所有 Web 的思想都是通用的,它们也可以运用到 Java Web.这一系列 ...
- Java Web 高性能开发,前端的高性能
Java Web 高性能开发,第 2 部分: 前端的高性能 Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.Web 的思想是 ...
- Java Web 前端资源文件的路径问题
WEB-INF是Java Web应用的安全目录,在部署时用于存放class文件.项目用到的库(jar包).Java Web应用的配置文件web.xml. 浏览器不能访问此目录下的资源,比如在WEB-I ...
- Java Web高性能开发 - 前端高性能
作者:IBM developerWorks链接:https://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/著作权归作者所有.商业转载 ...
随机推荐
- AngularJS路由设置方法
Module.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/mall-home', { tem ...
- 《Java程序猿面试笔试宝典》之 什么是AOP
AOP(Aspect-Oriented Programming.面向切面编程)是对面向对象开发的一种补充,它同意开发者在不改变原来模型的基础上动态地改动模型从而满足新的需求.比如.在不改变原来业务逻辑 ...
- ES6 Promise catch
getJSON方法返回一个 Promise 对象,如果该对象状态变为resolved,则会调用then方法指定的回调函数:如果异步操作抛出错误,状态就会变为rejected,就会调用catch方法指定 ...
- js操作当前窗口
CreateTime--2017年7月21日09:58:34Author:Marydon js操作当前窗口 1.打开一个新的窗口(新的标签页) 实现方式:window.open(url) 实例一: ...
- Https与Http,SSL,DevOps, 静态代码分析工具,RFID, SSH, 非对称加密算法(使用最广泛的一种是RSA), 数字签名, 数字证书
在URL前加https://前缀表明是用SSL加密的. 你的电脑与服务器之间收发的信息传输将更加安全. Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定. http和h ...
- maven 动态版本 aliyun阿里云Maven仓库地址——加速你的maven构建
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 解决在IE9,IE10浏览器下,程序没有任何错误,easy ui页面不加载任何数据的问题
对于web应用程序,经常用到开发人员工具,按F12,可以调试脚本,可以查看监视网络,查看各页面加载时间,非常方便,今天在调试js时,不小心打开了兼容性视图, 之后每次打打开页面时,均不显示页面post ...
- Android推送方案
一. 常见的推送原理: 1)轮询(Pull)方式:应用程序应当阶段性的与服务器进行连接并查询是否有新的消息到达,你必须自己实现与服务器之间的通信,例如消息排队等.而且你还要考虑轮询的频率,如果太慢可能 ...
- java反射调用某个对象的方法
// 反射调用某个对象的方法 public Object invokeMethod(Object methodObject, String methodName, Object[] args) thr ...
- 在同一台服务器上启动多个 FreeSWITCH 实例
有时候,需要用到多个FreeSWITCH进行测试,或者需要在一台服务器上部署多个“不兼容”的系统.我们在这一节探讨一下怎么做. 背景故事 几年前我还在Idapted工作的时候,由于需要连接Skype及 ...