Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
xxadev
vscode
提交
c2803e3c
V
vscode
项目概览
xxadev
/
vscode
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vscode
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
c2803e3c
编写于
8月 31, 2017
作者:
A
Alex Dima
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Have two animations when jumping at large distances (#33347)
上级
ca2d5dd0
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
189 addition
and
14 deletion
+189
-14
src/vs/base/common/scrollable.ts
src/vs/base/common/scrollable.ts
+70
-14
src/vs/base/test/common/scrollable.test.ts
src/vs/base/test/common/scrollable.test.ts
+119
-0
未找到文件。
src/vs/base/common/scrollable.ts
浏览文件 @
c2803e3c
...
@@ -163,6 +163,9 @@ export interface INewScrollDimensions {
...
@@ -163,6 +163,9 @@ export interface INewScrollDimensions {
export
interface
IScrollPosition
{
export
interface
IScrollPosition
{
readonly
scrollLeft
:
number
;
readonly
scrollLeft
:
number
;
readonly
scrollTop
:
number
;
readonly
scrollTop
:
number
;
readonly
width
:
number
;
readonly
height
:
number
;
}
}
export
interface
INewScrollPosition
{
export
interface
INewScrollPosition
{
scrollLeft
?:
number
;
scrollLeft
?:
number
;
...
@@ -326,7 +329,7 @@ export class Scrollable extends Disposable {
...
@@ -326,7 +329,7 @@ export class Scrollable extends Disposable {
}
}
}
}
class
SmoothScrollingUpdate
implements
IScrollPosition
{
export
class
SmoothScrollingUpdate
{
public
readonly
scrollLeft
:
number
;
public
readonly
scrollLeft
:
number
;
public
readonly
scrollTop
:
number
;
public
readonly
scrollTop
:
number
;
...
@@ -340,7 +343,27 @@ class SmoothScrollingUpdate implements IScrollPosition {
...
@@ -340,7 +343,27 @@ class SmoothScrollingUpdate implements IScrollPosition {
}
}
class
SmoothScrollingOperation
{
export
interface
IAnimation
{
(
completion
:
number
):
number
;
}
function
createEaseOutCubic
(
from
:
number
,
to
:
number
):
IAnimation
{
const
delta
=
to
-
from
;
return
function
(
completion
:
number
):
number
{
return
from
+
delta
*
easeOutCubic
(
completion
);
};
}
function
createComposed
(
a
:
IAnimation
,
b
:
IAnimation
,
cut
:
number
):
IAnimation
{
return
function
(
completion
:
number
):
number
{
if
(
completion
<
cut
)
{
return
a
(
completion
/
cut
);
}
return
b
((
completion
-
cut
)
/
(
1
-
cut
));
};
}
export
class
SmoothScrollingOperation
{
public
readonly
from
:
IScrollPosition
;
public
readonly
from
:
IScrollPosition
;
public
to
:
IScrollPosition
;
public
to
:
IScrollPosition
;
...
@@ -348,15 +371,40 @@ class SmoothScrollingOperation {
...
@@ -348,15 +371,40 @@ class SmoothScrollingOperation {
private
readonly
_startTime
:
number
;
private
readonly
_startTime
:
number
;
public
animationFrameDisposable
:
IDisposable
;
public
animationFrameDisposable
:
IDisposable
;
private
constructor
(
from
:
IScrollPosition
,
to
:
IScrollPosition
,
duration
:
number
)
{
private
scrollLeft
:
IAnimation
;
private
scrollTop
:
IAnimation
;
protected
constructor
(
from
:
IScrollPosition
,
to
:
IScrollPosition
,
startTime
:
number
,
duration
:
number
)
{
this
.
from
=
from
;
this
.
from
=
from
;
this
.
to
=
to
;
this
.
to
=
to
;
this
.
duration
=
duration
;
// +10 / -10 : pretend the animation already started for a quicker response to a scroll request
this
.
_startTime
=
startTime
;
this
.
duration
=
duration
+
10
;
this
.
_startTime
=
Date
.
now
()
-
10
;
this
.
animationFrameDisposable
=
null
;
this
.
animationFrameDisposable
=
null
;
this
.
_initAnimations
();
}
private
_initAnimations
():
void
{
this
.
scrollLeft
=
this
.
_initAnimation
(
this
.
from
.
scrollLeft
,
this
.
to
.
scrollLeft
,
this
.
to
.
width
);
this
.
scrollTop
=
this
.
_initAnimation
(
this
.
from
.
scrollTop
,
this
.
to
.
scrollTop
,
this
.
to
.
height
);
}
private
_initAnimation
(
from
:
number
,
to
:
number
,
viewportSize
:
number
):
IAnimation
{
const
delta
=
Math
.
abs
(
from
-
to
);
if
(
delta
>
2.5
*
viewportSize
)
{
let
stop1
:
number
,
stop2
:
number
;
if
(
from
<
to
)
{
// scroll to 75% of the viewportSize
stop1
=
from
+
0.75
*
viewportSize
;
stop2
=
to
-
0.75
*
viewportSize
;
}
else
{
stop1
=
from
-
0.75
*
viewportSize
;
stop2
=
to
+
0.75
*
viewportSize
;
}
return
createComposed
(
createEaseOutCubic
(
from
,
stop1
),
createEaseOutCubic
(
stop2
,
to
),
0.33
);
}
return
createEaseOutCubic
(
from
,
to
);
}
}
public
dispose
():
void
{
public
dispose
():
void
{
...
@@ -368,15 +416,19 @@ class SmoothScrollingOperation {
...
@@ -368,15 +416,19 @@ class SmoothScrollingOperation {
public
acceptScrollDimensions
(
state
:
ScrollState
):
void
{
public
acceptScrollDimensions
(
state
:
ScrollState
):
void
{
this
.
to
=
state
.
withScrollPosition
(
this
.
to
);
this
.
to
=
state
.
withScrollPosition
(
this
.
to
);
this
.
_initAnimations
();
}
}
public
tick
():
SmoothScrollingUpdate
{
public
tick
():
SmoothScrollingUpdate
{
const
completion
=
(
Date
.
now
()
-
this
.
_startTime
)
/
this
.
duration
;
return
this
.
_tick
(
Date
.
now
());
}
protected
_tick
(
now
:
number
):
SmoothScrollingUpdate
{
const
completion
=
(
now
-
this
.
_startTime
)
/
this
.
duration
;
if
(
completion
<
1
)
{
if
(
completion
<
1
)
{
const
t
=
easeOutCubic
(
completion
);
const
newScrollLeft
=
this
.
scrollLeft
(
completion
);
const
newScrollLeft
=
this
.
from
.
scrollLeft
+
(
this
.
to
.
scrollLeft
-
this
.
from
.
scrollLeft
)
*
t
;
const
newScrollTop
=
this
.
scrollTop
(
completion
);
const
newScrollTop
=
this
.
from
.
scrollTop
+
(
this
.
to
.
scrollTop
-
this
.
from
.
scrollTop
)
*
t
;
return
new
SmoothScrollingUpdate
(
newScrollLeft
,
newScrollTop
,
false
);
return
new
SmoothScrollingUpdate
(
newScrollLeft
,
newScrollTop
,
false
);
}
}
...
@@ -388,14 +440,18 @@ class SmoothScrollingOperation {
...
@@ -388,14 +440,18 @@ class SmoothScrollingOperation {
}
}
public
static
start
(
from
:
IScrollPosition
,
to
:
IScrollPosition
,
duration
:
number
):
SmoothScrollingOperation
{
public
static
start
(
from
:
IScrollPosition
,
to
:
IScrollPosition
,
duration
:
number
):
SmoothScrollingOperation
{
return
new
SmoothScrollingOperation
(
from
,
to
,
duration
);
// +10 / -10 : pretend the animation already started for a quicker response to a scroll request
duration
=
duration
+
10
;
const
startTime
=
Date
.
now
()
-
10
;
return
new
SmoothScrollingOperation
(
from
,
to
,
startTime
,
duration
);
}
}
}
}
function
easeInCubic
(
t
)
{
function
easeInCubic
(
t
:
number
)
{
return
Math
.
pow
(
t
,
3
);
return
Math
.
pow
(
t
,
3
);
}
}
function
easeOutCubic
(
t
)
{
function
easeOutCubic
(
t
:
number
)
{
return
1
-
easeInCubic
(
1
-
t
);
return
1
-
easeInCubic
(
1
-
t
);
}
}
src/vs/base/test/common/scrollable.test.ts
0 → 100644
浏览文件 @
c2803e3c
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'
use strict
'
;
import
*
as
assert
from
'
assert
'
;
import
{
SmoothScrollingOperation
,
SmoothScrollingUpdate
}
from
'
vs/base/common/scrollable
'
;
class
TestSmoothScrollingOperation
extends
SmoothScrollingOperation
{
constructor
(
from
:
number
,
to
:
number
,
viewportSize
:
number
,
startTime
:
number
,
duration
:
number
)
{
duration
=
duration
+
10
;
startTime
=
startTime
-
10
;
super
(
{
scrollLeft
:
0
,
scrollTop
:
from
,
width
:
0
,
height
:
viewportSize
},
{
scrollLeft
:
0
,
scrollTop
:
to
,
width
:
0
,
height
:
viewportSize
},
startTime
,
duration
);
}
public
testTick
(
now
:
number
):
SmoothScrollingUpdate
{
return
this
.
_tick
(
now
);
}
}
suite
(
'
SmoothScrollingOperation
'
,
()
=>
{
const
VIEWPORT_HEIGHT
=
800
;
const
ANIMATION_DURATION
=
125
;
const
LINE_HEIGHT
=
20
;
function
extractLines
(
scrollable
:
TestSmoothScrollingOperation
,
now
:
number
):
[
number
,
number
]
{
let
scrollTop
=
scrollable
.
testTick
(
now
).
scrollTop
;
let
scrollBottom
=
scrollTop
+
VIEWPORT_HEIGHT
;
const
startLineNumber
=
Math
.
floor
(
scrollTop
/
LINE_HEIGHT
);
const
endLineNumber
=
Math
.
ceil
(
scrollBottom
/
LINE_HEIGHT
);
return
[
startLineNumber
,
endLineNumber
];
}
function
simulateSmoothScroll
(
from
:
number
,
to
:
number
):
[
number
,
number
][]
{
const
scrollable
=
new
TestSmoothScrollingOperation
(
from
,
to
,
VIEWPORT_HEIGHT
,
0
,
ANIMATION_DURATION
);
let
result
:
[
number
,
number
][]
=
[],
resultLen
=
0
;
result
[
resultLen
++
]
=
extractLines
(
scrollable
,
0
);
result
[
resultLen
++
]
=
extractLines
(
scrollable
,
25
);
result
[
resultLen
++
]
=
extractLines
(
scrollable
,
50
);
result
[
resultLen
++
]
=
extractLines
(
scrollable
,
75
);
result
[
resultLen
++
]
=
extractLines
(
scrollable
,
100
);
result
[
resultLen
++
]
=
extractLines
(
scrollable
,
125
);
return
result
;
}
function
assertSmoothScroll
(
from
:
number
,
to
:
number
,
expected
:
[
number
,
number
][]):
void
{
const
actual
=
simulateSmoothScroll
(
from
,
to
);
assert
.
deepEqual
(
actual
,
expected
);
}
test
(
'
scroll 25 lines (40 fit)
'
,
()
=>
{
assertSmoothScroll
(
0
,
500
,
[
[
5
,
46
],
[
14
,
55
],
[
20
,
61
],
[
23
,
64
],
[
24
,
65
],
[
25
,
65
],
]);
});
test
(
'
scroll 75 lines (40 fit)
'
,
()
=>
{
assertSmoothScroll
(
0
,
1500
,
[
[
15
,
56
],
[
44
,
85
],
[
62
,
103
],
[
71
,
112
],
[
74
,
115
],
[
75
,
115
],
]);
});
test
(
'
scroll 100 lines (40 fit)
'
,
()
=>
{
assertSmoothScroll
(
0
,
2000
,
[
[
20
,
61
],
[
59
,
100
],
[
82
,
123
],
[
94
,
135
],
[
99
,
140
],
[
100
,
140
],
]);
});
test
(
'
scroll 125 lines (40 fit)
'
,
()
=>
{
assertSmoothScroll
(
0
,
2500
,
[
[
16
,
57
],
[
29
,
70
],
[
107
,
148
],
[
119
,
160
],
[
124
,
165
],
[
125
,
165
],
]);
});
test
(
'
scroll 500 lines (40 fit)
'
,
()
=>
{
assertSmoothScroll
(
0
,
10000
,
[
[
16
,
57
],
[
29
,
70
],
[
482
,
523
],
[
494
,
535
],
[
499
,
540
],
[
500
,
540
],
]);
});
});
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录