动态.js

Dynamics.js 是一个 JavaScript 库，用于创建基于物理的动画

要查看一些演示，请查看dynamicsjs.com。

用法

下载：

• GitHub 发布
• 纳米：npm install dynamics.js
• 凉亭： bower install dynamics.js

包含dynamics.js到您的页面中：

<script src="dynamics.js"></script>

您可以为任何 DOM 元素的 CSS 属性设置动画。

var el = document.getElementById("logo")
dynamics.animate(el, {
  translateX: 350,
  scale: 2,
  opacity: 0.5
}, {
  type: dynamics.spring,
  frequency: 200,
  friction: 200,
  duration: 1500
})

您还可以为 SVG 属性设置动画。

var path = document.querySelector("path")
dynamics.animate(path, {
  d: "M0,0 L0,100 L100,50 L0,0 Z",
  fill: "#FF0000",
  rotateZ: 45,
  // rotateCX and rotateCY are the center of the rotation
  rotateCX: 100,
  rotateCY: 100
}, {
  friction: 800
})

以及任何 JavaScript 对象。

var o = {
  number: 10,
  color: "#FFFFFF",
  string: "10deg",
  array: [ 1, 10 ]
}
dynamics.animate(o, {
  number: 20,
  color: "#000000",
  string: "90deg",
  array: [-9, 99 ]
})

参考

dynamics.animate（el，属性，选项）

使用动画选项将元素动画化到属性。

• el 是一个 DOM 元素、一个 JavaScript 对象或一个元素数组
• properties 是要设置动画的属性/值的对象
• options 是表示动画的对象
  
  • type是动画类型: dynamics.spring, dynamics.easeInOut,… (默认: dynamics.easeInOut)
  • frequency, friction, bounciness,… 特定于您正在使用的动画类型
  • duration以毫秒为单位（默认值：1000）
  • delay以毫秒为单位（默认值：0）
  • complete （可选）是完成回调
  • change（可选）在每次更改时调用。两个参数被传递给函数。function(el, progress)
    • el 是它动画的元素
    • progress 是动画在 0 和 1 之间的进度

dynamics.stop(el)

停止应用在元素上的动画

dynamics.css（el，属性）

这是将 CSS 属性应用到具有正确浏览器前缀的元素。

• el 是一个 DOM 元素
• properties 是 CSS 属性的对象

dynamics.setTimeout（fn，延迟）

Dynamics.js 有自己的setTimeout. 原因是requestAnimationFrame和setTimeout有不同的行为。在大多数浏览器中，requestAnimationFrame不会在后台选项卡中运行，而setTimeout会。在使用setTimeout动画时，这可能会导致很多问题。我建议你使用动态的setTimeout和clearTimeout处理这些情况。

• fn 是回调
• delay 以毫秒为单位

返回一个唯一的 id

dynamics.clearTimeout(id)

清除之前定义的超时

• id 是超时 ID

dynamics.toggleSlow()

切换调试模式以减慢每个动画和超时。这对于调整动画的开发模式很有用。这可以Shift-Control-D在浏览器中使用激活。

动力学和属性

动力学.spring

• frequency 默认值为 300
• friction 默认值为 200
• anticipationSize （选修的）
• anticipationStrength （选修的）

动态.bounce

• frequency 默认值为 300
• friction 默认值为 200

dynamics.forceWithGravity 和 dynamics.gravity

• bounciness 默认值为 400
• elasticity 默认值为 200

dynamics.easeInOut、dynamics.easeIn 和 dynamics.easeOut

• friction 默认值为 500

动力学.线性

没有属性

动力学.贝塞尔曲线

• points 点和控制点数组

输出这种数组的最简单方法是使用曲线创建器。下面是一个例子：

[{"x":0,"y":0,"cp":[{"x":0.2,"y":0}]},
 {"x":0.5,"y":-0.4,"cp":[{"x":0.4,"y":-0.4},{"x":0.8,"y":-0.4}]},
 {"x":1,"y":1,"cp":[{"x":0.8,"y":1}]}]

贡献

编译：npm run build或npm run build:watch

运行测试： npm test

浏览器支持

致力于

• Safari 7+
• 火狐 35+
• 铬 34+
• IE10+

西尔维斯特

使用了 Sylvester.js 的一些代码（Vector 和 Matrix 的一部分）。

执照

麻省理工学院许可证 (MIT)

版权所有 (c) 2015 Michael Villar

特此授予任何人免费获得本软件和相关文档文件（“软件”）副本的许可，不受限制地处理本软件，包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可和/或出售软件的副本，并允许向其提供软件的人员这样做，但须符合以下条件：

上述版权声明和本许可声明应包含在本软件的所有副本或重要部分中。

该软件“按原样”提供，不提供任何形式的明示或暗示的保证，包括但不限于适销性、特定用途的适用性和不侵权的保证。在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任承担责任，无论是在合同诉讼、侵权行为或其他方面，由软件或软件的使用或使用或其他原因引起的或与之相关的软件。