2SIMPLE

我们已经回来

想搞个动画还真不容易

跟cobalt商量，想在糗事百科的顶和拍上加个动画，用户点击的时候有“+1”和“-1”的字样闪过屏幕，类似OSX中点击图标之后的效果，目的是让用户知道他的点击生效了。

昨天想到三个方案：
1、纯js控制字符字体和透明度
2、js + gif动画
3、js + flash动画

考虑倒flash的动画效果最好，决定用flash先来试试，于是我做了一个flash动画，交给cobalt来用js驱动它的显示。根据鼠标点击位置定位这个动画的问题在clearbox中已经算是有技术储备了（我也是根据技术可行性想到的这个动画效果），但是遇到了一些新的问题。如果这个flash所在的容器（div）的display是none，那么ie不会load它；如果它不在屏幕中（比如坐标是-100,-100），那么fx不会载入它。搞定这些问题还是花了点时间，把flash的第一帧做成透明的，放在0,0的位置，就可以了。点击之后改变它的位置，播放，又发现两个问题。如果flash在鼠标指针下面显示，对于IE7会出现需要激活的虚线框；动画播放结束之后要重新改变它的位置倒0,0，flash里面要调用js来触发一下。

第二个问题比较容易搞定，第一个问题从技术的角度比较容易搞定，但是动画要重新设计一下，准备采用游戏里面掉血头上冒数字的那种方式……

demo1、demo2

Written by Datou

二月 6th, 2007 at 11:51 下午

22条评论

«
»

22 Responses to '想搞个动画还真不容易'

Subscribe to comments with RSS or TrackBack to '想搞个动画还真不容易'.

  1. safari下木有问题，除了简陋了一点。
    一个问题是动画总出现在正中。这样，如果点击的糗事是在屏幕上下端的话，动画出现在了其他糗事上，会发生误解吧？如果动画位置和点击挂钩就好些……

    ac2001

    2007/02/07 01:04

  2. 总在正中是不对的，看看如何修复吧，如果没办法，那就在safari下面禁用这个特效好了。

    Datou

    2007/02/07 08:17

  3. 几点意见：

    动画位置需要调整
    动画有点单调，我希望看到的是点顶时一只火箭缓缓升起，点拍时那只苍蝇掉下去……淡入淡出，帧数慢一些比较好
    maxthon下点击无响应

    4400

    2007/02/07 09:47

  4. 你的理想期望太高了……

    Datou

    2007/02/07 10:05

  5. 有个问题，我点击后滚动条被滚回到（0，0）去了。

    sume

    2007/02/07 10:08

  6. To 4440
    你对datou的美术修养/技术期望太高了 ^+++^

    To sume
    你的浏览器及版本是什么

    cobalt

    2007/02/07 10:30

  7. 因为现在动画效果加在了一个herf="#"上，如果窗口往下滚动过，会滚动上去的，这个问题在发布的时候会搞定

    Datou

    2007/02/07 10:39

  8. 再说一句。2simple上的网页，如果碰上回复比较长需要拖动滚动条的情况，在safari上非常非常奇怪，像是突然断掉了，不能完整显示一样。拖到了某个点，之后的文字和图片会像鬼一样突然消失，或者原来就根本木有？比如真心话大冒险那个页面就最明显。

    ac2001

    2007/02/07 10:48

  9. 我也发现了，safari对div的处理跟ie/fx/opera都不同，周末抽时间处理一下，可能比较难搞定，我也是刚开始用osx，之前压根没考虑、测试过safari

    Datou

    2007/02/07 11:05

  10. opera 9.10
    第一次点顶（拍）或者点击过拍（顶）后的第一次点击顶（拍）会先显示-1（+1）的动画再显示+1（-1）动画。
    连续的第二次点击顶（拍）显示才正常。

    dimlau

    2007/02/07 11:13

  11. 确实简陋了点,
    把+1换成红苍蝇,-1换成绿苍蝇呢?

    zicjin

    2007/02/07 12:24

  12. 我烦死这么多浏览器了……

    Datou

    2007/02/07 12:27

  13. 我烦死这么多浏览器了……

    Datou

    2007/02/07 12:27

  14. 我烦死这么多浏览器了……

    Datou

    2007/02/07 12:27

  15. 你卡了

    cobalt

    2007/02/07 13:14

  16. datou，哈哈哈哈

    ac2001

    2007/02/07 13:16

  17. 大头大头，下雨不愁

    你以为加点新功能是这么容易的事莫……

    4400

    2007/02/07 15:00

  18. FF2下：demo1每次点击会自动滚动到页首，不过+/-1的浮现位置正确；demo2每次点击页面不会自动滚动，不过+/-1的浮现位置有些靠上。如果两者综合一下的话就完美了~

    xorms

    2007/02/07 16:38

  19. 不用再和demo较劲了，这个特性已经发布

    Datou

    2007/02/07 20:05

  20. 为什么FF2下，点了顶，鼠标一直是沙漏状态呢？

    xorms

    2007/02/08 11:22

  21. 而且等了半天，好容易数字变了，可是不是涨1，而是涨2。是不是程序有问题啊？

    xorms

    2007/02/08 11:30

  22. 因为服务器不是很强壮，所以提交的时候可能会需要等会儿，这段时间如果正好别人也在等，返回的数字就会+n

    Datou

    2007/02/08 15:31

Leave a Reply