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

时间 2019-11-10

标签可视化 css3 css 动画代码生成插件 bounce.js bounce 栏目 CSS 繁體版

原文原文链接

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

php

查看演示下载插件html

　　安装
　　能够经过Bower 或 NPM来安装Bounce.js。
html5

$ bower install bounce.js
web
# OR
npm
$ npm install bounce.js编程

复制代码promise

　　使用方法
　　要使用bounce.js来建立CSS3动画，首先要建立一个Bounce对象。
浏览器

var bounce = new Bounce();app

复制代码函数

　　制做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的浏览器上工做。