可视化CSS3动画代码生成js库插件

PetitQ 其他代码 2019-1-20 2.17K 0 0

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

使用方法

要使用 bounce.js 来创建 CSS3 动画，首先要创建一个 Bounce 对象。
var bounce = new Bounce();
制作 CSS3 动画前必须先创建 Bounce 对象，然后使用该对象来添加各种动画组件：scale、rotate、translate 和 skew。你可以为 CSS3 动画定义一个名称，或者直接在该对象上应用页面上的某个元素，添加 CSS3 动画组件

也想出现在这里？联系我们吧

scale

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

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

上面代码中的 from 和 to 参数定义了元素在 X 轴（宽度）和 Y 轴（高度）上 scale 的比例。这个例子使元素从 50%的大小变化到 100%的大小。点击这里查看这个 demo。

rotate

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

上面代码中的 from 和 to 参数定义了元素旋转的度数。点击这里查看这个 demo。

translate

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

上面代码中的 from 和 to 参数定义了元素在 X 轴和 Y 轴上移动的距离（单位像素）。上面的例子将元素向右移动 100 像素。点击这里查看这个 demo。

skew

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

上面代码中的 from 和 to 参数定义了元素在 X 轴和 Y 轴倾斜的度数。上面的例子在 X 轴上倾斜 20 度。点击这里查看这个 demo。

通用参数

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

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，它可以在 onComplete 的参数上使用：

bounce.applyTo($(".animation-target")).then(function() {

```
  console.log("Animation Complete"); 
```
```
});
```

Remove

你也可以手动移除一个 Bounce 动画，bounce.remove()

综合应用

下面是一个综合应用的例子,点击这里查看这个 demo：

```
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 js 动画库可以在所有支持 3D transforms 和 keyframe animations 的浏览器上工作。

可视化 CSS3 动画代码生成 js 库插件

已有 542 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

可视化CSS3动画代码生成js库插件

使用方法

scale

rotate

translate

skew

通用参数

define

Remove

综合应用

浏览器支持

可视化 CSS3 动画代码生成 js 库插件

相关文章

基于WEBGL的3D立方体特效

可视化CSS3渐变背景颜色代码生成

基于Bootstrap 3日期时间jQuery选择器

发表回复取消回复

热销模板

其他代码

使用方法

scale

rotate

translate

skew

通用参数

define

Remove

综合应用

浏览器支持

可视化 CSS3 动画代码生成 js 库插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复