dynamics.js 介绍
Dynamics.js 是用来创建具有物理运动效果动画的 JavaScript 库，可以用来制作基于 DOM 元素的 css 属性动画，也可以制作 SVG 属性动画和任何 JavaScript 对象动画。
dynamics.js安装
可以使用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 ]
})
GitHub:https://github.com/michaelvillar/dynamics.js
网站描述:创建具有物理运动效果动画的JS库
dynamics.js
小编说
以上是编程之家为你收集整理的dynamics.js全部内容。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。