Jwalk发布——一个比较小的Js动画库
断断续续折腾了几个晚上终于于周日把Jwalk发布了,顺便用了下yahoo的前端框架-pure css ,很简洁,非常帅。推荐使用以下。
下面说下Jwalk是做什么的:
前端开发过程中经常会用到一些动画效果,比如某个div的放大,缩小,左右移动,实现这些效果都是通过Js设置元素的style样式,我们可能会借助Jquery或者其他脚本库提供的动画接口来更容易的实现相关效果。但是如果我们可能只会用到Jquery的动画效果,以及一些简单的选择器,那么(在天朝)加载这个脚本库就显得多余了。为什么在天朝就多余,国内的网络环境与网速是:你懂得!所以为了适应国情,封装了这个Mini版的动画库-Jwalk(名字可轻喷),Min压缩版+Gzip=4K
所以时间单位都为ms,由于脚本计时器是队列执行方式,可能会产生阻塞问题导致时间不准确。所以采用CSS3的动画与采用JS方式上,动画速度与流畅性都会有差别。对低版本浏览器动画效果要求高的话需要对低版本浏览器单独设置动画时间。在Jwalk中为了减小动画速度的差距,我加入了代码:params.speed = Unit.css3 ? params.speed : parseInt(params.speed/1.5) ;,一个1.5倍的时间差。
动画执行的方式采用Css3/Js Tween算法相结合的方式,对于高级浏览器采用css3执行动画效果,不支持css3的采用缓动函数,默认集成了(linear,ease-in,ease-out,ease-in-out)四种动画效果,如果需要更多效果,可以参考Easing functions,Easing Equations,JavaScript Tween算法及缓动效果。
Github项目主页:http://liutian1937.github.io/Jwalk/index.html
Jwalk未压缩版本有粗糙的注释,大家可以扩展功能后自行压缩,欢迎尽情蹂躏。
Jwalk发布——一个比较小的Js动画库的更多相关文章
- 推荐 11 个好用的 JS 动画库
为了保证的可读性,本文采用意译而非直译. 1.Three.js 超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL.这个库提供了<canvas>. ...
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...
- Velocity.js动画库使用
1.简介 Velocity 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. 2 ...
- 聊聊JS动画库:Velocity.js
前言 又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是 ...
- AOS – 另外一个独特的页面滚动动画库(CSS3)
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的.但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部 ...
- 发布一个Python小程序:ManHourCalendar
程序诞生的那些事儿 先聊聊背景资料档案.. 大约两年前,我只身前往岛国赚点外快.在那边的派遣制度工作中,存在一个大约叫每月的标准工作时间的概念,按照自家公司跟派遣目标公司(业界称为现场)的合同,规定了 ...
- TweenJS----前端常用的js动画库,缓动画和复制动画的制作,效果非常好。
TweenJS类库主要用来调整和动画HTML5和Javascript属性,提供了简单并且强大的tweening接口. http://www.createjs.cc/tweenjs/ http://ww ...
- 第三方开源动画库EasyAnimation中一个小bug的修复
看过iOS动画之旅的都知道,其中在最后提到一个作者写的开源动画库EasyAnimation(以下简称EA). EA对CoreAnimation中的view和layer动画做了更高层次的包装和抽象,使得 ...
- 10个最好的 JavaScript 动画库和开发框架
虽然 CSS3 动画功能能够让我们以简单轻松的方式实现动画效果,但是浏览器兼容性问题让人头疼.不过不用担心,我们还有另外的武器——JavaScript,它同样可以帮助你实现各种各样的动画效果,而且借助 ...
随机推荐
- hdu 4472 dp
http://acm.hdu.edu.cn/showproblem.php? pid=4472 第一个本能的找规律.第二直觉 树被分成的子树,然后,复发或DP 然后发现不.然后,他们发现,他们并没有阅 ...
- Kaggle入门——使用scikit-learn解决DigitRecognition问题
Kaggle入门--使用scikit-learn解决DigitRecognition问题 @author: wepon @blog: http://blog.csdn.net/u012162613 1 ...
- 在Installshield的安装进度中显示自己设置的信息
原文:在Installshield的安装进度中显示自己设置的信息 以Installscript msi project为例,在installshield所制作的安装包安装过程中显示安装进度的,就在On ...
- Windows Server 2008安装 百度Wifi \ 360Wifi \ 小米Wifi 失败的解决方法
服务器管理 -> 功能 -> 安装 [无线LAN]服务
- PCL点云库中怎样读取指定的PCD文件,又一次命名,处理后保存到指定目录
我一直想把处理后的pcd文件重命名,然后放到指定的目录,尝试了好久最终做到了: 比方我想读取 "table_scene_lms400.pcd" 把它进行滤波处理,重命名为 &qu ...
- Oracle执行计划——Oracle 如何启用执行计划
AUTOTRACE是一项SQL*Plus功能,自动跟踪为SQL语句生成一个执行计划并且提供与该语句的处理有关的统计.SQL*Plus AUTOTRACE可以用来替代SQL Trace使用,AUTOTR ...
- [译]Java 设计模式之装饰器
(文章翻译自Java Design Pattern: Decorator – Decorate your girlfriend) 1.装饰模式的来历 让我们假设你在寻找一个女朋友.有来自像没美国中国日 ...
- 邮箱自动完成(jquary效果)
邮箱自动完成的效果在网站上大多都看过,但是质量参差不齐,今天突然在网上看到一篇博客,感觉这个插件很好,就想来写一下分享给大家! 效果图如下! 完整demo代码如下: <!DOCTYPE html ...
- zepto.js的基本介绍与使用
最近看到了一篇文章,是介绍一种新的js框架,名为zepto.js,他适用于移动设备已经桌面浏览器除了ie系列的.. 他兼容jquery的API,所以学起来或用起来并不吃力.他比jquery的优势在于1 ...
- WinFrom打开一个窗体关闭另一个窗体
在写Winform程序的时候,经常会遇到“打开一个新的窗体然后关闭本窗体”之类的问题.最常见的就是登陆界面和主窗体了.而最常见的处理方法就是表单判断正确后 new MainForm().Show(); ...