easy

DocsVersion : 1.0.0

anim( options )

原型方法Define in : anim.js

动画模块的基础方法,自定义的动画效果都是通过该方法实现。其他预定义的动画效果 show、hide、slideDown、slideUp、fadeIn、fadeOut 都是通过该基础方法实现的。

参数
  • options
    Object
    必需

    该参数支持简写形式和多选可配置形式。
    简单的动画,可以直接用 CSS 属性和属性值以 key/value 的形式传参( 有单位的属性值一定要带单位 ),属性名就是需要实现的动画效果,属性值就是动画的终点值。
    如果要自定义动画初始值、时间、缓动效果和动画完成的回调就可以使用多选可配置形式的参数。

下表列出多选可配置形式的参数的详细说明。

参数 数据类型 说明
complete Function

动画完成时执行的回调函数,该回调函数的 this 指向动画元素。

duration Number

完成动画所需的时间,默认的时间是 400ms。只接受数值类型的属性值,单位是 ms。

easing String

缓动效果的名称,支持的缓动效果有:

linear( 匀速运动 ), easeIn, easeOut, easeBoth, easeInStrong, easeOutStrong, easeBothStrong, easeOutQuart, easeInOutExpo, easeOutExpo, swing, swingFrom, swingTo, backIn, backOut, bounce, doubleSqrt

默认的缓动效果是 swing。

如果上面这么多缓动效果都不能满足你的需求,还可以对 E.easing 对象进行扩展,这样就可以支持自定义的缓动效果,easy.js 支持的是单个参数的缓动函数。

from Object

动画开始时的初始样式,以 key/value 的形式传参( 有单位的属性值一定要带单位 ),属性名就是需要实现的动画效果,属性值就是动画的初始值。

如果无该参数,动画模块会获取动画元素的默认的计算样式,有该参数,则先设置初始样式,这在某些场景下会比较有用。

该参数还有一个很大的用处,如设置动画元素的 top 为 50%,但是在某些浏览器中获取到的默认样式却是精确的以 px 为单位的值。初始样式的单位是 px 而结束样式的单位是 %,这样进行动画必然会出错。为了确保单位相同,可以在动画开始时强制设置和结束样式相同的单位值。

from 设置的属性名必须和 to 设置的属性名相同,如果不同则会忽略掉。

reverse Boolean

是否进行反向动画,反向动画就是当动画运行到终点值的时候,又反过来运行动画到开始时的状态。默认为 false。

to Object

动画结束时的 CSS 属性和属性值,以 key/value 的形式传参( 有单位的属性值一定要带单位 ),属性名就是需要实现的动画效果,属性值就是动画的结束值。

该参数也接受 += 和 -= 这样的传参,这样就可以完成累加或累减的动画效果。

返回值
  • easyJS Object

    返回 easyJS Object 自身,便于链式调用。

例子1

对 div 元素的宽度值进行动画。

box1
E( '#box1' ).anim({ width : '0px' });

运行

例子2

对 div 元素的高度值进行动画,并允许反向动画。

box2
E( '#box2' ).anim({ 
    to : { height : '0px' },
    reverse : true
});

运行

例子3

对 div 元素的 left 值进行动画。

box3
E( '#box3' ).anim({ 
    to : { left : '570px' },
    easing : 'bounce',
    duration : 800
});

运行

例子4

对 div 元素的背景颜色、边框颜色、文本颜色多个属性值进行动画。

box4
E( '#box4').anim({
    to : {
        backgroundColor : '#028fc4',
        color : '#000',
        borderTopColor : '#2c2c2c',
        borderRightColor : '#2c2c2c',
        borderBottomColor : '#2c2c2c',
        borderLeftColor : '#2c2c2c' 
    },
    duration : 2000
});

运行

例子5

对 div 元素的背景图片进行动画。

box5
E( '#box5' ).anim({
    to : { backgroundPosition : '-10px -10px' }, 
    duration : 6000, 
    easing : 'easeOut' 
});

运行

例子6

对 div 元素的 borderRadius 值进行动画。

box6
E( '#box6' ).anim({
    to : { borderRadius : '50% 50% 50% 50%' },
    duration : 600,
    reverse : true
});

运行

例子7

对 div 元素的 text-shadow 进行动画。

box7
E( '#box7' ).anim({ 
    to : { textShadow : '#fff 0px 0px 1px' }, 
    complete : function(){
        E( this ).css( 'color', '#fff' );
    }
});

运行

例子8

对 div 元素设置一组动画队列。

box8
E( '#box8' ).anim({ to : { left : '570px' }, duration : 600 })
    .anim({ to : { backgroundColor : '#46CA3B' }, duration : 600 })
    .delay( 1000 )
    .anim({ to : { left : '335px' }, duration : 600 })
    .slideUp()
    .slideDown()
    .anim({  to : { backgroundColor : '#028fc4' }, duration : 1200 })
    .delay( 500 )
    .anim({ to : { left : '0px' }, duration : 500 })
    .anim({ to : { backgroundColor : '#2c2c2c' }, duration : 800 });

运行

例子9

使用 += 和 -= 对 div 元素的位置值进行动画。

box9
var box9 = E( '#box9' ),
    left = parseInt( box9.css('left') ),
    distance = 570,            
    n = 114;

if( left === 0 ){
    window.symbol = '+=';
}        
else if( left === distance ){
    window.symbol = '-=';
}

box9.anim({
    to : { left : window.symbol + n + 'px' },
    duration : 200
});

运行

例子10

设置动画开始时的初始样式,使其每次都从最右边往最左边进行动画。

box10
E( '#box10' ).anim({ 
    from : { left : '670px' },
    to : { left : '0px' },
    easing : 'bounce',
    duration : 800
});

运行

例子11

设置动画开始时的初始样式,并使用百分比为单位进行动画。

box11
E( '#box11' ).anim({ 
    from : { left : '0%' },
    to : { left : '50%' },
    easing : 'swingTo',
    duration : 800
});

运行

例子12

easy.js 的 anim 模块支持 scrollTop、scrollLeft 的动画效果,下面的代码就可以轻松实现“返回顶部”的动画效果。

E( window ).anim({ 
    to : { scrollTop : 0 },
    easing : 'easeOut',
    duration : 1000
});

运行