Dynamics.js - 用于創建基于physics的CSS動畫

jopen 10年前發布 | 17K 次閱讀 CSS 前端技術 Dynamics.js

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

項目主頁：http://www.baiduhome.net/lib/view/home/1434444640801

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！