Bounce.js 优秀的的 CSS3 动画关键帧插件 - 文章教程

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

发布于 2019-01-27 字数 4743 浏览 2096 评论 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 的浏览器上工作。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

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

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0