velocity--Advanced 高级用法

Advanced 高级用法

1. Value Functions

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

JavaScript

// 使 $element 的透明度随机到一个值 的动画，每次执行后 元素透明度都不同
$element.velocity({
    opacity: function() { return Math.random() }
});

开始

JavaScript

$element.velocity({
    translateX: function(i, total) {
        /* 生成 translateX' 的结束值 */
        return i * 10;
    }
});

2. Forcefeeding

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

JavaScript

$element.velocity({
    /* translateX 初始值永远为0 动画结束值为500px */
    translateX: [ 500, 0 ],
    /* opacity 初始值永远为0 动画结束值为1 缓动效果为"easeInSine" */
    opacity: [ 0, "easeInSine", 1 ]
});

开始

JavaScript

$element
    /* 对于这个链式动画，在每次动画开始前 元素的 translateX 初始值还是0 */
    .velocity({ translateX: [ 500, 0 ] })
    .velocity({ translateX: 1000 });