发布名为 Motion 的动画组件April 7, 2009

也写了几年的代码了,越发的感觉到“写代码容易、养代码难”。当代码多了以后,总会有种想法将有用的代码封装起来,方便更多人也避免大家重复造轮子。于是,就有了这个动画组件

http://lab.gracecode.com/motion/accessory/logo-motion-200.png

下面是复制粘贴时间,先回答下大家可能要问到的些问题。

又多了款这样(类似)的脚本,让我如何选择?

没有最好的,只有更适合的。或许其他同类型的脚本也能很好的 完成工作(包括很多库中的动画组件能够完成更好的效果)。

本人编写该组件的目的,除了能让您能高效率完成动画效果的 同时,也希望您能了解动画组件的原理。

而且完成这些复杂效果只需要 3KB (压缩后)并且可以定制,何乐而不为 :^)

该动画组件支持哪些浏览器?

经过本人的测试,主流的浏览器普遍都被支持。其中包括 Internet Explorer(6/7/8) 、最新版本的 Firefox、Safari、Chrome 以及 Opera,其他支持 Javascript 的浏览器也应该可被支持。

欢迎您提供相应的其他浏览器的兼容情况。

-- Split --

其实编写这个组件并非偶然,在过年的时候就曾经发布过类似的脚本,这次的发布也仅仅是做了些优化。我第一次感觉到发布组件的压力是如此的巨大,甚至我亲自为其每个方法都编写了测试用例以及详细的文档和例子。

好了废话不多说,接下来的一步就是逐渐的优化代码和增强功能,兄弟们如果有好的意见和建议,欢迎不吝提出。

已有 22 条评论

  1. est est

    大牛的沙发。。。一个div动过去动过来的框架?

  2. joyqi joyqi

    e....基本上就是这个样子

  3. 不错,支持明城哥。
    自己的js动画方面很弱,有了这个以后做东西就好多了,毕竟是中文的,哈哈

  4. 感谢分享...

  5. 这玩意儿好拉哄...
    偶只是来表达一下那够logo很好看...
    是不是有夸相片背景很好看的嫌疑
    飘过... 飘过...

  6. jswl jswl

    明神好牛 哈哈

  7. wiLdGoose wiLdGoose

    恭喜明城顺利成为当代教主。明教主万岁。

  8. Shih Shih

    膜拜明城叫兽~~
    希望明城叫兽多出精品~~

    明城老仙,法力无边,千秋万代,一统中原...

  9. 赞。

  10. ware ware

    http://code.google.com/p/typecho/issues/detail?id=147
    明哥,看看你的皮在ie6里发生的神奇的事情

  11. @ware IE6 个人已经放弃支持了,不过有空看下这个问题 :^)

  12. 我一直用的tween,不知道tween是不是您写的?

  13. Wasabi Wasabi

    呵呵,好東西,研究ing....

    偶對新博客還不太適應 @@~

  14. 喜欢、js、简洁、专注......

    http://blog.sina.com.cn/52ued
    蚂蚁,以用户为中心的设计

  15. 传说中的哥儿 传说中的哥儿

    仔细阅读了没有压缩的源代码:
    /**
    * Motion - 动画组件
    *
    * @author mingcheng
    * @since 2009-01-26
    * @link http://www.gracecode.com/
    * @version $Id: motion.js 228 2009-04-14 06:30:12Z i.feelinglucky $
    *

    是这个版本的,不明白:
    (function(scope) {
    //.........若干代码
    })(window);

    这部分什么意思,上网查了半天也没有查出明确的说法,特向原著作者请教。

  16. 传说中的哥儿 传说中的哥儿

    (function(scope){ //在这里,scope是什么意思?有什么作用呢?
    //--------------这里是动画插件的若干优雅代码
    })(window); //在这里,最后这个小括号里的(window)是什么用途,这种写法高深高明之处可否讲讲

  17. @传说中的哥儿 使用匿名函数形成个闭包,然后传入的 scope 也就是 window 为作用域

  18. 传说中的哥儿 传说中的哥儿

    谢谢指点,去博客园查了一些关于“作用域”和“闭包”的文章。

    供后来人参考:

    http://www.cnblogs.com/wubiyu/archive/2009/02/23/1396258.html

    http://www.cnblogs.com/kaixin110/archive/2009/03/26/1422021.html

  19. 锐风 锐风

    强大啊.. 没有 JS 你怎么做的? 牛X..
    ps: 鄙人真不懂JS啊.. - -!

  20. 锐风 锐风

    再废话下, 那个 LOGO 里边用到的字体貌似我的英语课本里边有的..

  21. Alex.li Alex.li

    明城 April 21st, 2009 at 09:52 pm #17

    @传说中的哥儿 使用匿名函数形成个闭包,然后传入的 scope 也就是 window 为作用域

    --------------------------------------------------------------
    明兄,只要使用匿名函数就会形成闭报么?????

  22. @Alex.li 匿名函数是形成闭包的因素之一,实际上是否形成闭包依赖于作用域,详细可以参考这篇文档: http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html

Yahoo 统计