下载: 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 +
