聊聊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 相关文章推荐
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
Vue slot用法(小结)
Oct 22 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
如何使用PHP中的字符串函数
2006/11/24 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
jQuery 使用手册(三)
2009/09/23 Javascript
brook javascript框架介绍
2011/10/10 Javascript
AngularJS语法详解
2015/01/23 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
德国苹果商店:MacTrade
2020/05/18 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
大学生求职简历的自我评价范文
2013/10/12 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
银行授权委托书格式
2014/10/10 职场文书
债务授权委托书范本
2014/10/17 职场文书
慈善募捐倡议书
2015/04/27 职场文书
教师旷工检讨书
2015/08/15 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript