当前位置:天才代写 > tutorial > 网页教程 > css3教程_可视化CSS3动画代码生成js库插件-Bounce.js

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

2018-05-18 08:00 星期五 所属: 网页教程 浏览:340

Bounce.js是一个非常强大的可视化CSS3教程动画代码生成的js库插件。库插件提供了一个在线应用程序的JS,应用程序可以通过各种CSS3动画效果进行编辑,比如在视觉条件下的运动,旋转,倾斜,缓解等效果,直接可以帧的编辑后访问CSS3动画代码,将代码复制到你的页面可以得到你的页面上的动画相同的效果。此外,您还可以使用Bounce.js单独通过js代码来完成不同的CSS3动画。 Bounce.js与jQuery完美结合。

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

 

  安装
  可以通过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教程-添加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()

来自:编辑从其他媒体精选jQuery之家教程相关文章转载,仅供网友学习和交流.

#p#分页标题#e#

 以上就是css教程的动画代码生成了,还有就是Bounce js动画库可以在所有支持3D transforms和keyframe animations的浏览器上工作。了解更多相关资讯或视频教程欢迎进入课课家查询观看!

 

    关键字:

天才代写-代写联系方式