浙江 杭州

Dynamics.js-可创建物理运动动画效果的js库插件

系统分类: 网页特效 - jquery插件 - 其他jQuery插件 2017-05-25

人气2272

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


Dynamics.js是一款可以创建物理运动动画效果的js库插件。你可以使用它来制作任何DOM元素的CSS属性动画,也可以制作SVG属性动画和任何JAVASCRIPT对象动画。

安装

可以使用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 ]
})                
              

API

dynamics.animate(el, properties, options)

通过动画参数来动画一个元素到指定的状态。

  • el:一个DOM元素,一个JavaScript对象或一个元素数组。
  • properties:你想动画的对象的属性/值。
  • options:代表动画的对象。
    • type:动画的类型。如dynamics.springdynamics.easeInOut等,默认值为dynamics.easeInOut
    • frequency,friction,bounciness:指定你想使用的动画类型。
    • duration:动画持续时间,单位毫秒,默认值1000。
    • delay:动画的延迟时间,单位毫秒,默认值0。
    • complete:可选值,动画结束后的回调函数。
    • change:可选择,每一次改变时的回调函数。
dynamics.stop(el)

停止在元素上应用的动画。

dynamics.css(el, properties)

为动画元素指定当前浏览器前缀的CSS属性。

  • el:DOM元素。
  • properties:一个CSS属性的对象。
dynamics.setTimeout(fn, delay)

Dynamics.js有自己的setTimeout。因为requestAnimationFramesetTimeout在不同的浏览器中表现不一致。

  • fn:回调函数。
  • delay:单位毫秒。

返回唯一的ID号。

dynamics.clearTimeout(id)

清除前定义的timeout。

Dynamics and properties

dynamics.spring

  • frequency:默认值300。
  • friction:默认值200。
  • anticipationSize:可选项。
  • anticipationStrength:可选项。

dynamics.bounce

  • frequency:默认值300。
  • friction:默认值200。

dynamics.forceWithGravity 和 dynamics.gravity

  • bounciness:默认值400。
  • elasticity:默认值200。

dynamics.easeInOut, dynamics.easeIn 和 dynamics.easeOut

  • friction:默认值500。

dynamics.linear

没有属性。

dynamics.bezier

  • points:点和控制点的数组。

浏览器兼容

  • Safari 7+
  • Firefox 35+
  • Chrome 34+
  • IE10+

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:134.20KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1840.html 非特殊说明,本文版权归原作者所有,转载请注明出处
Dynamics.js-可创建物理运动动画效果的js库插件

我当前G币余额:0 已下载次数:0

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有0 评论)