dynamics.js

dynamics.js

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 ]

})

网站地址:http://dynamicsjs.com

GitHub:https://github.com/michaelvillar/dynamics.js

网站描述:创建具有物理运动效果动画的JS库

dynamics.js官方网站

官方网站：http://dynamicsjs.com

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。