除了Animate，还有它！

程序员老鱼

发布于 2022-12-02 11:17:47

1.2K0

发布于 2022-12-02 11:17:47

文章被收录于专栏：前端实验室

Animate 是目前最通用的CSS3 动画库。但今天，大师兄要给大家推荐另一款非常简单和优雅的支持CSS3动画的JavaScript库：Move.js

Move.js 是一个运动的Javascript库,它支持CSS3的动画,不过不需要用CSS3代码去编写,只需要用avascript编写就可以.

Move.js的好处相对于原生如下:

使用前准备工作

1.在cdnjs中搜索Move.js。2.把Move.js外链放到页面中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/move.js/0.5.0/move.js"></script>

注意这里使用到了jQuery。因为动画效果需要选中元素

基础调用

Move.js 的使用基本分三步走：

获取动画的move实例
定义实例的动画效果行为
执行动画

其中，1和3是固定的模式。

通过 move( $obj ) 返回动画的move实例。

var $Obj = move( $('#role') );

通过 .end... 执行动画。

这里特别需要注意end(()-> {...})函数的调用。如果没有此语句，动画不会被执行。 至于里面的回调函数，这是可有可无的。使用回调函数主要是为了实现多重嵌套。

动画行为举例

.set方法用于设置动画元素的CSS样式，示例：

$Obj.set('margin-left', '200px')
  .end();

注意不是$Obj.set('margin-left', 200); 需要转换成 200PX，才能出现动画效果。

在上例中，将动画元素左偏移到200像素的位置。

.add方法将元素的某一属性值递增，示例：

$Obj.add('margin-left', 10).end(); // 参数2必需是数值！

在上例中，每执行一次动画元素会在当前位置基础上向左偏移10像素。

.rotate(数值)，将元素旋转指定的角度，示例：

$Obj.rotate(30).end();

在上例中，将动画元素旋转30度。

.scale(x[, y])、.scaleX(值)、.scaleY(值)将动画元素放大或缩小指定的倍数。

$Obj.scale(3).end();

在上例中，将动画元素30度放大3倍。当然，X或Y方向上放大倍数可以不一样。

.skew(x[, y])、.skewX(值) 、.skewY(值) 将动画元素斜切。

$Obj.x(300)
  .skew(50)
  .set('height', 20)
  .end

示例中，X方向上移动300的距离，斜切50，高度变为20px。

.ease( in|out|in-out|snap|cubic-bezeir ) 定义动画过渡行为，可选值： in 以慢速开始 out 以慢速结束 in-out 以慢速开始，以慢速结束 snap 快速 cubic-bezeir(n,n,n,n) 贝塞尔曲线,n值在0-1之间

move('#example .box1').x(400).end();
move('#example .box2').ease('in').x(400).end();
move('#example .box3').ease('out').x(400).end();
move('#example .box4').ease('in-out').x(400).end();
move('#example .box5').ease('snap').x(400).end();
move('#example .box6').ease('cubic-bezier(0,1,1,0)').x(400).end();