Velocity.js中文文档

Advanced 高级用法

Value Functions

属性值可通过传递一个函数来设置动画效果

// 使 $element 的透明度随机到一个值 的动画,每次执行后 元素透明度都不同
$element.velocity({
    opacity: function() { return Math.random() }
});
$element.velocity({
    translateX: function(i, total) {
        /* 生成 translateX' 的结束值 */
        return i * 10;
    }
});

Forcefeeding

通常,在动画执行前 动画引擎会先查询 DOM 以确定元素的初始值, Velocity 可以让用户自定义元素初始值 这样可以避免 DOM 查询。看下面示例:

$element.velocity({
    /* translateX 初始值永远为0 动画结束值为500px */
    translateX: [ 500, 0 ],
    /* opacity 初始值永远为0 动画结束值为1 缓动效果为"easeInSine" */
    opacity: [ 0, "easeInSine", 1 ]
});
$element
    /* 对于这个链式动画,在每次动画开始前 元素的 translateX 初始值还是0 */
    .velocity({ translateX: [ 500, 0 ] })
    .velocity({ translateX: 1000 });
上一篇: 下一篇: