mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
update animation doc
This commit is contained in:
罗宪
parent
345be9dc21
commit
0b89f3631a
@ -1,10 +0,0 @@
|
||||
# Easing
|
||||
|
||||
- category: Animation
|
||||
- chinese: 样式缓动函数
|
||||
- order: 3
|
||||
- nodemos: true
|
||||
|
||||
---
|
||||
|
||||
待定
|
||||
@ -1,8 +1,8 @@
|
||||
# Motion
|
||||
|
||||
- category: CSS
|
||||
- chinese: 动画
|
||||
- order: 3
|
||||
- category: Animation
|
||||
- chinese: 动画样式
|
||||
- order: 4
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Page transition
|
||||
# Page turning
|
||||
|
||||
- category: Animation
|
||||
- chinese: 单页面转场
|
||||
- chinese: 页面转换
|
||||
- order: 2
|
||||
- nodemos: true
|
||||
---
|
||||
@ -20,21 +20,46 @@ Receding: 与当前页无关的信息元素应采用适当方式移除
|
||||
Normal: 指那些从转场开始到结束都没有发生变化的信息元素
|
||||
|
||||
|
||||
· 大页面转场可采用淡入淡出的形式
|
||||
|
||||
· 小的信息元素排布最好根据一定的路径层次依次进场 区分维度层级 来凸显量级
|
||||
#### 转场动画
|
||||
|
||||
大页面转场可采用淡入淡出的形式
|
||||
|
||||
小的信息元素排布或块状较多的情况下，最好根据一定的路径层次依次进场，区分维度层级，来凸显量级，间隔时间为动画时间的三分之一；
|
||||
|
||||
如不是单页面，页面动画可以为只右进和间隔性出现；
|
||||
<script src="/static/TweenMax.min.js"></script>
|
||||
<script src="/static/motion.js"></script>
|
||||
|
||||
<div class="video-player">
|
||||
<video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T1QZ4gXdJeXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T1BIdgXkloXXXXXXXX.mp4" type="video/mp4"></video>
|
||||
</div>
|
||||
|
||||
|
||||
####可折叠面板
|
||||
|
||||
对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。被展开的信息区域内容按照一定的路劲依次进场。信息元素在收起时在视觉上整齐划一。
|
||||
对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。
|
||||
|
||||
####对象展开
|
||||
1.被展开的信息区域内容按照一定的路劲依次进场。
|
||||
|
||||
2.信息元素在收起时照收齐点移动，在视觉上跟随关闭物体。
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/static/motionDemo.css">
|
||||
|
||||
<div class="video-player">
|
||||
<video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T12I8gXexdXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T1e0hgXcpdXXXXXXXX.mp4" type="video/mp4"></video>
|
||||
</div>
|
||||
|
||||
信息元素被扩大发现其隐藏的内容,通过缩放对象的遮罩来显示隐藏的内容。这样可减少页面新的信息元素（Incoming)的增加，直接从页面本身的信息元素来做变形可提高用户对新内容的认知和识别。
|
||||
|
||||
####弹出框动效
|
||||
|
||||
|
||||
从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。
|
||||
|
||||
|
||||
<div class="video-player">
|
||||
<video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4" type="video/mp4"></video>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -14,9 +14,8 @@
|
||||
按钮上的hover或click效果，随着你的鼠标事件而改变自身或增加元素在按钮上；
|
||||
|
||||
以下按钮对组件按钮的修改，只做示例，具体还需看组件；
|
||||
<link rel="stylesheet" href="/static/motion.css">
|
||||
<link rel="stylesheet" href="/static/motionDome.css">
|
||||
<script src="/static/motionDome.js"></script>
|
||||
<link rel="stylesheet" href="/static/motionDemo.css">
|
||||
<script src="/static/motionDemo.js"></script>
|
||||
<div style="overflow: hidden;">
|
||||
<div style="width:200px;float:left;margin-right:60px">
|
||||
<p style="text-align: center;"> 1.按钮表面效果；</p>
|
||||
|
||||
179
static/motion.js
179
static/motion.js
@ -62,7 +62,7 @@ $(function (){
|
||||
return d?this.node.attr(o,d):this.node.attr(o)
|
||||
};
|
||||
n.css=function (o,d){
|
||||
return d?this.node.css(o,d):this.node.attr(o);
|
||||
return d?this.node.css(o,d):this.node.css(o);
|
||||
};
|
||||
n.children=function (){
|
||||
return this.node.children()
|
||||
@ -235,7 +235,10 @@ $(function (){
|
||||
this.attr({"width":"100%","height":"100%"});
|
||||
this.defs=new Sprite("defs");
|
||||
this.addChild(this.defs);
|
||||
if(id)
|
||||
$(id).append(this.node);
|
||||
else
|
||||
return this;
|
||||
};
|
||||
var filter={
|
||||
blur : function (x, y) {
|
||||
@ -332,6 +335,78 @@ $(function (){
|
||||
return this;
|
||||
};
|
||||
var T=TweenMax;
|
||||
var _playBox=function (svg,w,h,startFunc,pauseFunc){
|
||||
var playBox=new SVG.Sprite("g");
|
||||
playBox.mouseEnabled=true;
|
||||
|
||||
playBox.drawRect({width:"100%",height:"100%",fill:"rgba(0,0,0,.35)"});
|
||||
var playBtn=new SVG.Sprite("g");
|
||||
playBox.addChild(playBtn);
|
||||
playBtn.drawCirc({r:30,fill:"rgba(255,255,255,1)"});
|
||||
|
||||
|
||||
var playPoints={
|
||||
play:"M-10 -15 L15 0 L-10 15 L-10 0Z M-10 -15 L15 0 L-10 15 L-10 0Z",
|
||||
pause:"M-12 -15 L-3 -15 L-3 15 L-12 15Z M3 -15 L12 -15 L12 15 L3 15Z"
|
||||
};
|
||||
var shanjiao=playBtn.drawPath({d:playPoints.play,fill:"#999"});
|
||||
var bBool=false;
|
||||
var animate_p3 = function(p,_arr) {
|
||||
var a_arr=[];
|
||||
for(var i=0;i<_arr.length;i++){
|
||||
a_arr.push(_arr[i].x,_arr[i].y)
|
||||
}
|
||||
for(var i=0;i<a_arr.length;i++){
|
||||
if(i==0||i==8){
|
||||
a_arr[i]="M"+a_arr[i];
|
||||
}else if(i==2||i==4||i==6||i==12||i==14){
|
||||
a_arr[i]="L"+a_arr[i];
|
||||
}else if(i==7||i==15){
|
||||
a_arr[i]=a_arr[i]+"Z";
|
||||
}
|
||||
}
|
||||
p.attr({
|
||||
d: a_arr.join().replace(/,/g," ")
|
||||
});
|
||||
|
||||
};
|
||||
function twennBtn(p,arr,c_arr){
|
||||
for(var i=0;i<arr.length;i++){
|
||||
T.killTweensOf(arr[i]);
|
||||
T.to(arr[i],.6,{x:c_arr[i].x ,y:c_arr[i].y ,delay:Math.random() *.2,onUpdate:animate_p3,onUpdateParams:[p,arr],ease:Elastic.easeOut})
|
||||
}
|
||||
}
|
||||
playBox.addEventListener("click",function (e){
|
||||
var _a= playPoints.play.replace( /[MLZ]/g,"").split(" ");
|
||||
var _b= playPoints.pause.replace( /[MLZ]/g,"").split(" ");
|
||||
var _arr=[],_barr=[];
|
||||
for(var i=0;i<_a.length;i+=2){
|
||||
var a={},b={};
|
||||
a.x=_a[i];
|
||||
a.y=_a[i+1];
|
||||
b.x=_b[i];
|
||||
b.y=_b[i+1];
|
||||
_arr.push(a);
|
||||
_barr.push(b);
|
||||
}
|
||||
if(!bBool){
|
||||
twennBtn(shanjiao,_arr,_barr);
|
||||
T.to(playBox,.5,{delay:.3,alpha:0,onComplete:startFunc});
|
||||
bBool=true;
|
||||
}else{
|
||||
twennBtn(shanjiao,_barr,_arr);
|
||||
T.to(playBox,.5,{alpha:1,onStart:pauseFunc});
|
||||
bBool=false
|
||||
}
|
||||
});
|
||||
function resize(){
|
||||
playBtn.x=svg.node.width()/2;
|
||||
playBtn.y=svg.node.height()/2;
|
||||
};
|
||||
resize();
|
||||
$(window).bind("resize", resize);
|
||||
return playBox;
|
||||
};
|
||||
var newMotion=function (id,obj){
|
||||
if(!id||!obj){
|
||||
throw new Error("数据错误");
|
||||
@ -463,69 +538,12 @@ $(function (){
|
||||
}
|
||||
|
||||
//建播放按钮；
|
||||
self.playBox=new SVG.Sprite("g");
|
||||
self.playBox.mouseEnabled=true;
|
||||
self.svg.addChild(self.playBox);
|
||||
self.playBox.drawRect({width:"100%",height:"100%",fill:"rgba(0,0,0,.35)"});
|
||||
self.playBtn=new SVG.Sprite("g");
|
||||
self.playBox.addChild(self.playBtn);
|
||||
self.playBtn.drawCirc({r:30,fill:"rgba(255,255,255,1)"});
|
||||
self.playBtn.x=self.w/2;
|
||||
self.playBtn.y=self.h/2;
|
||||
var playPoints={
|
||||
play:"M-10 -15 L15 0 L-10 15 L-10 0Z M-10 -15 L15 0 L-10 15 L-10 0Z",
|
||||
pause:"M-12 -15 L-3 -15 L-3 15 L-12 15Z M3 -15 L12 -15 L12 15 L3 15Z"
|
||||
};
|
||||
var shanjiao=self.playBtn.drawPath({d:playPoints.play,fill:"#999"});
|
||||
var bBool=false;
|
||||
var animate_p3 = function(p,_arr) {
|
||||
var a_arr=[];
|
||||
for(var i=0;i<_arr.length;i++){
|
||||
a_arr.push(_arr[i].x,_arr[i].y)
|
||||
}
|
||||
for(var i=0;i<a_arr.length;i++){
|
||||
if(i==0||i==8){
|
||||
a_arr[i]="M"+a_arr[i];
|
||||
}else if(i==2||i==4||i==6||i==12||i==14){
|
||||
a_arr[i]="L"+a_arr[i];
|
||||
}else if(i==7||i==15){
|
||||
a_arr[i]=a_arr[i]+"Z";
|
||||
}
|
||||
}
|
||||
p.attr({
|
||||
d: a_arr.join().replace(/,/g," ")
|
||||
});
|
||||
|
||||
};
|
||||
function twennBtn(p,arr,c_arr){
|
||||
for(var i=0;i<arr.length;i++){
|
||||
T.killTweensOf(arr[i]);
|
||||
T.to(arr[i],.6,{x:c_arr[i].x ,y:c_arr[i].y ,delay:Math.random() *.2,onUpdate:animate_p3,onUpdateParams:[p,arr],ease:Elastic.easeOut})
|
||||
}
|
||||
}
|
||||
self.playBox.addEventListener("click",function (e){
|
||||
var _a= playPoints.play.replace( /[MLZ]/g,"").split(" ");
|
||||
var _b= playPoints.pause.replace( /[MLZ]/g,"").split(" ");
|
||||
var _arr=[],_barr=[];
|
||||
for(var i=0;i<_a.length;i+=2){
|
||||
var a={},b={};
|
||||
a.x=_a[i];
|
||||
a.y=_a[i+1];
|
||||
b.x=_b[i];
|
||||
b.y=_b[i+1];
|
||||
_arr.push(a);
|
||||
_barr.push(b);
|
||||
}
|
||||
if(!bBool){
|
||||
twennBtn(shanjiao,_arr,_barr);
|
||||
T.to(self.playBox,.5,{delay:.3,alpha:0,onComplete:self.strat,onCompleteParams:[self]});
|
||||
bBool=true;
|
||||
}else{
|
||||
twennBtn(shanjiao,_barr,_arr);
|
||||
T.to(self.playBox,.5,{alpha:1,onStart:self.pause,onStartParams:[self]});
|
||||
bBool=false
|
||||
}
|
||||
self.playBox=_playBox(self.svg,function (){
|
||||
self.start(self);
|
||||
},function (){
|
||||
self.pause(self);
|
||||
});
|
||||
self.svg.addChild(self.playBox);
|
||||
};
|
||||
nm.pause=function (self){
|
||||
for(var i=0;i<self.tweenArr.length;i++){
|
||||
@ -539,7 +557,7 @@ $(function (){
|
||||
tl.resume();
|
||||
}
|
||||
};
|
||||
nm.strat=function (self){
|
||||
nm.start=function (self){
|
||||
if(self.tweenArr.length){
|
||||
self.resume(self);
|
||||
return
|
||||
@ -619,4 +637,37 @@ $(function (){
|
||||
};
|
||||
window.Motion=newMotion;
|
||||
|
||||
var motionVideo={
|
||||
init:function (){
|
||||
var self=this;
|
||||
self.videoBox=$(".video-player");
|
||||
for(var i=0;i<self.videoBox.length;i++){
|
||||
var svg=new SVG();
|
||||
self.videoBox.eq(i).append(svg.node);
|
||||
var video=self.videoBox.eq(i).find("video");
|
||||
video.css({"width":"100%"});
|
||||
video.append(svg);
|
||||
svg.css({"position":"absolute","top":0});
|
||||
var playBox=_playBox(svg);
|
||||
svg.addChild(playBox);
|
||||
playBox.addEventListener("click",function (e){
|
||||
var m=$(this),
|
||||
video= m.parent().parent().find("video");
|
||||
var bool=m.attr("play");
|
||||
if(bool){
|
||||
this.setTimeout=null;
|
||||
video[0].pause();
|
||||
m.removeAttr("play")
|
||||
}else{
|
||||
this.setTimeout=setTimeout(function (){
|
||||
video[0].play();
|
||||
},500);
|
||||
|
||||
m.attr("play","true")
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
motionVideo.init();
|
||||
});
|
||||
@ -1,3 +1,7 @@
|
||||
.ant-btn{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ant-btn-domebox{
|
||||
background-color: #f3f3f3;
|
||||
width:100%;
|
||||
@ -100,6 +104,11 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-player{
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
/******动画名称******/
|
||||
|
||||
.scale-open{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user