mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-22 19:28:47 +10:00
455 lines
15 KiB
HTML
455 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||
<meta name="format-detection" content="telephone=no">
|
||
<meta name="description" content="一个设计语言&前端框架"/>
|
||
<title>
|
||
缓动函数 - Ant Design
|
||
</title>
|
||
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||
|
||
<link rel="stylesheet" href="/dist/antd-0.8.0-beta1.css">
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
<link rel="stylesheet" href="/static/tomorrow.css">
|
||
<script>
|
||
(function (con) {
|
||
'use strict';
|
||
var prop, method;
|
||
var empty = {};
|
||
var dummy = function () {
|
||
};
|
||
var properties = 'memory'.split(',');
|
||
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
|
||
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
|
||
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
|
||
while (prop = properties.pop()) {
|
||
con[prop] = con[prop] || empty;
|
||
}
|
||
while (method = methods.pop()) {
|
||
con[method] = con[method] || dummy;
|
||
}
|
||
})(this.console = this.console || {});
|
||
</script>
|
||
<script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim-debug.js,es5-shim/4.0.5/es5-sham-debug.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,react-router/0.13.3/ReactRouter.js"></script>
|
||
<script>
|
||
var ANT_COMPONENTS = [];
|
||
ANT_COMPONENTS.push({
|
||
title: 'Button',
|
||
desc: '按钮'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Iconfont',
|
||
desc: '字体图标'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Layout',
|
||
desc: '布局'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Checkbox',
|
||
desc: '多选框'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Radio',
|
||
desc: '单选框'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Form',
|
||
desc: '表单'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Switch',
|
||
desc: '开关'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'InputNumber',
|
||
desc: '数字输入框'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Slider',
|
||
desc: '滑动输入条'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Datepicker',
|
||
desc: '日期选择框'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Select',
|
||
desc: '选择器'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Tabs',
|
||
desc: '标签页'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Steps',
|
||
desc: '步骤条'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Breadcrumb',
|
||
desc: '面包屑'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Collapse',
|
||
desc: '折叠面板'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Affix',
|
||
desc: '固定'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Alert',
|
||
desc: '警告提示'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Notification',
|
||
desc: '系统通知框'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Pagination',
|
||
desc: '分页'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Upload',
|
||
desc: '文件上传'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Tree',
|
||
desc: '树形控件'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Tag',
|
||
desc: '标签'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Menu',
|
||
desc: '导航菜单'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Carousel',
|
||
desc: '走马灯'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'EnterAnimation',
|
||
desc: '进场动画'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Modal',
|
||
desc: '对话框'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Message',
|
||
desc: '全局提示'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Dropdown',
|
||
desc: '下拉菜单'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Popover',
|
||
desc: '气泡卡片'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Popconfirm',
|
||
desc: '气泡确认框'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Tooltip',
|
||
desc: '文字提示'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Progress',
|
||
desc: '进度条'
|
||
});
|
||
ANT_COMPONENTS.push({
|
||
title: 'Table',
|
||
desc: '表格'
|
||
});
|
||
</script>
|
||
<script src="/static/script.js"></script>
|
||
<script>
|
||
window.antdVersion = {
|
||
latest: '0.8.0-beta1',
|
||
stable: '0.7.3'
|
||
};
|
||
</script>
|
||
<script src="/dist/antd-0.8.0-beta1.js"></script>
|
||
<script src="/dist/demo.js"></script>
|
||
<script>
|
||
window.require = function (path) {
|
||
var result = window;
|
||
var namespaces = path.split('/');
|
||
namespaces.forEach(function (key, i) {
|
||
if (i !== 0 && i === namespaces.length - 1) {
|
||
key = capitalizeFirstLetter(key);
|
||
}
|
||
if (key !== 'lib') {
|
||
if (result[key]) {
|
||
result = result[key];
|
||
} else {
|
||
throw 'There should not have modules here 2.';
|
||
}
|
||
}
|
||
});
|
||
function capitalizeFirstLetter(string) {
|
||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||
}
|
||
|
||
return result;
|
||
};
|
||
</script>
|
||
|
||
</head>
|
||
<body >
|
||
<header id="header" class="clearfix">
|
||
<a class="logo" href="/">
|
||
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
|
||
Ant Design
|
||
</a>
|
||
<div class="search">
|
||
<div id="autoComplete"></div>
|
||
</div>
|
||
<nav class="nav">
|
||
<span class="bar"></span>
|
||
<ul>
|
||
<li class="">
|
||
<a href="/">首页</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="/docs/introduce">使用</a>
|
||
</li>
|
||
<li class="current">
|
||
<a href="/spec/font">设计</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="/components">组件</a>
|
||
</li>
|
||
<li>
|
||
<a target="_blank" href="https://github.com/ant-design/ant-design">Github</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
<div class="main-wrapper">
|
||
|
||
<aside class="aside-container">
|
||
<ul>
|
||
<li>
|
||
<h4>文字</h4>
|
||
<ul class="">
|
||
<li class="">
|
||
<a href="font">
|
||
字体
|
||
<span class="chinese"></span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="typography">
|
||
排版
|
||
<span class="chinese"></span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h4>色彩</h4>
|
||
<ul class="">
|
||
<li class="">
|
||
<a href="color">
|
||
色系和交互
|
||
<span class="chinese"></span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h4>动画</h4>
|
||
<ul class="aside-list-show">
|
||
<li class="">
|
||
<a href="motion">
|
||
组件动画
|
||
<span class="chinese"></span>
|
||
</a>
|
||
</li>
|
||
<li class="current">
|
||
<a href="easing">
|
||
缓动函数
|
||
<span class="chinese"></span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="page-transition">
|
||
转场动画
|
||
<span class="chinese"></span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</aside>
|
||
|
||
<section class="main-container">
|
||
<article class="markdown">
|
||
<h1>缓动函数 </h1>
|
||
<p>现实物体照着一定节奏移动，并不是一开始就移动很快的。</p>
|
||
<p>当我们打开现代家具的门或抽屉时，首先会让它加速，然后慢下来。</p>
|
||
<p>当电梯开关门时，它在打开或关闭时都有一段缓冲带，是先加速，然后慢下来。</p>
|
||
<p>当某个东西往下掉时，首先是越掉越快，撞到地上后回弹，最终才又碰触地板。</p>
|
||
<h3 id="质量和重量">质量和重量</h3><p>在物理世界里，是以力量附加到物体对象里，加上自身的质量才完成一段动画。力量的持续时间决定物体的加速，减速与改变方向。</p>
|
||
<p>动画停止与启动都不是瞬间完成的，因它需要一段缓冲的时间来加速或减速，因此，当动画有突然启动，停止或改变方向，都会显得很不自然。</p>
|
||
<h4 id="自然缓动">自然缓动</h4><p>不要用直线缓动Linear做物体出入动画的缓动；注：Linear函数可做循环动画函数。</p>
|
||
<p>如下图所示，在没有缓动的情况下启动与停止都显得突兀，感觉动画还没结束就停止了，所以在物体运动中避免直线运动。</p>
|
||
<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>
|
||
|
||
|
||
<p>上图所示缓动函数：红 <code>Linear</code>，蓝 <code>easeInOutQuad</code>。</p>
|
||
<h4 id="出入动画">出入动画</h4><p>不要做单向动画，进场后不做出场，直接消失元素或回到原点，会让整个画面不协调，反相只出不进也一样。</p>
|
||
<p>所以有动画的进场必须要有动画的出场，包括导航上的动画。</p>
|
||
<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>
|
||
|
||
<p>上图所示缓动函数：红 <code>easeInOutQuad</code>，蓝 <code>easeInOutCubic</code>。</p>
|
||
<h5 id="场外出入">场外出入</h5><p>场外出入需要考虑力量与引力的关系，如向空中抛物体时，开始时力量大于引力时，速度是最快的，</p>
|
||
<p>到达一定高度后，随着力量的减少，速度也跟随着降低，物体达到最高点后，力量等于引力或小于引力时，物体随之下降；</p>
|
||
<p>所以在快到达最高点和掉下来时有一定缓冲带；不要做图示红色球体下降时的缓动；</p>
|
||
<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>
|
||
|
||
<p>上图所示缓动函数：红 <code>easeOutQuad</code> <code>easeOutQuad</code>，蓝 <code>easeOutCubic</code> <code>easeInCubic</code>。</p>
|
||
<p>示例组件：<a href="/components/message/">Message 全局提示</a>，<a href="/components/dropdown/">Dropdown 下拉菜单</a>。</p>
|
||
<h4 id="弹性动画">弹性动画</h4><ol>
|
||
<li><p>如蹦极跳下来时，刚跳下时速度很快，到达绳子的长度后，由于物体的重量再将绳子拉长再反弹，弹动几次后才停下。</p>
|
||
<p>动画里也由质量来决定它的反弹，一般元素最好只弹动一次就够了，收回时可以用向下浮动再上拉或直接前缓动，可适用在下拉框与弹出元素。</p>
|
||
</li>
|
||
<li><p>如球类物体掉地上的后，反弹几次后停止。</p>
|
||
<ul>
|
||
<li>曲线图用的是3次贝塞尔曲线，没法表示Bounce，所以用line替换。</li>
|
||
<li>弹性动画最好结合alpha。</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
<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>
|
||
|
||
<p>上图所示缓动函数：红 <code>easeOutBounce</code> <code>easeInOutQuad</code>，蓝 <code>easeOutBack</code> <code>easeInBack</code>。</p>
|
||
<h2 id="缓动函数">缓动函数</h2><p>Ant Design 提供了一套缓动函数规范动画行为。</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>名称</th>
|
||
<th>参数</th>
|
||
<th>说明与适用</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>@ease-out</td>
|
||
<td><code>cubic-bezier(0.215,0.61,0.355,1);</code></td>
|
||
<td>默认后缓动；适合元素展开时；</td>
|
||
</tr>
|
||
<tr>
|
||
<td>@ease-in</td>
|
||
<td><code>cubic-bezier(0.55,0.055,0.675,0.19);</code></td>
|
||
<td>默认前缓动；适合元素关闭时；</td>
|
||
</tr>
|
||
<tr>
|
||
<td>@ease-in-out</td>
|
||
<td><code>cubic-bezier(0.645,0.045,0.355,1);</code></td>
|
||
<td>默认前后缓动；适合元素移动；</td>
|
||
</tr>
|
||
<tr>
|
||
<td>@ease-out-back</td>
|
||
<td><code>cubic-bezier(0.18,0.89,0.32,1.28);</code></td>
|
||
<td>结束回动；适合弹出框出现时；</td>
|
||
</tr>
|
||
<tr>
|
||
<td>@ease-in-back</td>
|
||
<td><code>cubic-bezier(0.6,-0.3,0.74,0.05);</code></td>
|
||
<td>开始回动；适合弹出框关闭；</td>
|
||
</tr>
|
||
<tr>
|
||
<td>@ease-in-out-back</td>
|
||
<td><code>cubic-bezier(0.68,-0.55,0.27,1.55);</code></td>
|
||
<td>前后回动；</td>
|
||
</tr>
|
||
<tr>
|
||
<td>@ease-out-circ</td>
|
||
<td><code>cubic-bezier(0.08,0.82,0.17,1);</code></td>
|
||
<td>圆形后缓动；适合元素展开时；</td>
|
||
</tr>
|
||
<tr>
|
||
<td>@ease-in-circ</td>
|
||
<td><code>cubic-bezier(0.6,0.04,0.98,0.34);</code></td>
|
||
<td>圆形前缓动；适合元素关闭时；</td>
|
||
</tr>
|
||
<tr>
|
||
<td>@ease-in-out-circ</td>
|
||
<td><code>cubic-bezier(0.78,0.14,0.15,0.86);</code></td>
|
||
<td>圆形缓动；适合元素移动；</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
</article>
|
||
</section>
|
||
|
||
</div><footer id="footer">
|
||
<ul>
|
||
<li>
|
||
<h2>GitHub</h2>
|
||
<a target="_blank "href="https://github.com/ant-design/ant-design">仓库</a>
|
||
<a target="_blank" href="https://github.com/ant-design/ant-design/tree/master/style">样式</a>
|
||
<a target="_blank" href="https://github.com/ant-design/antd-bin">开发工具</a>
|
||
</li>
|
||
<li>
|
||
<h2>关于我们</h2>
|
||
<a href="http://www.atatech.org/teams/79">博客 - Ant UED</a>
|
||
</li>
|
||
<li>
|
||
<h2>联系我们</h2>
|
||
<a target="_blank" href="https://github.com/ant-design/ant-design/issues">问题与建议 - Issues</a>
|
||
</li>
|
||
<li>
|
||
<h3>©2015 蚂蚁金服体验技术部出品</h3>
|
||
</li>
|
||
</ul>
|
||
</footer>
|
||
</body>
|
||
</html> |