Dynamics.js是一款可以创建物理运动动画效果的js库插件。你可以使用它来制作任何DOM元素的CSS属性动画，也可以制作SVG属性动画和任何JAVASCRIPT对象动画。

安装

可以使用bower或nmp来安装Dynamics.js插件。

bower install dynamics.js
npm install dynamics.js

在页面中引入dynamics.js文件。

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

使用方法

你可以制作任何HTML 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 和 rotateCY 是旋转的中心点
  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 ]
})

API

dynamics.animate(el, properties, options)

通过动画参数来动画一个元素到指定的状态。

  • el：一个DOM元素，一个JavaScript对象或一个元素数组。
  • properties：你想动画的对象的属性/值。
  • options：代表动画的对象。
    • type：动画的类型。如dynamics.spring，dynamics.easeInOut等，默认值为dynamics.easeInOut。
    • frequency,friction,bounciness：指定你想使用的动画类型。
    • duration：动画持续时间，单位毫秒，默认值1000。
    • delay：动画的延迟时间，单位毫秒，默认值0。
    • complete：可选值，动画结束后的回调函数。
    • change：可选择，每一次改变时的回调函数。
dynamics.stop(el)

停止在元素上应用的动画。

dynamics.css(el, properties)

为动画元素指定当前浏览器前缀的CSS属性。

  • el：DOM元素。
  • properties：一个CSS属性的对象。
dynamics.setTimeout(fn, delay)

Dynamics.js有自己的setTimeout。因为requestAnimationFrame和setTimeout在不同的浏览器中表现不一致。

  • fn：回调函数。
  • delay：单位毫秒。

返回唯一的ID号。

dynamics.clearTimeout(id)

清除前定义的timeout。

Dynamics and properties

dynamics.spring

  • frequency：默认值300。
  • friction：默认值200。
  • anticipationSize：可选项。
  • anticipationStrength：可选项。

dynamics.bounce

  • frequency：默认值300。
  • friction：默认值200。

dynamics.forceWithGravity 和 dynamics.gravity

  • bounciness：默认值400。
  • elasticity：默认值200。

dynamics.easeInOut, dynamics.easeIn 和 dynamics.easeOut

  • friction：默认值500。

dynamics.linear

没有属性。

dynamics.bezier

  • points：点和控制点的数组。

浏览器兼容

  • Safari 7+
  • Firefox 35+
  • Chrome 34+
  • IE10+