写点什么

JQuery 动画插件 Velocity.js 发布:更快的动画切换速度

  • 2014-05-07
  • 本文字数:889 字

    阅读完需:约 3 分钟

5 月 3 日,Julian 在其 GitHub 上发布了 Velocity.js。Velocity.js 是一款动画切换的 jQuery 插件,它重新实现了 jQuery 的$.animate()方法从而加快动画切换的速度。Velocity.js 只有 7k 的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换、转换 (transform)、循环、缓动、CSS 切换、Scroll 功能,它是 jQuery jQuery UI CSS 变换 在动画方面的最佳组合。Velocity.js 支持 IE8+、Chrome、Firefox 等浏览器,并支持 Andriod 以及 IOS。Velocity.js 在内部实现中使用了 jQuery 的$.queue()方法,因此它比 jQuery 的$.animate()$.fade()$.delay()方法更加流畅,其性能也高于 CSS 的 animation 属性,具体原理读者可以参考这篇文章

Velocity.js 包含两个输入参数,第一个参数用于规定产生的动画效果,第二个参数为可选参数,用于规定动画的额外选项。具体如下:

复制代码
$("div").velocity({
property1: value1,
property2: value2
}, {
/* Default options */
duration: 400,
easing: "swing",
queue: "",
complete: null,
loop: false,
delay: false,
display: false,
mobileHA: true
});

Velocity.js 同样支持 jQuery 的参数简写语法:$element.velocity(propertyMap [, duration] [, easing] [, complete]):, 比如:

复制代码
$("div").velocity({ left: 100 }, 1000);
$("div").velocity({ left: 100 }, 1000, "swing");
$("div").velocity({ left: 100 }, "swing");

Velocity.js 官方宣传 Velocity 的目标是成为 DOM 中动画切换方面的领导者。读者可以从这里下载最新版本的Velocity.js,由于Velocity.js 的方法签名和 $.animate()一样,因此只需将方法名从 animate 改为 velocity 即可。在其官方网站给出了几个绚丽的 Demo ,读者可以参考学习。

参考文档

  1. http://julian.com/research/velocity/
  2. http://davidwalsh.name/css-js-animation
  3. https://news.ycombinator.com/item?id=7663775

感谢杨赛对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ )或者腾讯微博( @InfoQ )关注我们,并与我们的编辑和其他读者朋友交流。

2014-05-07 08:4018632
用户头像

发布了 219 篇内容, 共 146.4 次阅读, 收获喜欢 195 次。

关注

评论

发布
暂无评论
发现更多内容

位移贴图的实现原理

3D建模设计

纹理处理 材质贴图 位移贴图

流行的机器学习算法——线性回归

小魏写代码

Flink Batch SQL Improvements on Lakehouse

Apache Flink

大数据 flink 实时计算

网络爬虫使用什么特点的http代理?

巨量HTTP

http代理

软件测试/测试开发丨利用人工智能ChatGPT完善个人简历

测试人

人工智能 程序员 软件测试 简历 ChatGPT

龙蜥白皮书精选:机密计算平台技术

OpenAnolis小助手

开源 操作系统 白皮书 龙蜥社区 机密计算

以创新抵御经济环境压力:自动化测试ReadyAPI帮助企业平衡软件质量与成本控制

龙智—DevSecOps解决方案

自动化测试

NSDT孪生场景编辑器系统介绍

3D建模设计

数字孪生 建模 模拟仿真

多元变现产品全新升级,百度内容变现新解法

彭飞

法线贴图的视线原理

3D建模设计

纹理处理 材质贴图 法线贴图

阻碍财务共享助力财务转型的三个坑,要绕行!

用友BIP

财务共享

TiDB binlog故障处理之drainer周期性罢工

TiDB 社区干货传送门

故障排查/诊断

数据驱动,智能运营:2023全球商业创新大会精要

用友BIP

2023全球商业创新大会

什么是LED贴膜屏?

Dylan

技术 广告 3D LED显示屏

苹果Mac电脑3D家居设计 Live Home 3D Pro 激活中文版

胖墩儿不胖y

3D Mac软件 家居设计软件 三维家居设计

OpenHarmony应用开发—ArkUI组件集合

OpenHarmony开发者

OpenHarmony

凹凸贴图和法线贴图的区别

3D建模设计

纹理处理 材质贴图 凹凸贴图 法线贴图

对话在行人|承德水务:通过数智化实现“一滴水的闭环管理”

用友BIP

对话在行人

【ODPS新品发布第2期】实时数仓Hologres:推出计算组实例/支持JSON数据/向量计算+大模型等新能力

阿里云大数据AI技术

大数据 阿里云

微软推出统一 Copilot AI 助手;谷歌拟自主研发 AI 芯片;苹果拟在国内引进新的 OLED 供应商丨RTE开发者日报 Vol.55

声网

如何保障汽车嵌入式软件的质量与安全?您需要了解ASPICE标准

龙智—DevSecOps解决方案

汽车软件开发 汽车软件 ASPICE OEM

基于Java+vue开发的企事业移动培训考试平台

金陵老街

java 架构

香港站群多IP服务器,扩展您的在线业务,全球影响力加倍

一只扑棱蛾子

站群服务器

软件测试/测试开发丨利用人工智能ChatGPT编写晋级报告

测试人

人工智能 程序员 软件测试 ChatGPT 晋级报告

JQuery动画插件Velocity.js发布:更快的动画切换速度_语言 & 开发_小盖_InfoQ精选文章