博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
velocity.js的使用
阅读量:4495 次
发布时间:2019-06-08

本文共 1003 字,大约阅读时间需要 3 分钟。

关于velocity的简介

学习之前先找到官网:

中文手册(教程): 

velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能, 还拥有:颜色动画转换动画(transforms)、循环、 缓动SVG 动画、和 滚动动画 等特色功能。可以兼容i8 和android2.3.

它比 $.animate() 更快更流畅,性能甚至高于 CSS3 animation, 是 jQuery 和 CSS3 transition 的最佳组合,它支持所有现代浏览器,最低可兼容到 IE8 和 Android 2.3。

Velocity 目前已被数以千计的公司使用在自己的项目中,包括 WhatsApp, Tumblr, Windows, Samsung, Uber 等,这里 统计了哪些站点正使用 velocity.js。

所以说:css3不兼容i8,在i8时打不开,而用velovity.js可兼容。

           jQuery是PC端的插件,对于移动端不太适用,有点卡顿,但是velocity适用于移动端和PC端       

           例velocity的基本用法和配置属性

            

           duration:代表动画的时长

           delay:代表动画的延时时间

序列动画的三种实现方式

           一、delay   缺点:需要手动维护delay和duration之间的关系

          二、通过complete    缺点:实现代码一层层的嵌套,可读性差

         

        三、通过定义一个seq动画序列,通过velocity RunSequence实现序列,这种方法是可推荐使用的

          

 vellocity的特性(特别适合动画序列的场景)

当鼠标移到上面时,左右摇摆的动画:首先绑定一个事件,选中元素,在velocity的参数中(callout,shake)

预定义动画的效果,在实际项目中可以直接用,非常方便

       

如果在预定义效果中找不到定义的动画效果,可使用自定义来定义动画

                     

四个步骤:

  定义变量(动画元素、事件变量)

  自定义动画

  动画序列

  事件绑定

js插件的学习方法(官网大致了解、运行例子、熟悉细节)

转载于:https://www.cnblogs.com/niuxiaoying/p/7055397.html

你可能感兴趣的文章
svg学习(三)rect
查看>>
ruby 模块 的引入
查看>>
CI Weekly #21 | iOS 持续集成快速入门指南
查看>>
隐藏显示终端的光标(shell echo,linux c printf)
查看>>
利用DFS求联通块个数
查看>>
总结:
查看>>
spring boot 整合redis --sea 方式1
查看>>
Android Http请求方法汇总
查看>>
缓存技术PK:选择Memcached还是Redis?
查看>>
Laravel-lumen 配置JWT
查看>>
linux中tomcat内存溢出解决办法 分类: 测试 ...
查看>>
jQuery $.each用法
查看>>
推荐一款能写原创诗词的小程序
查看>>
Codeforces Round #496 (Div. 3) ABCDE1
查看>>
《程序是怎样跑起来的》第三章
查看>>
Jquery回到顶部效果
查看>>
开园第一笔
查看>>
Houdini 节点参数读取输入节点的数据列表
查看>>
初识Linq to Entity
查看>>
Linux vmstat命令实战详解
查看>>