Dynamics.js-可创建物理运动动画效果的js库插件

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+