|
阅读：7242回复：0
使用Move.js创建CSS3动画
在CSS3还未出现时，到在网页上添加一些动态效果，必须写太量的JS（javascript）.但CSS3的出现，为我们添加动画提供了添加的方法。只需要书写CSS就可以实现。
用CSS3来实现动画也比较简单，和CSS2一样。通过“属性：值;”即可以制作动画。CSS3的实现很简单，可是要在众多的浏览中，及众多的版本来兼容我们的CSS的动画，这对于一个不是专业的前端人员来说应该还是比较困难的。 如果，简单这个困难来，那就要介绍move.js给大家。 move顾名思义，就是移动,它可以让元素实现动画效果。 Move.js是一款简单小巧的模拟CSS3动画的js插件。该插件可以完成CSS3的各种动画效果：移动、变形、倾斜、背景色渐变、旋转等。并且可以在动画中使用各种easing效果。 下面就来介绍一下，move.js 中的一些常用函数。 set(prop, val) set()方法用于设置元素的css属性，他带有两个参数：css属性和属性值。示例用法： .set('background-color', '#CCC')
.set('margin-left', 500)
.set('color', '#222') 详细的调用方式为：
move('.box') //指定要添加动态的元素
.set('margin-left', 100) //设置属性
.end(); //指定完后，一定要调用end()表明指定结束add(prop, val)
add()方法用来增加其已经设置的属性值。该方法必须数值型值，以便用来增加。该方法必须有两个参数：属性值和其增量： .add('margin-left', 200)
在前面的代码片段调用后，会在其值的基础上增加200px。 sub(prop, val) sub()是add()的逆过程，他接受两个相同的参数，但其值将从属性值中减去 .sub('margin-left', 200)
rotate(deg) 正如名称所暗示的，该方法通过提供的数值作为参数来旋转元素。当方法被调用的时候通过附加到元素的 transform 属性上。下面的代码旋转元素90deg： .rotate(90) //相当于css transform:rotate(90deg); duration(n) 通过该方法，你可以设置动画的播放时间。例如：如下代码，2秒钟将元素从左侧往右移动200px： .set('margin-left', 200)
.duration('2s')
translate(x[, y]) translate()方法用于修改元素的默认位置，使用提供的坐标作为参数，如果仅设置一个参数，将作为x坐标，如果提供了第二个参数，将作为y坐标 .translate(200, 400) x() and y() x()方法用于调整元素的x坐标，y()方法用于调整元素的y坐标。两个方法的参数可以是正数也可以是负数，如下： .x(300) .y(-20) skew(x, y) kew()用于调整一个相对于x和y轴的角度。该方法可以被分为skewX(deg)和skewY(deg)两个方法： .scale(3, 3) scale(x, y) 该方法用于放大或压缩元素的大小，按照提供的每一个值，将调用transform的scale方法： .scale(3, 3) ease(fn) 如果你使用过CSS3过渡，你就了解ease函数作用在transition属性上。他指定了过渡的行为。每个 ease 函数是 in、out、in-out、snap、cubic-bezeir等。这些函数可以通过Move.js提供的ease()方法得到调用。例如： .ease('in').x(400)
.ease('cubic-bezier(0,1,1,0)').x(400)
end() 该方法用于Move.js代码片段的结束，他标识动画的结束。技术上，该方法触发动画的播放。该方法接受一个可选的callback回掉函数。代码如下： move('.box')
.set('background-color', 'red')
.duration(1000)
.end(function() {
alert("Animation Over!");
});
delay(n) 正如方法所暗示的，该方法提供一个时间的数值作为动画的延时。如下： move('.box')
.set('background-color', 'red')
.delay(1000)
.end();
then() 该方法是Move.js中一个最重要的函数。他用于分割动画为两个集合，并按顺序执行。如下动画被分为两步，通过then()方法实现分割 move('.box')
.set('background-color', 'red')
.x(500)
.then()
.y(400)
.set('background-color', 'green')
.end();以上的方法，是move.js中的基本方法，我们可以根据这些简单的，组合一些比较简复杂的动画，如下：
move(".section4 .title").scale(1.2).delay(2).end(function(){
move(".section4 .role-boss a").rotate(360).duration('1s').end(function(){
move(".section4 .role-manage a").rotate(360).duration('1s').end(function(){
move(".section4 .role-center a").rotate(360).duration('1s').end(function(){
move(".section4 .role-basic a").rotate(360).duration('1s').end(function(){
});
});
});
});
});
参考：https://segmentfault.com/a/1190000000443523 |
|
公众号
