动画指令

优质

小牛编辑

130浏览

2023-12-01

Velocity 中预定义了几个常用的快捷动画指令

fade

Fade对应为"fadeIn"(淡入) 和"fadeOut"(淡出) 两个动画指令，和 jQuery 的$.fadeIn()和$.fadeOut()相似

Fade 和 Slide 动画指令都会动态设置元素的display属性显示或隐藏。默认情况下，当元素被显示，如果是块级元素(如<div>)，就会被设置成display: block，如果是行级元素(如<span>)，就会被设为display: inline。Velocity会根据元素的标签类型设置最适合的值

如果在配置项中设置了display选项为某值时，动画结束时该值会覆盖 Fade 和 Slide 所设置的display属性值

// 元素会执行平滑淡入的效果
// 当动画结束时 元素的 display 属性会被设置成 "table"
$element.velocity("fadeIn", { display: "table" });

下面是一个例子

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="jquery-1.10.0.js"></script>
<script src="velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
var OnOff = true;
$("#btn").click(function(){
  if(OnOff = !OnOff){
    $("#test").velocity("fadeIn"); 
  }else{
    $("#test").velocity("fadeOut"); 
  } 
})
</script>

slide

Slide 对应为:"slideUp"(收起) 和"slideDown"(展开)两个动画指令，和 jQuery 的$.slideUp(),$.slideDown()方法相似，通过动态调整元素的height属性，让元素 "收起" 或 "下拉"

// 元素会先"收起"隐藏，延迟500毫秒后 再"下拉"显示
$element
    .velocity("slideUp", { duration: 1500 })
    .velocity("slideDown", { delay: 500, duration: 1500 });

下面是一个例子

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="jquery-1.10.0.js"></script>
<script src="velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
var OnOff = false;
$("#btn").click(function(){
  if(OnOff = !OnOff){
    $("#test").velocity("slideUp"); 
  }else{
    $("#test").velocity("slideDown"); 
  } 
})
</script>

scroll

1、滚动浏览器内容到目标元素的位置

"scroll"动画指令，比如常用的回顶动画就可以使用这个指令

/* 回顶动画，滚动浏览器内容到 <body> 的顶部 */
$("body").velocity("scroll", { duration: 500, easing: "easeOutQuart" });

下面是一个例子

<body style="height:2000px">
<button id="btn" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script src="jquery-1.10.0.js"></script>
<script src="velocity.min.js"></script>
<script>
$("#btn").click(function(){
  $(document.documentElement).velocity("scroll", { duration: 500, easing: "easeOutQuart" });
})
</script> 
</body>

2、滚动元素内容到目标位置

当一个元素的内容部分溢出产生滚动条，可以使用"scroll"将内容滚动到指定的位置，container选项对应为该元素的选择器

/* 让 $("#container") 元素的内容滚动到内部子元素 $("#element3") 所在的位置. */
$("#element3").velocity("scroll", { container: $("#container") });

<div id="box" style="height:100px;width:200px;overflow:auto">
  <p id="element1">1 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element2">2 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
  <p id="element3">3 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element4">4 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element5">5 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element6">6 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p> 
</div>
<button id="btn">到第四段</button>
<script src="jquery-1.10.0.js"></script>
<script src="velocity.min.js"></script>
<script>
$("#btn").click(function(){
  $("#element4").velocity("scroll", { container: $("#box"), easing: "easeOutQuart" });
})
</script>

3、设置滚动相对偏移量

可以设置相对偏移量，单位默认为px

$element
    /* 滚动到相对 $element 向下偏移250px的地方 */
    .velocity("scroll", { duration: 750, offset: 250 })
    /* 再滚动到相对 $element 向上偏移50px的地方 */
    .velocity("scroll", { duration: 750, offset: -50 });

另外，当滚动整个浏览器窗口时，如果目标元素为<html>，可以关闭硬件加速，设置mobileHA: false来避免 iOS 中可能出现的页面闪动问题

/* 滚动整个页面到一个任意值 */
$("html").velocity("scroll", { offset: "750px", mobileHA: false });

stop

"stop"指令，可以使当前正在执行的动画立即停止，类似 jQuery 的$.stop()方法

$element.velocity("stop"); // 停止正在执行的 $element 元素的动画
$element.velocity("stop", "myQueue"); // 停止某自定义队列
$element.velocity({ left: 100 });
// 点击 $("#button")，立即停止当前正在执行的 left 动画
// 并立即反向执行 left 动画 (right 方向运动)
$("#button").on("click", function() {
    $element.velocity("stop").velocity("reverse");
});

设置stop: true, 可以停止并清空当前正在执行的整个动画队列

$element
    .velocity({ width: 100 }, 1000)
    .velocity({ height: 200 }, 1000);

// 如果元素正在执行 width 动画，点击 $("#button") 将立即停止当前动画
// 并移除和跳过将要执行的 height 动画队列
$("#button").on("click", function() {
    $element.velocity("stop", true);
});

finish

"finish"指令会停止当前正在执行的动画，并直接跳转到动画结束的状态（无过渡）

reverse

"reverse"指令使动画反向执行，就像让一部电影倒着播放。 Reverse 默认会继承之前动画的配置选项（比如duration,easing等），但也可以重新设置

$element
    .velocity({ left: 200 }, { duration: 500 })
    .velocity("reverse", { duration: 2000 });

下面是一个例子

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="jquery-1.10.0.js"></script>
<script src="velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({left:200}).velocity("reverse"); 

})
</script>