javaｓｃｒｉｐｔ动画浅析
今天，小学生们根据他们前辈的能力写了这篇文章，根据他们的粗浅看法，希望能为你打开一扇窗口，让你窥探Javaｓｃｒｉｐｔ（以下简称JS）动画。js是如何创建动画效果的
结合setInterval和setTimeout由浏览器提供的API，高频率可以改变DOM元素的一些属性，并创建一个动画视觉效果。JS动画，看起来非常光滑，需要一个良好的转换算法，它不与主机工作，程序写的好，如果浏览器CPU电脑太老了，表现不佳，也会出现卡顿，甚至卡死。
函数的执行是浏览器的任务，动画能很长一段时间平滑地设置帧，并且不会失去性能。浏览器不会愚蠢到做一个DOM操作和渲染一个页面，它集成在一个周期的所有DOM操作和使一个统一的渲染，这个周期大约是16.7ms，将会有不同的浏览器几毫秒，setTimeout二参数设置为1000 / 60.however是合理的，很显然，setTimeout运行机制将是明确的，这个时间是不可靠的，它会根据实际情况，有一些甚至相当大的延迟，所以有这样的API我不想知道你的浏览器会提供，但它只是一个帧的动画，你给我当你渲染它。答案是，requestanimationframe，它允许函数被渲染的浏览器渲染，和时间是可靠的。注意，此方法是当前浏览器和IE10 +支持。
现在可以将一个简单的requestanimationframe，这将在下面的例子。
window.requestanimframe =（功能）{
返回window.requestanimationframe | |
window.webkitrequestanimationframe | |
window.mozrequestanimationframe | |
函数（回调）{
window.settimeout（回调，1000 / 60）；
}；
}）；
更详细的封装可以在张欣旭的博客上看到：张欣旭：requestanimframe。让我们去。
动画功能的写作
与requestanimationframe，以下是思考如何写一个动画功能。一般来说，我们会给一个毫秒级的价值中，这限制了动画在这个时间做。这里是一个小例子球从100px到800px在页面左侧的一个例子，，写一个动画功能：戳我查看演示。
无功电= document.getelementbyid（块）；
var = Date.now（开始）； / /动画的开始时间。
var在= 1000；动画以秒为单位执行。
var = 0；
RequestAnimationFrame（函数f（）{）
如果（P = 1）{元。风格。左=800px ；如果} / /发现动画已经执行，设置结束点的元素。
别的{
P =（Date.now（）启动）/时；
元。风格。左= 100 + 700 * P +PX； / / 100px从一开始，统一向右移动，移动700px总；
RequestAnimationFrame（F）；
}
}）
上述函数中有一个关键变量：p，即百分比，可以称之为动画的完成度。它是基于当前的时间计算，从动画的开始，它将从1改为0 ~匀速。当它是1，整个动画执行。在这个函数中，P是乘以700的运动长度，得到一个价值0-700恒速。当它被添加到初始值的100，它可以模拟移动从100px球800px。
想象一下如果用红色标出的运动方程被转换成T型，左= 100 + 700*P随着两个正方形的增大而增大，球的移动速度越来越快。
接下来，我们要为P做这篇文章。
吐温算法与慢动作效果
接下来，我将列出一些常用的慢动作算法。根据这些算法，可以对上述匀速运动函数的运动方程进行修改，达到良好的动画效果。
1.2侧慢动作：P * P
2.3侧慢速运动：P * P·P
3.4侧慢动作：P×P·P·P
4.5侧慢速运动：P×P·P·P
5。正弦慢动作：Math.sin（P *数学。π/ 2）
6。指数曲线的慢动作：Math.pow（10×（P-1））
7。圆曲线的慢动作：Math.sqrt（1 -（P-1）*（P-1））
8。超范围三倍：P P *（2.70158 * p-1.70158）
检查它，例如，现在我想实现一个球到右侧，有一个左蓄力动画，我只要第一个演示，电子的运动方程。风格。左= 100 + 700×p×p×（2.70158×p-1.70158）+PX就行，看：戳我查看演示。
事实上，每种减速算法都可以演变成三种慢动作模式，即慢（慢、快、慢）、慢（快、快）、慢（慢、慢、快）。
作为2方的慢运动的一个实例，它本身是一个统一的加速过程，从而缓解是P *成为缓解了-（P *（P-2））。有慢动作更详细的解释，如在他的博客阳光：Javaｓｃｒｉｐｔ动画的运动算法的详细解释分析。
下一步是放大这个动作。在缓慢移动集成演示，戳我。
js动画能做什么
除了上述低迷的影响，采用常用的数学公式也可以实现一些周期性的运动，如球类运动、简谐振动的球的速度，如果有兴趣，请猛戳演示。
那么js动画能做什么呢这需要我们个人的想象力。最上面的演示是操纵单个属性，如左，使DOM元素转移。事实上，在运动方程，任何风格的元素可以逐渐改变。想象一下，设置不透明度0 ~ DOM元素1 2方慢运动是一种简单的jQuery淡出功能。制作一个DOM元素的高度从一开始就是一个简单的jQuery slideDown功能。更重要的是，我们不应该忘记，在动画的过程中，我们不仅可以操纵的一种属性，为动画带来了无限的可能性，但它变得越来越有趣：演示：一个球从大到小的变化。
再想想，使用CSS3属性，如箱的影子，变换，将更加华丽。
总结
如上所述，CSS3属性的使用，但如果浏览器支持CSS3属性，这是没有必要使用JS来做this.css3自己的动画属性，可以快速方便地实现很酷的动画效果，并能使GPU加速。什么是不够的在美国是唯一的现代浏览器的支持js的动画赢得了可以与低版本的浏览器兼容，但效果通常是有限的（只有动画在一般意义上，没有帆布）。
动画只是角操作DOM的魅力所在，而数学和电脑总是碰撞着耀眼的火花。继续学习js，这是一门神奇的语言，而且还应该了解一些数学知识，经常为解决问题带来捷径。
以上是本文的全部内容，希望大家能喜欢。