可视化CSS3动画代码生成js库插件 | 您所在的位置:网站首页 › css动画插件 › 可视化CSS3动画代码生成js库插件 |
Bounce.js是一款功能非常强大的可视化CSS3动画代码生成js库插件。该js库插件提供了一个在线APP,通过该APP可以在可视化的条件下编辑CSS3的各种动画效果,如移动、旋转、倾斜、easing等效果,编辑完成后可以直接获取该CSS3帧动画的代码,复制代码带你的页面中即可在你的页面上获得与该动画一样的效果。此外,你也可以单独使用Bounce.js,通过js代码来完成各种CSS3动画效果。Bounce.js能与jQuery完美结合。 安装可以通过Bower 或 NPM来安装Bounce.js。 $ bower install bounce.js # OR $ npm install bounce.js 使用方法要使用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的浏览器上工作。 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |