bounce.js:创建有趣的CSS3动画

bouncejs

Bounce.js 是一个漂亮的关键帧动画生成工具和类库,基于CSS3实现。bouncejs.com提供的工具支持生成静态关键帧,不需要使用额外JavaScript代码,如果想在你的应用程序中动态生成这些代码,可以使用Bounce.js类库。

安装

可以通过Bower或者NPM安装:

或者

你可以从Github上浏览和下载所有的发行版本

使用方式

要创建一个动画,可以实例化一个名为Bounce的新对象:

首先使用Bounce对象缩放、旋转、平移和倾斜四种不同的组件来构建动画。这样既可以定义成已命名的动画供以后使用,或者直接在页面中使用这些元素。

添加动画组件

正如刚才所提到,你可以像使用Bounce.js工具那样调用scale(缩放)、rotate(旋转)、translate(平移)和skew(倾斜)方法创建自己的动画。所有的这些方法都接受一些共同选项,from和to参数定义了动画的起始点。请注意所有的这些方法都是链式调用。

scale

from和to参数定义了元素缩放X(宽度)和Y(高度)的比率。上面的例子绘制了从半个到整个元素动画

rotate

from和to参数定义了旋转的度数。以上例子将元素向右旋转了90°。动画

translate

from和to参数定义了在X方向和Y方向平移的像素。上面例子将元素向右移动100像素。动画

skew

from和to参数定义了元素在X和Y轴的倾斜度。上面的例子中,动画的倾斜度为在横轴向上20°。动画

常用动画参数

所有方法都接受这些附加参数:

  • 持续时间:动画在中的持续时间(ms)。默认为1000ms。
  • 延迟:动画延迟时间(ms)。默认为0。
  • 缓冲:像“bounce”、“sway”、“hardbounce”、“hardsway”。这些都是相同工具中的“缓冲”菜单。默认为“bounce”。
  • 跳动:动画的跳动次数。默认为4次。
  • 刚度(stiffness):在动画中跳出的刚度值是在1到5之间。默认值是3。

    如何使用动画

    一旦创建了动画,可以选择把它定义成名为关键帧动画,或者直接把它运用到DOM节点的任何一个元素。

    define

通过给定的名字来定义动画。可以在你的CSS动画参数中使用:my-animation 1s linear both;

applyTo

直接在单个或者元素列表中使用动画。这种方法可以接受许多参数:

  • 循环:如果设置为true,则无限循环动画。默认是false。
  • 移除:动画一旦完成就会被移除。如果你的动画结束于一个不同于之前的元素状态,那么该元素在一些浏览器中标返回它的原始状态。默认值为false。
  • 完成度:动画完成后运行一个回掉函数。如果你正在使用Jquery,方法将会返回一个允许你使用onComplete参数来替换:

Remove

即使动画定义了也可以手动移除:

浏览器支持

你可以通过如下方式来检查当前浏览器的支持度:

运行类库需要浏览器同时支持3D旋转关键帧动画

完整示例

这里有一个关于在工具中建立Splat动画预设并且把它运用到一个animation-target类的元素中。

开发

如果你想在本地运行Bounce.js的网站并编写JavaScript类库,可以克隆这个报告并且按照如下命令运行(确定你已经安装了Node、NPM和Bower):

在本地主机:9000端口上启动服务。观察变化,自动编译的文件并刷新浏览器。

运行测试

该Bounce对象是你第一次通过scale、rotate、translate和skew不同的组件来构建的动画。这样既可以被定义成已命名的动画供以后使用,也可以直接在页面中使用这些元素。

官方网站:http://bouncejs.com/
开源地址:https://github.com/tictail/bounce.js

2 6 收藏

资源整理者简介:王涛

java程序员,极客爱好者 个人主页 · 贡献了12个资源 · 1 ·  


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1440 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer