网站首页 » 前端开发 » 前端工具 » Dynamics.js 一个简单强大的物理运动动画库
上一篇:
下一篇:

Dynamics.js 一个简单强大的物理运动动画库

前言

这是一篇没有什么技术含量的文章,因为本次只是来分享一个简单但强大的物理运动动画库,他们可让你的元素、对象、SVG 变得魅力十足。我是在学习Canvas 过程中用到这个 JavaScript 动画库的,觉得还不错,所以就单独成文,把它分享给大家。虽然网上有很多关于 Dynamics.js  的资料,但我毕竟是我,我只是记录自己的一切。

官网首页的清爽让我不得不截图以证清白:

Dynamics.js 一个简单强大的物理运动动画库

虽然图片有点抢镜,但我就是喜欢。

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

Dynamics.js 之旅

引入 dynamics.min.js ,这个没什么好说的,地球上做代码的人都知道。

官方首页已经对应放出了上面说到的三个使用场景(元素、对象、SVG)的例子,直接去观赏就好。用法也非常地简单,不管你复制些官方示例代码你过目过目:

简单到没朋友
dynamics.animate(document.querySelector('.circle'), {
  translateX: 350
}, {
  type: dynamics.spring
})

这是最简单的用法,在这个基础上你还可以给动画设置其它参数,来实现不同的动画效果,官网首页也有提供一个简单好用的参数设置功能,重点是可见即可得,鼠标拖一拖,就可以给基本的动画效果化妆啦,你还等什么?

更详细的文档可以看这里:https://github.com/michaelvillar/dynamics.js#usage。其实真的没什么好说的,只是觉得它还不错,想告诉你有这个东西而已,至于用不用,你自己看着办,其实,不用也可以先收藏,因为你不知道什么时候会用到它。

之前写的一个效果也用到它了《JavaScript 实现照片墙效果》。有兴趣的可以去看看,效果还是挺不错的。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/dynamics-js-a-javascript-library-to-create-physics-based-animations/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END