6句代码实现六宫格重力作用出场动画-GSAP_TweenMax_3D_transform
作者:admin 日期:2014-12-30昨天群友发出一个网站中有一个导航条出场效果，挺有味道。于是花了2小时模仿成功，我作品在此：
http://258754.com/m/zgl/TweenMax_3D_transform.HTML
原站在此：http://cswzs.csjinmaohui.com///?nsukey=r1DXSmigepQZpFjQItTf9pGeJpxXjmi5G9oWsiOr85FYnOU5yWXU4Idy48Cy79MIFo934MArZBDCRHDMCXezpA%3D%3D
GSAP范例在此：http://greensock.com/css3/
----------------------------------------------------------------
不查不知道，原来GSAP有如此强大的CSS动画功能，尤其是对于仿3D变换的支持。只是GS官网上的文章虽多，但源码较少，辗转stackoverflow.com找到一些相应的源码。
我个人比较喜欢GSAP来替代CSS动画，GS官网上说是GSAP的时间轴TWEEN类动画，无论是从代码效率还是代码简练度上，都远超CSS动画。至少后者是属实的。这6句代码，如果有用CSS写，会写上一大版。
Javascript代码
- <script src="js/jquery.min.js"></script>
- <script src="js/TweenMax.min.js"></script>
- <script>
- TweenMax.fromTo($(".a2"), .3, {scale:.5,alpha:0}, {scale:1,alpha:1});
- TweenMax.fromTo($(".a1"), 2, {rotationY:-90}, {rotationY:0,transformOrigin:"right center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});
- TweenMax.fromTo($(".a3"), 2, {rotationY:90}, {rotationY:0,transformOrigin:"left center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});
- TweenMax.fromTo($(".a4"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:0.9});
- TweenMax.fromTo($(".a5"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.1});
- TweenMax.fromTo($(".a6"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.2});
- </script>
苦B的项目经理----你预算只有2千，你劝你直接自吻吧
作者:admin 日期:2014-12-30客户R 2014/8/26 13:01:50
在？
嘟嘟 14:54:46
客户R 14:55:13
你是做flash动画的？
嘟嘟 14:55:23
能做。
客户R 14:56:51
我们有一项目 有个页面需要做几个flash动画 我们这边自己没这方面的人做 希望找个能做这个的
师哥很简单的动画
是个
嘟嘟 14:58:05
我现在主要是做HTML+JS动画了。FLASH倒是也能做。你说说具体要求。
客户R 14:58:43
恩 好 我先给你们介绍下我们做的背景
我们在做一个空气质量预报系统 在对外发布页面希望以动画的方式发布空气质量
场景1：空气质量为优
客户R 14:59:54
小狗两脚走路从狗屋出来；深呼吸，做一个惊讶的笑脸；兴奋的开始做热身运动；四脚着地，欢快的从左到右跑，离开屏幕；
这是其中一个场景 总共四个
7个
嘟嘟 15:00:32
哦，你这是要做创意。这个恐怕费用不低。
客户R 15:01:00
这不算创意吧
这个思路我们已经写出来了 你只要动画实现就ok
嘟嘟 15:01:48
小狗的形象原型什么的，你们设计了没？你们现在只有文字稿，是吧？
客户R 15:02:40
恩
小狗形象有
嘟嘟 15:03:11
深呼吸，做一个惊讶的笑脸----这些都要做创作了。
客户R 15:03:18
嘟嘟 15:03:28
相当于做一个微型的动画片了。
客户R 15:03:33
就这个个大头狗
嘟嘟 15:04:03
这些我做不了。我强项还是在编程逻辑上。
客户R 15:04:17
呵呵 我们这边同行有做过这种动画
哦 好吧
嘟嘟 15:04:30
建议你们联系一下动画（卡通）制作公司或是形象设计公司。
客户R 15:05:02
额？呵呵 我是在广州 但是是长沙人 所以就来长沙找你们了
呵呵
嘟嘟 15:05:10
你这场景是用于网站，还是手机项目？
客户R 15:05:25
系统网站
嘟嘟 15:06:06
哦。动画要做得如此精美？很少见。成本恐怕不低。
客户R 15:07:12
这是很简单的吧
类似这样的
客户R 15:08:19
推荐安装全能绿色的QQ影音播放本文件。
嘟嘟 15:08:47
至少我在国内网站上和APP上，很少看到类似做法。
客户R 15:09:17
呵呵
嘟嘟 15:09:25
更多的还是较简练的图象表达。比如我用的墨迹天气这种。
客户R 15:10:05
哎 没办法啊 人家领导要求这样
嘟嘟 15:10:59
今天还看到知乎上一个评论。说 知乎当时在首页上放了一个类似你这样的动画（视频），结果浪费的流量大得惊人。
哈哈，每一个苦B的项目后面，都有一个天神般的领导。
客户R 15:11:30
这不是手机上的 也无所谓吧
哎 政府的大大们 无法评论啊
嘟嘟 15:12:19
你系统访问量不大当然没问题。如果是FLASH，还要考虑跨平台的问题。比如IPAD.
我群里有专门做卡通的牛人。如果你预算在2万以上。我可以介绍一下。
客户R 15:13:05
人家怎样要求 咱就怎样做 没办法啊 咱要他的钱 他自然要咱的命啊
那算了吧 呵呵
嘟嘟 15:13:33
你预算只有2千，你劝你直接自吻吧。
客户R 15:13:56
我们老大也是个门外汉 说几个小视频超过五千 就不提
我能咋整啊
要命
嘟嘟 15:14:08
找刀去吧。
