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,它同样可以帮助你实现各种各样的动画效果,而且借助 ...
随机推荐
- AngularJS应用开发思维之2:数据绑定
在声明式模板中显示数据 因为不能像jQuery一样将DOM操作混在模板里,声明式模板很快让我们变得束手束脚. 一个典型的问题:在声明式模板里怎么显示数据? 假设我们有某人的基本信息,保存在一个json ...
- 转载JQuery绑定鼠标粘贴事件工具类
// 粘贴事件监控 $.fn.pasteEvents = function( delay ) { if (delay == undefined) delay = 10; return $(this). ...
- Google Summer of Code 建议被接收的5个技巧
Google Summer of Code 建议被接收的5个技巧 本文翻译自:http://www.di.ens.fr/~baghdadi/TXT_blog/5_advices_to_get_your ...
- servlet请求转发与重定向的差别------用生活实例来形象说明两者的差别
1,请求重定向:client行为,response.sendRedirect(),从本质上讲等同于两次请求,前一次的请求对象不会保留,地址栏的URL地址会改变. 2,请求转发:server行为,req ...
- 31、Thinking in Java
- 18. Scrum敏捷软件开发
1)柯维定律 2)如何组件敏捷团队? 团队5~9个人,Mike带过最多的是14个人.个人建议,别超过10个.否则沟通的成本直线上升.(团队的午餐,两个匹萨就够了). 引入特性团队(针对于传统的组件 ...
- 《C语言 学生成绩管理系统》
/* (盯着先拔头筹程序) * 该计划的版权声明和版本号 * Copyright (c) 2011, 烟台大学计算机学院学生的学校 * All rights reserved. * 文件名: 学生成绩 ...
- win7 Python 环境 准备 配置
包括Python,eclipse,jdk,pydev,pip,setuptools,beautifulsoup,pyyaml,nltk,mysqldb的下载安装配置. **************** ...
- touch命令功能
touch命令功能 touch fileA,如果fileA存在,使用touch命令可更改这个文件或目录的日期时间,包括存取时间和更改时间:如果fileA不存在,touch命令会在当前目录下新建一个 ...
- java中数据库通用层
/** * 数据库通用类 * */ public class ConnDB { /** * 获取数据库连接对象 * @return 数据库连接对象 * */ public static Connect ...