dynamics.jsJavascript 动画库
dynamics.js 是一个 Javascript 库，可以创建基于物理的 CSS 动画。
使用示例：
包含 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 ]
})评论