断断续续折腾了几个晚上终于于周日把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. Exception dispatching input event. use XlistView

    今天上午解决Bug,一个上午的时间: log: 11-01 14:49:14.826: E/InputEventReceiver(30810): Exception dispatching input ...

  2. 我的MYSQL学习心得(十)

    原文:我的MYSQL学习心得(十) 我的MYSQL学习心得(十) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL ...

  3. Java阅读word程序说明文件

    完成office文件操作可以帮助apache.poi包(我用poi-3.10-FINAL),导入对应的jar包(最好所有导入) 以下的程序演示了一些操作word的过程,具体的函数功能能够查看此包的官方 ...

  4. 快速构建Windows 8风格应用22-MessageDialog

    原文:快速构建Windows 8风格应用22-MessageDialog 本篇博文主要介绍MessageDialog概述.MessageDialog常用属性和方法.如何构建MessageDialog ...

  5. 用一条SQL语句取出第 m 条到第 n 条记录的方法

    原文:用一条SQL语句取出第 m 条到第 n 条记录的方法   --从Table 表中取出第 m 条到第 n 条的记录:(Not In 版本)       *    FROM Table     id ...

  6. Codeforces#277 C,E

    C. Palindrome Transformation time limit per test 1 second memory limit per test 256 megabytes input ...

  7. leetcode第19题--Remove Nth Node From End of List

    Problem: Given a linked list, remove the nth node from the end of list and return its head. For exam ...

  8. 使用.net备份和还原数据库

    原文:使用.net备份和还原数据库 CSDN网友的提问http://community.csdn.net/Expert/TopicView3.asp?id=4929678C#实现SQLSERVER20 ...

  9. 创业路(VC Pipeline),创业需要融资的阅读

    企业家们经常问我,您的投资渠道(投资流程)到底是怎么样的? 看看有多少项目,有多少人遇到,频度,终于选择哪些公司进行了投资. 这让我认为有必要提高VC投资通道的可见度.同一时候也有助于介绍到底哪些方面 ...

  10. MVC 用扩展方法执行自定义视图,替代 UIHint

    MVC 用扩展方法执行自定义视图,替代 UIHint 项目中用了 Bootstrap , 这样就不用写太多的CSS了,省去很多事情.但是这个业务系统需要输入的地方很多,每个表都有100多个字段,每个页 ...