velocity.js_使用Velocity.js进行柔滑流畅的Web动画

velocity.js

如果精心地应用动画,可以改善网站界面,并最终改善网站的用户体验。 在本教程中,我们将研究VelocityJS ,这是一种用于快速性能动画JavaScript动画引擎。 在网络上处理动画时,VelocityJS已成为我的首选之一,我认为原因是:

  • 简直更好。 VelocityJS与CSS一样快,并且比jQuery同类产品具有更好的性能,尤其是在移动设备上。 这种性能要好得多,以至于甚至没有讨论过用VelocityJS替换jQuery的核心动画-不幸的是,这种事情不会发生。 CSS动画虽然速度很快,但是在浏览器支持方面受到限制 。 VelocityJS甚至可以追溯到IE8!
  • 运行序列FTWRunSequence是VelocityJS中的一种方法,可用于连续执行动画堆栈。 与链接动画功能(如jQuery中)相比,这是一种更为优雅的方法。 仅使用CSS这样做是不切实际的。
  • 精益学习曲线 。 VelocityJS提供了 jQuery 类似的语法。 这使我们可以从jQuery跳到VelocityJS并快速掌握API。

在本教程中,我们将逐步介绍使用VelocityJS进行动画制作的基本知识。 我们还将重点介绍一些可以改善UI设计的功能。 所以,让我们开始吧!

运行基本动画

使用jQuery,假设我们想向右滑动div ,我们将编写如下内容:

$("div").animate({
	left: "500px",
}, {
	duration: 3000, 
	easing: "linear" 
});

以几乎完全相同的方式,我们可以使用VelocityJS编写如下代码:

$("div").velocity({
	left: "500px",
}, {
	duration: 3000, 
	easing: "linear"
});

两个示例都将通过观察元素的left属性将div向右移动500px 3秒。 语法上的可见差异是用于元素动画的方法,VelocityJS使用.velocity()而不是jQuery的.animate()

您可能还会注意到性能差异。 jQuery动画有时会有些不稳定,而VelocityJS从头到尾都像黄油一样运行。 搏一搏:

动画化不同CSS属性

VelocityJS接受许多CSS属性以及它们的长期版本来操纵元素。 我们可以在单个VelocityJS实例中一起使用这些属性来执行复杂的动画。 例如:

$("div").velocity({
  borderRadius: "25px",
  width: "45px",
  paddingLeft: "0",
  paddingRight: "0",
  backgroundColor: "#8CC152",
  color: "#fff",
  borderColor: "#8CC152",
  boxShadowX: "0",
  boxShadowY: "0"
}, {
	duration: 350,
	easing: "easeInQuad"
});

在第二个示例中,我们对div进行了一些CSS属性处理,包括使其变小的widthbackground-colorpaddingbox-shadowborder-radius来将其转换为一个圆形。

请注意,按照JavaScript命名约定 ,包含两个或多个单词的属性将以camelCase格式设置格式,因此border-radius变为borderRadius等等。 我们还将持续时间缩短到仅350毫秒,这一次,我们选择了easeInQuad因为VelocityJS内置了jQuery UI缓动功能。

动画快捷方式

jQuery提供了一些执行常见动画的方法,例如.slideUp().fadeOut() ,它们使元素逐渐消失。 因此,VelocityJS也这样做并不奇怪。 VelocityJS提供了一些传递给.VelocityJS()实例的快捷方式。

我们将编写以下内容以向上滑动元素以隐藏内容:

$("div").velocity("slideUp", {
	duration: 350
});

为了淡出它,我们可以这样写:

$("div").velocity("fadeOut", {
	duration: 350
});

滚动

VelocityJS还提供了一个称为scroll的快捷方式,该快捷方式可用于创建指向页面上特定部分的链接 。 以下代码假定我们希望链接#go-up在单击时滚动回到页面顶部。

var $up = $("#go-up");

$up.on("click", function() {
  $("body").velocity("scroll", { 
    duration: 2000,
    easing: "easeInBack"
  });
});

可能是这样的:

逆转

包含的另一个方便快捷方式是reverse 。 动画完成后,该快捷方式使我们可以将元素恢复为初始状态。 以上一个滚动示例为例,我们可以应用reverse按钮来增强箭头图标。 为此,我们链接了一个新的VelocityJS实例并添加了reverse ,将loop选项设置为true

$(".icon").velocity({
  translateY: "10px"
}, {
  loop: true
}).velocity("reverse");

这会将图标向下移动10px然后立即返回其初始位置。 由于我们还将loop选项设置为true因此动画将无限期执行。

插件:UI Pack

UI Pack中提供了更多动画效果。 UI Pack是作为插件提供的,与VelocityJS核心分开。 包含它之后,您将可以访问除了slideUpfadeOutscroll之外的一系列效果,这为构建生动的界面提供了更大的潜力。

<script src="https://cdnjs.cloudflare.com/ajax/libs/VelocityJS/1.2.2/VelocityJS.ui.js"></script>

UI Pack还带来了两个新选项: staggerdragstagger使我们可以执行单个效果,将其顺序而不是同时应用于元素数组。 当设置为true时, drag选项提供了对数组中最后一个元素的动感。

例如,我创建了一个带有一些菜单的导航栏,其中一个菜单具有子菜单。 为了使子菜单更具吸引力,我在UI Pack中应用了带有stagger选项集的两种效果。

顺序播放多个动画

在某些时候,我们可能需要按顺序对不同的元素执行动画。 为此,我们必须按顺序嵌套每个VelocityJS实例,例如:

$("#offcanvas").velocity({ 
		translateX: 0
	}, {
		duration: 300,
	}, function() {
	$(".widgets").VelocityJS({
		translateX: 0,
		opacity: 0
	}, {
		duration: 300,
	}, function() {
		$("#close").VelocityJS({
			translateY: 0,
    	rotateZ: 0
		}, {
			duration: 150
		});
  });
});

上面的函数将首先执行$body的动画,然后完成$nav的动画,最后执行$menu 。 不幸的是,这不是一个优雅的方法,也不是理想的方法。 如果您有十二个动画,那么代码将难以管理。

但是,除了动画效果外,UI Pack还带有一种称为RunSequence的方法。 这是专门为解决我们的排序问题而设计的; 整齐地堆叠动画并按相关顺序执行它们。 使用上面的代码,我们可以将其重写为JavaScript对象,并将选定的元素定义在e属性中,将p属性中列出CSS属性定义在e属性中,将动画选项设置在o属性中。

var animationSequence = [
	{ e: $("#offcanvas"), p: { translateX: 0 } , o: duration: 300 },
	{ e: $(".widget"), p: { translateX: 0, opacity: 0 } , o: duration: 300 },
	{ e: $("#close"), p: { translateY: 0, rotateZ: 0 } , o: duration: 150 }
];
 $.Velocity.RunSequence(animationSequence);

我已经将上面的代码扩展为一个功能良好的画布之外的布局。 早点给它,然后查看JavaScript选项卡以查看完整的源代码。fffffff

最终思想

我发现VelocityJS是jQuery和CSS动画的首选替代方法,尤其是在构建涉及多个动画的交互式界面时。 VelocityJS易于使用,并带有预构建的动画,最重要的是,它非常 。 负责任地使用它。 人们常说:功能强大,责任重大。

翻译自: https://webdesign.tutsplus.com/tutorials/silky-smooth-web-animation-with-velocityjs--cms-24266

velocity.js

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值