UI 插件

优质

小牛编辑

130浏览

2023-12-01

velocity.ui.js 是 velocity.js 的动画插件，可以用它快速创建炫酷的动画特效，它依赖于 velocity.js

velocity.ui 有2个重要方法: $.Velocity.RegisterEffect()和 $.Velocity.RunSequence()

前者将多个 Velocity 动画合并存储到一个自定义数组里，可以通过引用该数组的名称在项目中复用，后者能改进嵌套的动画序列使得更易于管理

$.Velocity.RunSequence()

如果嵌套动画的嵌套层次很多时，会难以管理

$element1.velocity({ translateX: 100 }, 1000, function() {
  $element2.velocity({ translateX: 200 }, 1000, function() {
    $element3.velocity({ translateX: 300 }, 1000);
  });
});

如何解决上面的问题？直接用 $.Velocity.RunSequence()对上面代码进行重写：

e：element - 表示元素
p：properties - 属性集
o：options - 配置选项

// 将嵌套动画序列储存到一个数组里，很清晰的显示了它们的执行顺序
var mySequence = [
  { e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },
  { e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },
  { e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }
];

// 调用这个自定义的序列名称 还可以在其他地方复用
$.Velocity.RunSequence(mySequence);

内置特效

Velocity.ui.js 内置了很多常用的动画特效，分为 callout.* 和 transition.* 两类，下面是所有的特效名：

callout.bounce
callout.shake
callout.flash
callout.pulse
callout.swing
callout.tada
transition.fadeIn
transition.fadeOut
transition.flipXIn
transition.flipXOut
transition.flipYIn
transition.flipYOut
transition.flipBounceXIn
transition.flipBounceXOut
transition.flipBounceYIn
transition.flipBounceYOut
transition.swoopIn
transition.swoopOut
transition.whirlIn
transition.whirlOut
transition.shrinkIn
transition.shrinkOut
transition.expandIn
transition.expandOut
transition.bounceIn
transition.bounceUpIn
transition.bounceUpOut
transition.bounceDownIn
transition.bounceDownOut
transition.bounceLeftIn
transition.bounceLeftOut
transition.bounceRightIn
transition.bounceRightOut
transition.slideUpIn
transition.slideUpOut
transition.slideDownIn
transition.slideDownOut
transition.slideLeftIn
transition.slideLeftOut
transition.slideRightIn
transition.slideRightOut
transition.slideUpBigIn
transition.slideUpBigOut
transition.slideDownBigIn
transition.slideDownBigOut
transition.slideLeftBigIn
transition.slideLeftBigOut
transition.slideRightBigIn
transition.slideRightBigOut
transition.perspectiveUpIn
transition.perspectiveUpOut
transition.perspectiveDownIn
transition.perspectiveDownOut
transition.perspectiveLeftIn
transition.perspectiveLeftOut
transition.perspectiveRightIn
transition.perspectiveRightOut

stagger, drag 和 backwards 选项

velocity.ui 有 stagger,drag,backwards 三个可选配置项

[注意]这些选项只在调用内置动画特效时才起作用

stagger

中文译为"错开"，当遍历一组元素时 (each)，设置 stagger 为一个毫秒数 (ms) 能让每个元素依次延迟该毫秒数执行动画，产生一种错开的运动节奏感

// 默认情况下，三个元素会同时运动
// 这里设置了 stagger 为 300 后，每个元素会依次延迟300ms执行动画
$(".box-stagger").velocity("transition.slideLeftBigIn", { stagger: 300 });

下面是一个例子

<style>
.box-stagger{width: 100px;height: 100px;border:1px solid black;background:lightgreen;line-height: 100px;color:white;text-align: center;} 
</style>

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div class="box-stagger">1</div>
<div class="box-stagger">2</div>
<div class="box-stagger">3</div>

<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $(".box-stagger").velocity("transition.slideLeftBigIn", { stagger: 300 });
})
</script>

drag

遍历一组元素时 (each)，当设置 drag: true，最后一个元素会产生一种类似缓冲的效果，但它和其他元素的动画的duration是一样的

// 最后一个元素产生缓冲效果
$(".box-drag").velocity("transition.slideLeftBigIn", { drag: true });

下面是一个例子

<style>
.box-drag{width: 100px;height: 100px;border:1px solid black;background:lightgreen;line-height: 100px;color:white;text-align: center;} 
</style>

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div class="box-drag">1</div>
<div class="box-drag">2</div>
<div class="box-drag">3</div>

<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $(".box-drag").velocity("transition.slideLeftBigIn", { drag: true });
})
</script>

backwards

中文译为"向后的"，这个选项通常和 drag一起使用，元素会从最后一个开始依次延迟执行动画

$('.box-backwards').velocity('transition.slideLeftBigIn', {
  stagger: 300,
  backwards: true
});

下面是一个例子

<style>
.box-backwards{width: 100px;height: 100px;border:1px solid black;background:lightgreen;line-height: 100px;color:white;text-align: center;} 
</style>

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div class="box-backwards">1</div>
<div class="box-backwards">2</div>
<div class="box-backwards">3</div>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $('.box-backwards').velocity('transition.slideLeftBigIn', {
  stagger: 300,
  backwards: true
  });
})
</script>

$.Velocity.RegisterEffect()

$.Velocity.RegisterEffect()方法允许注册自定义动画特效，以便在项目中复用

// name：动画特效名称 为字符串类型
// defaultDuration：默认动画执行时间 单位为毫秒(ms)
// calls：动画队列数组，property - 动画属性，durationPercentage - 当前动画所占总时间的百分比 (写成浮点数)，option - 选项
// reset：设置元素在动画开始时的初始值
$.Velocity.RegisterEffect(name, {
  defaultDuration: duration,
  calls: [
    [ { property: value }, durationPercentage, { options } ],
    [ { property: value }, durationPercentage, { options } ]
  ],
  reset: { property: value, property: value }
});

下面是一个使用 $.Velocity.RegisterEffect()的例子

$.Velocity.RegisterEffect("callout.customPulse", {
  defaultDuration: 900,
  calls: [
    [ { scaleX: 1.5 }, 0.50 ], // 0.50 为 动画总时间的50%
    [ { scaleX: 1 }, 0.50 ]
  ]
});

// 调用
$element.velocity("callout.customPulse");

<div id="test" style="height: 100px;width: 100px;background:lightgreen;border-radius: 50%;"></div>
<script>
$.Velocity.RegisterEffect("callout.customPulse", {
  defaultDuration: 900,
  calls: [
    [ { scaleX: 1.5 }, 0.50 ],
    [ { scaleX: 1 }, 0.50 ]
  ]
});
$("#test").click(function(){
  $(this).velocity("callout.customPulse");
})
</script>

还可以使用链式的写法注册一系列自定义动画

$.Velocity
  .RegisterEffect("transition.customFlipXIn", {
    defaultDuration: 700,
    calls: [
      [ { opacity: 1, rotateY: [ 0, -55 ] } ]
    ]
  });
  .RegisterEffect("transition.customFlipXOut", {
    defaultDuration: 700,
    calls: [
      [ { opacity: 0, rotateY: 55 } ]
    ],
    reset: { rotateY: 0 }
  });

// 调用
$element
  .velocity("transition.customFlipXIn")
  .velocity("transition.customFlipXOut", { delay: 1000, display: "none" });