update for motion

components/antacss/index.md

+# CSS and Ease
+
+- category: Animation
+- chinese: 样式缓动函数
+- order: 3
+- nodemos: true
+---
+待定
\ No newline at end of file

components/naturalmotion/index.md

+# Natural Motion
+
+- category: Animation
+- chinese: 自然运动
+- order: 0
+- nodemos: true
+---
+
+现实物体照着一定节奏移动，并不是一开始就移动很快的。
+
+当我们打开现代家具的门或抽屉时，首先会让它加速，然后慢下来。
+
+当电梯开关门时，它在打开或关闭时都有一段缓冲带，是先加速，然后慢下来。
+
+当某个东西往下掉时，首先是越掉越快，撞到地上后回弹，最终才又碰触地板。
+
+
+### 质量和重量
+
+在物理世界里，是以力量附加到物体对象里，加上自身的质量才完成一段动画。力量的持续时间决定物体的加速，减速与改变方向。
+
+动画停止与启动都不是瞬间完成的，因它需要一段缓冲的时间来加速或减速，因此，当动画有突然启动，停止或改变方向，都会显得很不自然。
+
+#### 自然缓动
+不要用直线缓动Linear做物体出入动画的缓动；注：Linear函数可做循环动画函数；
+
+如下图所示，在没有缓动的情况下启动与停止都显得突兀，感觉动画还没结束就停止了，所以在物体运动中避免直线运动；
+
+<script src="/static/TweenMax.min.js"></script>
+<script src="/static/motion.js"></script>
+<div id="J-Linear">
+</div>
+
+<script>
+$(function (){
+new Motion("#J-Linear",{lineData:[{open:[],end:[],stroke:"#f2666c"},{open:[0.455, 0.03, 0.515, 0.955],end:[0.455, 0.03, 0.515, 0.955],stroke:"#71B5DE",openEaseName:"easeInOutQuad",endEaseName:"easeInOutQuad"},],mask:false});
+})
+</script>
+
+上图所示缓动函数：红：Linear 蓝：easeInOutQuad；
+
+
+
+
+#### 出入动画
+不要做单向动画，进场后不做出场，直接消失元素或回到原点，会让整个画面不协调,反相只出不进也一样；
+
+所以有动画的进场必须要有动画的出场，包括导航上的动画；
+
+<div id="J-Symmetric">
+</div>
+
+<script>
+$(function (){
+new Motion("#J-Symmetric",{lineData:[
+{open:[0.455, 0.03, 0.515, 0.955],end:[],openEaseName:"easeInOutQuad",endEaseName:"null",stroke:"#f2666c"},
+{open:[0.645, 0.045, 0.355, 1],end:[0.645, 0.045, 0.355, 1],stroke:"#71B5DE",openEaseName:"easeInOutCubic",endEaseName:"easeInOutCubic"}],
+mask:false,exposure:"top"});
+})
+</script>
+
+上图所示缓动函数：红：easeInOutQuad 蓝：easeInOutCubic；
+
+
+
+
+##### 场外出入
+场外出入需要考虑力量与引力的关系，如向空中抛物体时，开始时力量大于引力时，速度是最快的，
+
+到达一定高度后，随着力量的减少，速度也跟随着降低，物体达到最高点后，力量等于引力或小于引力时，物体随之下降；
+
+所以在快到达最高点和掉下来时有一定缓冲带；不要做图示红色球体下降时的缓动；
+
+<div id="J-Entry">
+</div>
+
+<script>
+$(function (){
+new Motion("#J-Entry",{lineData:[
+{open:[0.25, 0.46, 0.45, 0.94],end:[0.25, 0.46, 0.45, 0.94],openEaseName:"easeOutQuad",endEaseName:"easeOutQuad",stroke:"#f2666c"},
+{open:[0.215, 0.61, 0.355, 1],end:[0.55, 0.055, 0.675, 0.19],stroke:"#71B5DE",openEaseName:"easeOutCubic",endEaseName:"easeInCubic"}],
+mask:true,exposure:"bottom"});
+})
+</script>
+
+上图所示缓动函数：红：easeOutQuad,easeOutQuad 蓝：easeOutCubic,easeInCubic；
+
+示例组件：<a href="/components/message/">Message全局提示</a>,<a href="/components/dropdown/">Dropdown下拉菜单</a>
+
+#### 弹性动画
+
+1.如蹦极跳下来时，刚跳下时速度很快，到达绳子的长度后，由于物体的重量再将绳子拉长再反弹,弹动几次后才停下。
+
+  动画里也由质量来决定它的反弹，一般元素最好只弹动一次就够了，收回时可以用向下浮动再上拉或直接前缓动，可适用在下拉框与弹出元素;
+
+2.如球类物体掉地上的后，反弹几次后停止;
+
+注:
+1.曲线图用的是3次贝塞尔曲线，没法表示Bounce，所以用line替换;
+2.弹性动画最好结合alpha;
+<div id="J-Back">
+</div>
+
+<script>
+$(function (){
+new Motion("#J-Back",{lineData:[
+{open:[],end:[0.455, 0.03, 0.515, 0.955],openEaseName:"easeOutBounce",endEaseName:"easeInOutQuad",stroke:"#70f266"},
+{open:[0.175, 0.885, 0.32, 1.275],end:[0.6, -0.28, 0.735, 0.045],stroke:"#71B5DE",openEaseName:"easeOutBack",endEaseName:"easeInBack"}],
+mask:false,exposure:"top"});
+})
+</script>
+
+上图所示缓动函数：红：easeOutBounce,easeInOutQuad 蓝：easeOutBack,easeInBack；
\ No newline at end of file

components/pagetransition/index.md

+# Page transition
+
+- category: Animation
+- chinese: 单页面转场
+- order: 2
+- nodemos: true
+---
+###单页面转场动画
+
+从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
+
+####视觉连贯性
+
+####三类元素（Adding ,Receding,Normal)
+
+Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
+
+Receding:  与当前页无关的信息元素应采用适当方式移除
+
+Normal: 指那些从转场开始到结束都没有发生变化的信息元素
+
+
+· 大页面转场可采用淡入淡出的形式
+
+· 小的信息元素排布最好根据一定的路径层次依次进场 区分维度层级 来凸显量级 
+
+####可折叠面板
+
+对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。被展开的信息区域内容按照一定的路劲依次进场。信息元素在收起时在视觉上整齐划一。
+
+####对象展开
+
+信息元素被扩大发现其隐藏的内容,通过缩放对象的遮罩来显示隐藏的内容。这样可减少页面新的信息元素（Incoming)的增加，直接从页面本身的信息元素来做变形可提高用户对新内容的认知和识别。
+
+####弹出框动效
+
+从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。
+
+
+ 

components/resInteraction/index.md

+# Response ITN
+
+- category: Animation
+- chinese: 响应交互
+- order: 1
+- nodemos: true
+---
+响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。
+
+如搜索框，当你点击准备输入时，icon将会跑到右边方便点击，当然你按回车也是可以提交表单的；在你没有输入文字时，icon又会恢愎到原来的地置，但当你输入了文字后，icon将会停留在右边；
+
+### 按钮类表面效果
+
+按钮上的hover或click效果，随着你的鼠标事件而改变自身或增加元素在按钮上；
+
+以下按钮对组件按钮的修改，只做示例，具体还需看组件；
+<link rel="stylesheet" href="/static/motion.css">
+<link rel="stylesheet" href="/static/motionDome.css">
+<script src="/static/motionDome.js"></script>
+<div style="overflow: hidden;">
+<div style="width:200px;float:left;margin-right:60px">
+<p style="text-align: center;"> 1.按钮表面效果；</p>
+<div class="ant-btn-domebox">
+<a class="ant-btn ant-btn-primary">我是按钮</a>
+<a class="ant-btn ant-btn-primary ant-btn-ripple">
+点击涟漪按钮
+</a>
+<a class="ant-btn ant-btn-ripple">
+点击涟漪按钮
+</a>
+<button class="ant-btn ant-btn-ghost ant-btn-circle-outline ant-btn-lg" style="display: block;">
+  <span class="anticon anticon-search"></span>
+</button>
+</div>
+</div>
+<div style="width:200px;float:left;">
+<p style="text-align: center;"> 2.无素结合切换;</p>
+<div class="ant-btn-domebox">
+<button class="ant-btn ant-btn-primary ant-btn-ripple ant-btn-load ">
+  <text>加载按钮</text>
+  <span class='anticon anticon-loading'></span>
+</button>
+<button class="ant-btn ant-btn-primary ant-btn-reload ant-btn-ripple">
+<span class="anticon anticon-reload"></span>
+<text>刷新</text>
+</button>
+</div>
+</div>
+</div>
+
+### 元素类呈现效果
+
+元素呈现指点击或滑过展现相关的内容或提示，如下拉菜单或弹出框等；
+
+注：物体弹出点要从点击点出现，不要做凭空出现；
+
+
+<div style="overflow: hidden;">
+
+<div style="width:200px;float:left;margin-right:60px">
+<p style="text-align: center;"> 1.icon菜单(点放大模式)</p>
+<div class="ant-btn-domebox" >
+
+
+<button class="ant-btn ant-btn-ghost ant-btn-circle-outline ant-btn-lg ant-btn-ripple ant-btn-listtip" style="float:right;margin:0" data-id="J-Tip">
+  <span class="anticon anticon-bars"></span>
+</button>
+<div class="ant-anim-dometip ant-anim-topArrow scale-origin-iconTopRight" style="display:none;" id="J-Tip">
+<ul>
+<li>第一排文字元素</li>
+<li>第二排文字元素</li>
+<li>第三排文字元素</li>
+<li>第四排文字元素</li>
+</ul>
+</div>
+</div>
+</div>
+
+<div style="width:200px;float:left;">
+<p style="text-align: center;">2.下拉菜单(下滑模式)</p>
+<div class="ant-btn-domebox">
+
+
+<div class="ant-dropdown-wrap">
+<button class="ant-btn ant-btn-primary ant-btn-menu ant-btn-dropdown ant-btn-ripple">
+  <span>菜单按钮</span>
+  <span class="anticon anticon-down"></span>
+</button>
+<div class="ant-dropdown ant-anim-dometip scale-origin-top">
+<div class="ant-dropdown-con">
+<ul>
+<li>第一排文字元素</li>
+<li>第二排文字元素</li>
+<li>第三排文字元素</li>
+<li>第四排文字元素</li>
+</ul>
+</div>
+</div>
+</div>
+
+
+</div>
+</div>
+
+</div>
\ No newline at end of file

static/motion.css

+
+/******动画名称******/
+
+.scale-open{
+    display: block !important;
+    animation: ToScale .4s cubic-bezier(0.08, 0.82, 0.17, 1);
+    -webkit-animation: ToScale .4s cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.scale-close{
+    display: block !important;
+    animation: FromScale .4s cubic-bezier(0.6, 0.04, 0.98, 0.34);
+    -webkit-animation: FromScale .4s cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.scale-origin-top{
+    transform-origin: top;
+}
+.scale-origin-left{
+    transform-origin: left;
+}
+.scale-origin-bottom{
+    transform-origin: bottom;
+}
+.scale-origin-right{
+    transform-origin: right;
+}
+.scale-origin-iconTopRight{
+    transform-origin: calc(100% - 10px) -10px;
+}
+.margin-top-open{
+    display: block !important;
+    animation: ToMaginTop .4s cubic-bezier(0.08, 0.82, 0.17, 1);
+    -webkit-animation: ToMaginTop .4s cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.margin-top-close{
+    display: block !important;
+    animation: FromMaginTop .4s cubic-bezier(0.6, 0.04, 0.98, 0.34);
+    -webkit-animation: FromMaginTop .4s cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+
+/*********动画***********/
+@keyframes ToScale {
+    0%{
+        opacity: 0;
+        transform: scale(0);
+    }
+    100%{
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+@keyframes FromScale {
+    0%{
+        opacity: 1;
+        transform: scale(1);
+    }
+    100%{
+        opacity: 0;
+        transform: scale(0);
+    }
+}
+@keyframes ToMaginTop {
+    0%{
+        opacity: 0;
+        margin-top: -100%;
+    }
+    100%{
+        opacity: 1;
+        margin-top: 0%;
+    }
+}
+@keyframes FromMaginTop {
+    0%{
+        opacity: 1;
+        margin-top: 0%;
+    }
+    100%{
+        opacity: 0;
+        margin-top: -100%;
+    }
+}
\ No newline at end of file

static/motionDome.css

+.ant-btn-domebox{
+    background-color: #f3f3f3;
+    width:100%;
+    text-align:center;
+    overflow:hidden;
+    padding: 20px;
+    min-height: 236px;
+}
+.ant-anim-box{
+    width: 800px;
+    height: 300px;
+    transform: scale(1);
+    transform-origin: 0px 0px 0px;
+    background-color: #efefef;
+    position: relative;
+}
+.ant-btn{
+    margin:10px auto;
+}
+.ant-btn-lq{
+    display:block;
+    position:absolute;
+    opacity:.2;
+    transform:scale(0);
+    -webkit-transition:scale(0);
+    transition: transform .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    -webkit-transition: -webkit-transform .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+.anticon-loading{
+    position:absolute;
+    left:50%;
+    margin-left:-7px;
+    opacity:0;
+    transform: scale(0);
+    -webkit-transform:scale(0);
+}
+.ant-btn-load,.ant-btn-load span,.ant-btn-load text{
+    transition: all .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    -webkit-transition: all .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+.anticon-loading:before {
+    font-size:18px
+}
+.ant-btn-reload{
+    display: block;
+}
+.ant-btn-reload text{
+    display: block;
+    position: absolute;
+    top:100%;
+    left:50%;
+    margin-left: -12px;
+}
+.ant-btn-reload span,.ant-btn-reload text{
+    transition: all .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    -webkit-transition: all .4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+.anticon-reload{
+    font-size: 16px !important;
+}
+.ant-btn-reload:hover text{
+    top:50%;
+    margin-top: -9px;
+}
+.ant-btn-reload:hover span{
+    transform: translateY(-22px);
+}
+
+.ant-anim-dometip{
+    position: absolute;
+    background: #fff;
+    box-shadow: 2px 2px 5px rgba(0,0,0,.15);
+    /*transform: scale(0);
+    -webkit-transform: scale(0);*/
+}
+.ant-anim-dometip ul{
+    padding: 20px;
+}
+.ant-anim-topArrow:before{
+    content: " ";
+    display: block;
+    position: absolute;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid white;
+    right: 5px;
+    top:-10px
+}
+.ant-dropdown-wrap{
+    text-align: left;
+}
+.ant-dropdown-wrap .ant-btn{
+    margin-bottom: auto;
+}
+.ant-dropdown-wrap .ant-dropdown{
+    left:auto;
+    top:auto;
+    display: none;
+    min-width: 0;
+    overflow: hidden;
+}

static/motionDome.js

+/**
+ * Created by jljsj on 15/6/30.
+ */
+$(function (){
+    var animBtnDome={
+        animStr:'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
+        init:function() {
+            var self=this;
+            self.body=$("body");
+            self.btn=$(".ant-btn-ripple");
+            //$(".ant-btn-lq").bind("click",function (le){
+            //    le.stopPropagation();
+            //});
+
+            //涟漪效果
+            self.btn.bind("mousedown",function (e){
+                //console.log(e)
+                //var _x= e.offsetX,_y= e.offsetY;
+                var __x=$(this).offset().left,__y=$(this).offset().top,
+                    _x= e.pageX-__x,_y= e.pageY-__y;
+                var lq=$("<em class='ant-btn-lq'></em>").prependTo(this);
+                var _w=this.offsetWidth,_h=this.offsetHeight;
+                lq.removeAttr("style").css({width:_w,height:_w,"border-radius":_w/2,left:_x-_w/2,top:_y-_w/2});
+                if($(this).attr("class").indexOf("ant-btn-primary")>=0||$(this).attr("class").indexOf("ant-btn-ghost")>=0){
+                    lq.css("background-color","#fff");
+                }else{
+                    lq.css("background-color","#999");
+                }
+                var s=0;
+                //if(_h>=_w){
+                //    s=_y/_h*2<1?2-_y/_h*2:_y/_h*2;
+                //}
+
+                var _sx=_x/_w* 2,_sy=_y/_h*2;
+                if(_sx>1&&_sy>1){
+                    s=_sx>_sy?_sx:_sy;
+                }else if(_sx>1||_sy>1){
+                    _sx=_sx<1?2-_sx:_sx;
+                    _sy=_sy<1?2-_sy:_sy;
+                    s=_sx>_sy?_sx:_sy;
+                }else {
+                    s=2-_sx>2-_sy?2-_sx:2-_sy;
+                }
+                s=s+.3;
+                lq.css("transform","scale("+s+")")
+
+            });
+            function mousee_up(e){
+                var lq=$(this).find(".ant-btn-lq");
+                lq.delay(300).animate({opacity:0},300,function (){
+                    lq.remove();
+                })
+            }
+            self.btn.bind("mouseout",mousee_up);
+            self.btn.bind("mouseup",mousee_up);
+
+            //加载按钮
+            self.loadBtn=$(".ant-btn-load");
+            self.loadBtn.bind("click",function (e){
+                var m=$(this);
+                m.find("text").css({"opacity":"0","transform": "scale(2)"});
+                m.find("span").css({"opacity":1,"transform": "scale(1)"});
+                setTimeout(function (){
+                    m.find("text").removeAttr("style");
+                    m.find("span").removeAttr("style")
+                },4000)
+            });
+
+            //替换
+            function reqClass(m,_class,call){
+                if(m.attr("class").indexOf(_class+"-open")>=0){
+                    m.removeClass(_class+"-open").addClass(_class+"-close").one(self.animStr,function (){
+                        m.removeClass(_class+"-close");
+                        if(typeof call=="function"){
+                            call()
+                        }
+                    })
+                }else{
+                    m.addClass(_class+"-open");
+                }
+            }
+
+            //icon的下拉演示
+            self.listTip=$(".ant-btn-listtip");
+            self.listTip.bind("click",function (e){
+                var m=$(this);
+                var tip=$("#"+m.attr("data-id"));
+                reqClass(tip,"scale");
+
+                tip.css({left: m.position().left-tip.width()+ m.outerWidth()-2,top: m.position().top+m.outerHeight()+12})
+            });
+
+            //dropdown演示的事件
+            self.dropdown=$(".ant-dropdown-wrap");
+            self.dropdown.find(".ant-btn-menu").bind("click",function (e){
+                var m=$(this),p= m.parent(),d= p.find(".ant-dropdown"),
+                    con= d.find(".ant-dropdown-con"),str="margin-top";
+                d.css({"display":"block","margin-top":2});
+                reqClass(con,str,function (){
+                    if(con.attr("class").indexOf('margin-top')<0){
+                        d.css({"display":"none"})
+                    }
+
+                });
+
+            })
+        }
+    };
+    animBtnDome.init()
+
+});
\ No newline at end of file

style/index.less

-@import "./core/index.less";
 @import "./themes/default/index.less";
+@import "./core/index.less";
 @import "./components/index.less";

style/themes/default/custom.less

@@ -36,9 +36,9 @@
 @duration-1000       : 1.0s;
 @duration-1100       : 1.1s;
 @duration-1200       : 1.2s;
-@ease-out            : cubic-bezier(0.25, 0.8, 0.25, 1);
-@ease-in             : cubic-bezier(0.55, 0, 0.55, 0.2);
-@ease-in-out         : cubic-bezier(0.35, 0, 0.25, 1);
+@ease-out            : cubic-bezier(0.215, 0.61, 0.355, 1);
+@ease-in             : cubic-bezier(0.55, 0.055, 0.675, 0.19);
+@ease-in-out         : cubic-bezier(0.645, 0.045, 0.355, 1);
 @ease-out-back       : cubic-bezier(0.18, 0.89, 0.32, 1.28);
 @ease-in-back        : cubic-bezier(0.6, -0.3, 0.74, 0.05);
 @ease-in-out-back    : cubic-bezier(0.68, -0.55, 0.27, 1.55);