Bounce.js 优秀的的 CSS3 动画关键帧插件

发布于 2019-01-27 字数 4743 浏览 757 评论 0

Bounce.js是一款功能非常强大的可视化 CSS3 动画代码生成插件。该插件提供了一个在线 APP,通过该 APP 可以在可视化的条件下编辑 CSS3 的各种动画效果,如移动、旋转、倾斜、easing 等效果,编辑完成后可以直接获取该 CSS3 帧动画的代码,复制代码带你的页面中即可在你的页面上获得与该动画一样的效果。此外,你也可以单独使用 Bounce.js,通过js代码来完成各种 CSS3 动画效果。Bounce.js 能与 jQuery 完美结合。

安装

可以通过 Bower 或 NPM 来安装 Bounce.js。

$ bower install bounce.js
$ npm install bounce.js

使用方法

要使用 bounce.js 来创建 CSS3 动画,首先要创建一个 Bounce 对象。

var bounce = new Bounce();

制作CSS3动画前必须先创建 Bounce 对象,然后使用该对象来添加各种动画组件:scalerotatetranslateskew。你可以为CSS3动画定义一个名称,或者直接在该对象上应用页面上的某个元素。

添加 CSS3 动画组件

scale

如上面所说的,你要使用 scalerotatetranslateskew 方法来创建动画。所用这些方法都接收一定数量的参数,如 from 和 to 参数定义动画元素的开始和结束位置。所用这些方法都是可以链式编程的。

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

上面代码中的 from 和 to 参数定义了元素在X轴(宽度)和Y轴(高度)上的比例。这个例子使元素从 50% 的大小变化到 100% 的大小。

rotate

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

上面代码中的 from 和 to 参数定义了元素旋转的度数。

translate

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

上面代码中的 from 和 to 参数定义了元素在X轴和Y轴上移动的距离(单位像素)。上面的例子将元素向右移动100像素。

skew

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

上面代码中的 from 和 to 参数定义了元素在 X 轴和 Y 轴倾斜的度数。上面的例子在 X 轴上倾斜 20 度。

通用参数

上面的所以方法都可以使用下面的参数:

  • duration:CSS3 动画的持续时间,单位毫秒,默认值 1000。
  • delay:CSS3 动画的延迟时间,单位毫秒,默认值 0。
  • easing:easing 效果。可选值有:"bounce", "sway", "hardbounce", "hardsway",默认值为:bounce
  • bounces:The number of bounces in the animation. Defaults to 4.
  • stiffness:动画反弹的硬度。值必须在 1-5 之间,默认值 3。

应用举例

当你使用 Bounce.js 来制作 CSS3 动画的时候,你可以选择创建帧动画,或者直接将动画应用到网页元素上。

define

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

通过给定的名称来定义一个 CSS3 帧动画。你可以在 CSS 文件中使用 animation: my-animation 1s linear both; 来应用这个动画效果。

applyTo

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

你也可以将动画效果直接应用到单个或一组元素上。使用这个方法还能接受下面的参数:

  • loop:如果该参数设置为 true 则动画无限循环。默认值为 false
  • remove:当动画结束后就移除该动画。如果动画的接受状态和开始状态不一样,那么元素在某些浏览器上会回到它的初始状态。默认值为 false
  • onComplete:在动画结束后的回调函数。

如果你使用jQuery,该方法将返回一个promise,它可以在的参数上使用:

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

Remove

你也可以手动移除一个 Bounce 动画。

bounce.remove()

综合应用

下面是一个综合应用的例子:

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: 3, y: 1 },
  easing: "sway",
  duration: 300,
  delay: 30,
}).applyTo(document.querySelectorAll(".animation-target"));

浏览器支持

你可以通过下面的方法来检测当前的浏览器是否支持 Bounce 生成的 CSS3 动画。

Bounce.isSupported()

Bounce  动画库可以在所有支持 3D transformskeyframe animations 的浏览器上工作。

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!