Dynamics.js - 用于创建基于physics的CSS动画
jopen
9年前
Dynamics.js是一个JavaScript库用于创建基于physics的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 ] })