聊聊JS动画库 Velocity.js的使用


Posted in Javascript onMarch 13, 2018

前言

又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职。然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是静下心来学习新技术和写一写技术文章,希望能继续坚持下去吧。

JS动画

随着互联网越来越丰富多样,网页端的美化和新技术层出不穷,作为一个网站的浏览者,更多吸引他们的除了保证网站的流畅之外还有各种炫酷的交互动效。

网页的交互动效大概分为 css动画,js动画 。

JS动画的优点

既然我们大概了解了这两类动画,那么我们来分析下他们不同的优点

  1. css动画 由于css3可以根据css属性自定义动画 所以这类动画的优点就是不用进行计算和更改dom 会显得非常流畅。
  2. JS动画 js动画拥有强大的性能,并且优于css动画的特点就是 既然是根据js来改变属性值 所以没有css那样的局限性,可以实现更多的功能和动效,或许有人说js动画某些库会很慢,其实js动画本质很快,只是jquery让它慢了下来。因为有时候由于配合jquery使用,所以由于jquery本身的一些功能,所以在实现的时候就会显得很慢。

velocity.js 使用方法

JS动画的库非常多,各有各的有点,比如jquery自带的animate动画还有 webGL,或者利用canvas,SVG等实现其他效果,本次来讲的就是众多库中的其中一个 velocity.js 动画库。

velocity.js 既可以单独用JavaScript使用,也可以配合jquery使用,使用方法(注意先将velocity.js下载好后在body标签下引入,然后在新script标签中书写以下代码) :

//jquery方法 
var $div = $('div')
$div.velocity({属性:值,属性:值})
//javascript 方法
var oDiv = document.getElementById('div')
oDiv.velocity({属性:值,属性:值})

这里需要注意得几点:

1.里面的属性不能加引号写入,而后面的值如果有字符串则加引号,如果为整数则不用 比如 width:100 和 width:"100px"
2.里面的属性值不可一次传入多个,比如在css中 padding:5px 5px 6px 5px;我们可以这样传入 但是在velocity中如果想传入多个值则为 {paddingLeft:5, paddingRirght:5 省略}
3.里面的属性值 如果是多个转折的需要第二个首字母大写 如上

velocity.js 详细介绍

上面已经讲到 需要改变的值作为对象传入velocity的第一个参数,那么第二个参数就是 它的指定动画选项包含:

+ duration 持续时间
+ easing 缓动方式
+ delay 延迟执行
+ loop 循环次数
+ begin 和 complete 回调函数
+ display(值与css相同,可设置为auto)

在讲velocity指定动画选项前 我们先说一下velocity支持的值: px em rem % vm vh 或者 利用运算符 *=2 表示当前值的2倍 或者 /=2 等运算方式

下面一个一个分析下指定动画选项:

duration 持续时间

这个是代表动画的持续时间默认值为毫秒(ms) 你可以这样使用:

// 表示一秒内将透明度从1到0
$div.velocity({opacity:0},{duration:1000})

也可以这样使用:

// 效果相同
$div.velocity({opacity:0},1000)

velocity也自定了三种持续方式:slow(600ms) ,normal(400ms),fast(200ms),可根据自己实际需求使用

easing 缓动方式

这个是代表着动画以何种方式进行变换:ease-in-out(逐加逐减),ease-in (先加速后匀速),dase-out (先匀速后减速)

也可以根据 三角函数缓动 "easeInOutSine" ,css贝塞尔曲线[0.17,0.67,0.83,0.67] 或者弹簧物理 [张力,摩擦力] 等值进行实现

delay 延迟执行

表示这个动画延迟多少时间执行 默认单位毫秒(ms)

// 五秒后执行此动画
delay:5000

loop 循环次数

表示这个动画需要的循环次数:

// 循环五次
loop:5
// 无限循环
loop:true

begin和complete回调函数

这两个表示在动画开始前和动画结束后所执行的函数:

begin:function(){ somgthing... },complete:function(){ somgthing... }

其他功能:

velocity还有一些其他功能,这里就日后再说,比如:reverse(反转),scrolling(滚动),color(颜色),transform(变换 包含scale缩放 rotate旋转 translation平移等)

结语

总之前端技术现在层出不穷,作为程序员的我们更应学习一些新的技术,既然热爱,就永无止境,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 #Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 #Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 #Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 #Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 #Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 #Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 #Javascript
You might like
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
react基本安装与测试示例
2020/04/27 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python实现调度算法代码详解
2017/12/01 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
浅析python 字典嵌套
2020/09/29 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
幼儿园春游活动方案
2014/01/19 职场文书
中学生班主任评语
2014/01/30 职场文书
2014年党支部承诺书
2014/05/30 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
新学期开学标语2015
2015/07/16 职场文书