物理动画插件-dynamics.js

下载: https://www.bootcdn.cn/dynamics.js/
官网:http://dynamicsjs.com/

您可以对任何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，properties，options）

使用动画选项为元素设置动画。

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, properties)

• 这是使用正确的浏览器前缀对元素应用CSS属性。
  el 是一个DOM元素
  properties 是CSS属性的对象

dynamics.setTimeout（fn，delay）

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

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

返回唯一ID

dynamics.clearTimeout（ID）

• 清除之前定义的超时

id 是超时ID

dynamics.toggleSlow（）

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

动力学和属性

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 点和控制点的数组

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

[{ “ 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 }]}]

浏览器支持

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