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 });