发布名为 Motion 的动画组件

作者：手气不错 发布时间：April 7, 2009 分类：JavaScript

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

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 April 7th, 2009 at 09:23 pm #1
    est

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

  2. joyqi April 7th, 2009 at 09:42 pm #2
    joyqi

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

  3. 阿肆 April 7th, 2009 at 09:45 pm #3
    阿肆

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

  4. Dofy April 7th, 2009 at 09:55 pm #4
    Dofy

    感谢分享...

  5. bigCat April 7th, 2009 at 11:13 pm #5
    bigCat

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

  6. jswl April 7th, 2009 at 11:36 pm #6
    jswl

    明神好牛 哈哈

  7. wiLdGoose April 8th, 2009 at 01:53 am #7
    wiLdGoose

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

  8. Shih April 8th, 2009 at 09:43 am #8
    Shih

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

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

  9. 闲耘 April 8th, 2009 at 01:55 pm #9
    闲耘

    赞。

  10. ware April 9th, 2009 at 12:17 am #10
    ware

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

  11. 明城 April 9th, 2009 at 10:07 am #11
    明城

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

  12. digcrazy April 9th, 2009 at 10:25 am #12
    digcrazy

    我一直用的tween，不知道tween是不是您写的？

  13. Wasabi April 9th, 2009 at 05:04 pm #13
    Wasabi

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

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

  14. 蚂蚁 April 11th, 2009 at 03:02 pm #14
    蚂蚁

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

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

  15. 传说中的哥儿 April 21st, 2009 at 05:09 pm #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. 传说中的哥儿 April 21st, 2009 at 05:13 pm #16
    传说中的哥儿

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

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

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

  18. 传说中的哥儿 April 22nd, 2009 at 11:52 am #18
    传说中的哥儿

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

    供后来人参考：

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

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

  19. 锐风 May 26th, 2009 at 11:01 am #19
    锐风

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

  20. 锐风 May 26th, 2009 at 11:02 am #20
    锐风

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

  21. Alex.li August 7th, 2009 at 11:22 am #21
    Alex.li

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

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

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

  22. 手气不错 August 7th, 2009 at 05:54 pm #22
    手气不错

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

Yahoo 统计