断断续续折腾了几个晚上终于于周日把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 functionsEasing EquationsJavaScript Tween算法及缓动效果

Github项目主页:http://liutian1937.github.io/Jwalk/index.html

Jwalk未压缩版本有粗糙的注释,大家可以扩展功能后自行压缩,欢迎尽情蹂躏。

Jwalk发布——一个比较小的Js动画库的更多相关文章

  1. 推荐 11 个好用的 JS 动画库

    为了保证的可读性,本文采用意译而非直译. 1.Three.js 超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL.这个库提供了<canvas>. ...

  2. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  3. Velocity.js动画库使用

    1.简介 Velocity 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. 2 ...

  4. 聊聊JS动画库:Velocity.js

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

  5. AOS – 另外一个独特的页面滚动动画库(CSS3)

    AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的.但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部 ...

  6. 发布一个Python小程序:ManHourCalendar

    程序诞生的那些事儿 先聊聊背景资料档案.. 大约两年前,我只身前往岛国赚点外快.在那边的派遣制度工作中,存在一个大约叫每月的标准工作时间的概念,按照自家公司跟派遣目标公司(业界称为现场)的合同,规定了 ...

  7. TweenJS----前端常用的js动画库,缓动画和复制动画的制作,效果非常好。

    TweenJS类库主要用来调整和动画HTML5和Javascript属性,提供了简单并且强大的tweening接口. http://www.createjs.cc/tweenjs/ http://ww ...

  8. 第三方开源动画库EasyAnimation中一个小bug的修复

    看过iOS动画之旅的都知道,其中在最后提到一个作者写的开源动画库EasyAnimation(以下简称EA). EA对CoreAnimation中的view和layer动画做了更高层次的包装和抽象,使得 ...

  9. 10个最好的 JavaScript 动画库和开发框架

    虽然 CSS3 动画功能能够让我们以简单轻松的方式实现动画效果,但是浏览器兼容性问题让人头疼.不过不用担心,我们还有另外的武器——JavaScript,它同样可以帮助你实现各种各样的动画效果,而且借助 ...

随机推荐

  1. 基于C++ 苹果apns消息推送实现(2)

    1.该模块的用途C++ 和 Openssl 代码 它实现了一个简单的apns顾客 2.配套文件:基于boost 的苹果apns消息推送实现(1) 3.最初使用的sslv23/sslv2/sslv3仅仅 ...

  2. vi使用高级

    下面的命令在vi命令模式被激活 h 光标左移一个字符 l 光标向右移动一个字符 j 光标下移一行 k 移动光标线 一.对整行操作 1.复制光标所在行 yy 2.删除光标所在行 dd 3.选中光标所在行 ...

  3. DDD,ORM还是Ado.Net

    三层还是DDD,ORM还是Ado.Net,何去何从? 我本想把这个问题放到博问去,前几次有去博问问过之类的问题,无奈大神们可能都不屑回答别人的低级问题.所以放到随笔里,一方面把自己对ORM.架构的一些 ...

  4. 【 D3.js 进阶系列 — 5.0 】 直方图

    直方图用于描写叙述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],如今把10~2 ...

  5. Fedora 20 Gnome安装及配置记录

    下载了F20的Gnome版,原先安装的是19KDE的,原因是昨晚看书,觉得电脑开着也没什么事情,倒不如看看能不能升级或下载点东西 原先是KDE的界面,所以打算换换风格,使用下Gnome,不过更换过程总 ...

  6. solr主从复制

    solr主从复制 最近的开发工作涉及到两个模块“任务”和“日周报”.关系是日周报消费任务,因为用户在写日周报的时候,需要按一定的规则筛选当前用户的任务,作为日周报的一部分提交.整个项目采用类似于Orc ...

  7. [译]Java设计模式之解释器

    (文章翻译自Java Design Pattern: Interpreter) 解释器模式适用于当一些内容需要翻译的时候.下面的例子是一个非常简单的解释器实现.它将字母"a"和&q ...

  8. 用Inno Setup制作WEB程序安装包

    原文 用Inno Setup制作WEB程序安装包 最近做了一个WEB程序的安装包,我把制作的过程做个介绍,贴出源码给大家做个参考 看看inno 的脚本 [Setup] AppCopyright=tes ...

  9. wpa_cli P2P 连接相关的调试命令

    在最近的一次客户端上的调试p2p的wifi display, 他们中的一半Android该调整了,整个前所以没有太多的研究p2p过程连接, 客户现在使用的非Android平台架构. 需要协助客户这么多 ...

  10. apache 提示You don't have permission to access /test.php on this server.怎样解决

    把denty改成allow httpd.conf文件中. <Directory "cgi-bin"> AllowOverride None Options None O ...