专栏名:苹果官网特效copy-1
所有者:泰安码农大奔

主要是学习一下,做动画等特效的时候,一个完整的流程是怎样的 学会怎么开始下手,是我的主要目的。

特效截图

Alt text

效果地址

地址《===》原址

思考的问题

  • 产品落到平行线后的颤动效果
  • 点击Products或者iTunes and more的时候,动画的滑入,滑出效果
  • 关于js与css动画之间,怎么控制好之间的关系

思考&发现&思考过程

要研究动画,当然要先解决css动画问题。即产品下落过程,还有滑入,滑出动作的产生。

翻看css文件(根据父级class之类的)

可以找到productbrowser.css,里面的animation不多,可以找到pb-open下面定义的动画,即开场动画

简单分析下:

  • 默认状态下,六个产品图片为opacity:0,即隐藏的
  • open-1动画为例,
    @-webkit-keyframes open-1 {
        from { opacity:0; -webkit-transform:translate3d( 210px, -145px, 0); }
        25%  { opacity:1; -webkit-transform:translate3d( -15.6px, 4.1px, 0); }
        30%  { opacity:1; -webkit-transform:translate3d( -10.3px, 2.7px, 0); }
        35%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
        40%  { opacity:1; -webkit-transform:translate3d( 4.5px, -1.2px, 0); }
        45%  { opacity:1; -webkit-transform:translate3d( 2.9px, -0.8px, 0); }
        50%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
        55%  { opacity:1; -webkit-transform:translate3d( -1.3px, 0.3px, 0); }
        60%  { opacity:1; -webkit-transform:translate3d( -0.8px, 0.2px, 0); }
        65%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
        70%  { opacity:1; -webkit-transform:translate3d( 0.4px, -0.1px, 0); }
        75%  { opacity:1; -webkit-transform:translate3d( 0.2px, -0.1px, 0); }
        80%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
        85%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
        90%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
        to   { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    }

看到这么大段的动画3d位置改变,很难想象具体的动作。所以可以借助一下工具

TOUCHME

- 进入页面,点击`GROUP`按钮
- 把上端代码from改为0%,to改为100%,然后粘贴到浮层里面。
- 点击`play`,就可以看到效果了。
  • 动画结束,还有一个pb-opend状态,即opacity:1

关于动画结束的时间点的思考

  • 以前做动画结束,完全是依靠setTimout 动画的时间,肯定是有错误的,因为浏览器的时间,根本不是一个定值,你懂得。
  • 所以,赶快查看一下,人家苹果的逻辑
  • 找到overview.built.js,这个文件,搜索动画名称pb-open,虽然,偶的js基础一般般,但是可以发现一个重要逻辑
  • 竟然让我找到了AnimationStart AnimationEnd 这个两个事件,看到了阳光,有木有。原来动画也可以用js来控制的哈。 关于动画三个状态的思考(即opacity默认状态为0,动画开始从0变为1,最终状态为1)

  • 开始做animation的时候,经常为了各种动态效果,想破了头皮,然后最后做好了以后,慌慌的测试ie8 的时候,果然一团糟

  • 其实看这个效果的实现,如果不做anmation的话,网页完全和最终态一样。
  • 所以,页面的制作,一定要先做好静态版,然后以此为基础,进行动画的改进。否则,本末倒置,就不好了。

剩余效果,按照这个思路来,完全可以解决了

个人总结

  • 1.做css3动画的时候,一定要以静态页面为前提,然后去考虑动画效果
  • 2.用JS控制动画的过渡,一定要想好每一个流程之间的关系,禁止在js中出现css样式,否则会越写越乱。然后JS只是起一个连接作用,主要流程还是css来完成。
= '订阅者:' 邮件订阅(0)
成员
暂无文章
我的收藏