dynamics.js

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

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

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

访问官网

GitHub

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 ]
})

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/1649