探索动画的新境界：Bounce.js

探索动画的新境界：Bounce.js

Bounce.js，一个强大而直观的工具和JavaScript库，专为创建迷人CSS3关键帧动画设计。在bouncejs.com上，你可以直接生成静态关键帧，无需额外的JavaScript支持；如果你需要应用程序动态生成这些动画，Bounce.js库将是你的好帮手。

安装

通过Bower或NPM轻松安装：

$ bower install bounce.js 
# 或者
$ npm install bounce.js

你也可以从GitHub发布页面查看并下载所有版本。

使用

要创建动画，首先实例化一个新的Bounce对象：

var bounce = new Bounce();

使用scale，rotate，translate和skew方法构建你的动画，并可将其定义为命名动画以供以后使用，或者直接应用到网页元素上。

添加动画组件

如上所述，通过调用scale，rotate，translate和skew方法构建你的动画。所有这些方法都接受一些共同的选项参数以及from和to定义动画的起始和结束点。

scale

var bounce = new Bounce();
bounce.scale({
  from: { x: 0.5, y: 0.5 },
  to: { x: 1, y: 1 }
});

这将元素从半尺寸动画到全尺寸。（实时示例）

rotate

var bounce = new Bounce();
bounce.rotate({
  from: 0,
  to: 90
});

这将元素旋转90度向右。（实时示例）

translate

var bounce = new Bounce();
bounce.translate({
  from: { x: 0, y: 0 },
  to: { x: 100, y: 0 }
});

这将元素向右移动100像素。（实时示例）

skew

var bounce = new Bounce();
bounce.skew({
  from: { x: 0, y: 0 },
  to: { x: 20, y: 0 }
});

这将元素在水平轴上倾斜20度。（实时示例）

共享动画参数

所有上述方法还接受以下附加参数：

• duration：动画时长（毫秒）。默认为1000。
• delay：动画延迟时间（毫秒）。默认为0。
• easing：可选的动画缓动效果，包括"bounce"，"sway"，"hardbounce"，"hardsway"。默认为"bounce"。
• bounces：动画中的弹跳次数。默认为4。
• stiffness：动画弹跳的硬度，值范围为1-5。默认为3。

动画使用

构建好动画后，可以选择定义为命名的关键帧动画，或直接应用到DOM元素。

define

var bounce = new Bounce();
bounce.rotate({
  from: 0,
  to: 90
});
bounce.define("my-animation");

定义一个名为“my-animation”的动画。然后可以在CSS中使用animation: my-animation 1s linear both;。

applyTo

var bounce = new Bounce();
bounce.rotate({
  from: 0,
  to: 90
});
bounce.applyTo(document.querySelectorAll(".animation-target"));
// 或者使用jQuery：bounce.applyTo($(".animation-target"));

直接将动画应用到单个或一组元素。该方法也接受一些选项：

• loop：如果设为true，则循环播放动画。默认为false。
• remove：动画结束后移除它。某些浏览器下，当动画结束时，元素会回到其原始状态。默认为false。
• onComplete：动画完成后运行的回调函数。

使用jQuery时，该方法返回一个Promise替代onComplete参数：

bounce.applyTo($(".animation-target")).then(function() {
  console.log("Animation Complete");
});

Remove

已定义的动画可以随时手动删除：

bounce.remove()

浏览器兼容性

使用Bounce.isSupported()检查当前浏览器是否支持。

这个库应该在支持3D转换和keyframe动画的所有浏览器中工作。

全局示例

以下是构建工具中Splat动画预设的完整示例，然后将其应用于类名为animation-target的元素：

var bounce = new Bounce();
bounce
  .translate({
    from: { x: -300, y: 0 },
    to: { x: 0, y: 0 },
    duration: 600,
    stiffness: 4
  })
  .scale({
    from: { x: 1, y: 1 },
    to: { x: 0.1, y: 2.3 },
    easing: "sway",
    duration: 800,
    delay: 65,
    stiffness: 2
  })
  .scale({
    from: { x: 1, y: 1},
    to: { x: 5, y: 1 },
    easing: "sway",
    duration: 300,
    delay: 30,
  })
  .applyTo(document.querySelectorAll(".animation-target"));

开发

如果你想在本地运行Bounce.js网站并编辑JavaScript库，只需克隆此仓库并执行以下命令（假设你已经安装了Node，NPM和Bower）：

# 安装依赖
$ npm install
$ bower install

# 在localhost:9000启动服务器。监听文件变化，自动重新编译并刷新浏览器
$ grunt serve

# 运行测试
$ grunt test

利用Bounce.js，你可以创造出引人入胜且富有表现力的动画，它简化了CSS3动画的开发过程，并提供了无尽的设计可能性。立即开始探索吧！