Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
小浣熊撸代码
uni-app
提交
fd3128a2
U
uni-app
项目概览
小浣熊撸代码
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
fd3128a2
编写于
5月 20, 2021
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
chore: animation mixins
上级
df7497c8
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
234 addition
and
115 deletion
+234
-115
packages/uni-components/src/helpers/animation.ts
packages/uni-components/src/helpers/animation.ts
+0
-0
packages/uni-components/src/helpers/component.ts
packages/uni-components/src/helpers/component.ts
+7
-0
packages/uni-core/src/view/plugin/index.ts
packages/uni-core/src/view/plugin/index.ts
+0
-2
packages/uni-h5/dist/uni-h5.cjs.js
packages/uni-h5/dist/uni-h5.cjs.js
+115
-3
packages/uni-h5/dist/uni-h5.es.js
packages/uni-h5/dist/uni-h5.es.js
+112
-110
未找到文件。
packages/uni-co
re
/src/helpers/animation.ts
→
packages/uni-co
mponents
/src/helpers/animation.ts
浏览文件 @
fd3128a2
文件已移动
packages/uni-components/src/helpers/component.ts
浏览文件 @
fd3128a2
import
{
ComponentOptions
,
defineComponent
}
from
'
vue
'
import
{
ComponentOptions
,
defineComponent
}
from
'
vue
'
import
animation
from
'
./animation
'
/**
/**
* 内置组件(对外,比如view)
* 内置组件(对外,比如view)
* @param options
* @param options
...
@@ -8,6 +9,12 @@ export const defineBuiltInComponent: typeof defineComponent = (
...
@@ -8,6 +9,12 @@ export const defineBuiltInComponent: typeof defineComponent = (
options
:
any
options
:
any
)
=>
{
)
=>
{
// TODO 可能会补充特殊标记
// TODO 可能会补充特殊标记
if
(
!
options
.
props
||
typeof
options
.
props
.
animation
===
'
undefined
'
)
{
// 补充内置组件animation
typeof
options
.
mixins
!==
'
undefined
'
?
options
.
mixins
.
push
(
animation
)
:
(
options
.
mixins
=
[
animation
])
}
return
defineSystemComponent
(
options
)
return
defineSystemComponent
(
options
)
}
}
/**
/**
...
...
packages/uni-core/src/view/plugin/index.ts
浏览文件 @
fd3128a2
import
{
App
}
from
'
vue
'
import
{
App
}
from
'
vue
'
import
animation
from
'
../../helpers/animation
'
import
{
initLongPress
}
from
'
./longPress
'
import
{
initLongPress
}
from
'
./longPress
'
import
{
initAppConfig
}
from
'
./appConfig
'
import
{
initAppConfig
}
from
'
./appConfig
'
import
{
initCostomDataset
}
from
'
@dcloudio/uni-shared
'
import
{
initCostomDataset
}
from
'
@dcloudio/uni-shared
'
...
@@ -14,7 +13,6 @@ export function initView(app: App) {
...
@@ -14,7 +13,6 @@ export function initView(app: App) {
initLongPress
()
initLongPress
()
}
}
initAppConfig
(
app
.
_context
.
config
)
initAppConfig
(
app
.
_context
.
config
)
app
.
mixin
(
animation
)
// TODO wxs,behaviors
// TODO wxs,behaviors
}
}
...
...
packages/uni-h5/dist/uni-h5.cjs.js
浏览文件 @
fd3128a2
...
@@ -1039,7 +1039,119 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
...
@@ -1039,7 +1039,119 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
],
16
,
[
"
id
"
,
"
controls
"
]);
],
16
,
[
"
id
"
,
"
controls
"
]);
}
}
_sfc_main$8
.
render
=
_sfc_render$8
;
_sfc_main$8
.
render
=
_sfc_render$8
;
function
converPx
(
value
)
{
if
(
/^-
?\d
+
[
ur
]
px$/i
.
test
(
value
))
{
return
value
.
replace
(
/
(
^-
?\d
+
)[
ur
]
px$/i
,
(
text
,
num
)
=>
{
return
`
${
uni
.
upx2px
(
parseFloat
(
num
))}
px`
;
});
}
else
if
(
/^-
?[\d\.]
+$/
.
test
(
value
))
{
return
`
${
value
}
px`
;
}
return
value
||
""
;
}
function
converType
(
type
)
{
return
type
.
replace
(
/
[
A-Z
]
/g
,
(
text
)
=>
{
return
`-
${
text
.
toLowerCase
()}
`
;
}).
replace
(
"
webkit
"
,
"
-webkit
"
);
}
function
getStyle
(
action
)
{
const
animateTypes1
=
[
"
matrix
"
,
"
matrix3d
"
,
"
scale
"
,
"
scale3d
"
,
"
rotate3d
"
,
"
skew
"
,
"
translate
"
,
"
translate3d
"
];
const
animateTypes2
=
[
"
scaleX
"
,
"
scaleY
"
,
"
scaleZ
"
,
"
rotate
"
,
"
rotateX
"
,
"
rotateY
"
,
"
rotateZ
"
,
"
skewX
"
,
"
skewY
"
,
"
translateX
"
,
"
translateY
"
,
"
translateZ
"
];
const
animateTypes3
=
[
"
opacity
"
,
"
background-color
"
];
const
animateTypes4
=
[
"
width
"
,
"
height
"
,
"
left
"
,
"
right
"
,
"
top
"
,
"
bottom
"
];
const
animates
=
action
.
animates
;
const
option
=
action
.
option
;
const
transition
=
option
.
transition
;
const
style
=
{};
const
transform
=
[];
animates
.
forEach
((
animate
)
=>
{
let
type
=
animate
.
type
;
let
args
=
[...
animate
.
args
];
if
(
animateTypes1
.
concat
(
animateTypes2
).
includes
(
type
))
{
if
(
type
.
startsWith
(
"
rotate
"
)
||
type
.
startsWith
(
"
skew
"
))
{
args
=
args
.
map
((
value
)
=>
parseFloat
(
value
)
+
"
deg
"
);
}
else
if
(
type
.
startsWith
(
"
translate
"
))
{
args
=
args
.
map
(
converPx
);
}
if
(
animateTypes2
.
indexOf
(
type
)
>=
0
)
{
args
.
length
=
1
;
}
transform
.
push
(
`
${
type
}
(
${
args
.
join
(
"
,
"
)}
)`
);
}
else
if
(
animateTypes3
.
concat
(
animateTypes4
).
includes
(
args
[
0
]))
{
type
=
args
[
0
];
const
value
=
args
[
1
];
style
[
type
]
=
animateTypes4
.
includes
(
type
)
?
converPx
(
value
)
:
value
;
}
});
style
.
transform
=
style
.
webkitTransform
=
transform
.
join
(
"
"
);
style
.
transition
=
style
.
webkitTransition
=
Object
.
keys
(
style
).
map
((
type
)
=>
`
${
converType
(
type
)}
${
transition
.
duration
}
ms
${
transition
.
timingFunction
}
${
transition
.
delay
}
ms`
).
join
(
"
,
"
);
style
.
transformOrigin
=
style
.
webkitTransformOrigin
=
option
.
transformOrigin
;
return
style
;
}
function
startAnimation
(
context
)
{
const
animation2
=
context
.
animation
;
if
(
!
animation2
||
!
animation2
.
actions
||
!
animation2
.
actions
.
length
)
{
return
;
}
let
index2
=
0
;
const
actions
=
animation2
.
actions
;
const
length
=
animation2
.
actions
.
length
;
function
animate
()
{
const
action
=
actions
[
index2
];
const
transition
=
action
.
option
.
transition
;
const
style
=
getStyle
(
action
);
Object
.
keys
(
style
).
forEach
((
key
)
=>
{
context
.
$el
.
style
[
key
]
=
style
[
key
];
});
index2
+=
1
;
if
(
index2
<
length
)
{
setTimeout
(
animate
,
transition
.
duration
+
transition
.
delay
);
}
}
setTimeout
(()
=>
{
animate
();
},
0
);
}
var
animation
=
{
props
:
[
"
animation
"
],
watch
:
{
animation
:
{
deep
:
true
,
handler
()
{
startAnimation
(
this
);
}
}
},
mounted
()
{
startAnimation
(
this
);
}
};
const
defineBuiltInComponent
=
(
options
)
=>
{
const
defineBuiltInComponent
=
(
options
)
=>
{
if
(
!
options
.
props
||
typeof
options
.
props
.
animation
===
"
undefined
"
)
{
typeof
options
.
mixins
!==
"
undefined
"
?
options
.
mixins
.
push
(
animation
)
:
options
.
mixins
=
[
animation
];
}
return
defineSystemComponent
(
options
);
return
defineSystemComponent
(
options
);
};
};
const
defineSystemComponent
=
(
options
)
=>
{
const
defineSystemComponent
=
(
options
)
=>
{
...
@@ -4620,13 +4732,13 @@ function createAnimation(scroll, onScroll, onEnd) {
...
@@ -4620,13 +4732,13 @@ function createAnimation(scroll, onScroll, onEnd) {
id
:
0
,
id
:
0
,
cancelled
:
false
cancelled
:
false
};
};
function
startAnimation
(
state2
,
scroll2
,
onScroll2
,
onEnd2
)
{
function
startAnimation
2
(
state2
,
scroll2
,
onScroll2
,
onEnd2
)
{
if
(
!
state2
||
!
state2
.
cancelled
)
{
if
(
!
state2
||
!
state2
.
cancelled
)
{
onScroll2
(
scroll2
);
onScroll2
(
scroll2
);
const
isDone
=
scroll2
.
done
();
const
isDone
=
scroll2
.
done
();
if
(
!
isDone
)
{
if
(
!
isDone
)
{
if
(
!
state2
.
cancelled
)
{
if
(
!
state2
.
cancelled
)
{
state2
.
id
=
requestAnimationFrame
(
startAnimation
.
bind
(
null
,
state2
,
scroll2
,
onScroll2
,
onEnd2
));
state2
.
id
=
requestAnimationFrame
(
startAnimation
2
.
bind
(
null
,
state2
,
scroll2
,
onScroll2
,
onEnd2
));
}
}
}
}
if
(
isDone
&&
onEnd2
)
{
if
(
isDone
&&
onEnd2
)
{
...
@@ -4642,7 +4754,7 @@ function createAnimation(scroll, onScroll, onEnd) {
...
@@ -4642,7 +4754,7 @@ function createAnimation(scroll, onScroll, onEnd) {
state2
.
cancelled
=
true
;
state2
.
cancelled
=
true
;
}
}
}
}
startAnimation
(
state
,
scroll
,
onScroll
,
onEnd
);
startAnimation
2
(
state
,
scroll
,
onScroll
,
onEnd
);
return
{
return
{
cancel
:
cancel
.
bind
(
null
,
state
),
cancel
:
cancel
.
bind
(
null
,
state
),
model
:
scroll
model
:
scroll
...
...
packages/uni-h5/dist/uni-h5.es.js
浏览文件 @
fd3128a2
...
@@ -250,115 +250,6 @@ function initBridge(namespace) {
...
@@ -250,115 +250,6 @@ function initBridge(namespace) {
});
});
}
}
const ViewJSBridge = /* @__PURE__ */ initBridge("view");
const ViewJSBridge = /* @__PURE__ */ initBridge("view");
function converPx(value) {
if (/^-?\d+[ur]px$/i.test(value)) {
return value.replace(/(^-?\d+)[ur]px$/i, (text2, num) => {
return `${uni.upx2px(parseFloat(num))}px`;
});
} else if (/^-?[\d\.]+$/.test(value)) {
return `${value}px`;
}
return value || "";
}
function converType(type) {
return type.replace(/[A-Z]/g, (text2) => {
return `-${text2.toLowerCase()}`;
}).replace("webkit", "-webkit");
}
function getStyle(action) {
const animateTypes1 = [
"matrix",
"matrix3d",
"scale",
"scale3d",
"rotate3d",
"skew",
"translate",
"translate3d"
];
const animateTypes2 = [
"scaleX",
"scaleY",
"scaleZ",
"rotate",
"rotateX",
"rotateY",
"rotateZ",
"skewX",
"skewY",
"translateX",
"translateY",
"translateZ"
];
const animateTypes3 = ["opacity", "background-color"];
const animateTypes4 = ["width", "height", "left", "right", "top", "bottom"];
const animates = action.animates;
const option = action.option;
const transition = option.transition;
const style = {};
const transform = [];
animates.forEach((animate) => {
let type = animate.type;
let args = [...animate.args];
if (animateTypes1.concat(animateTypes2).includes(type)) {
if (type.startsWith("rotate") || type.startsWith("skew")) {
args = args.map((value) => parseFloat(value) + "deg");
} else if (type.startsWith("translate")) {
args = args.map(converPx);
}
if (animateTypes2.indexOf(type) >= 0) {
args.length = 1;
}
transform.push(`${type}(${args.join(",")})`);
} else if (animateTypes3.concat(animateTypes4).includes(args[0])) {
type = args[0];
const value = args[1];
style[type] = animateTypes4.includes(type) ? converPx(value) : value;
}
});
style.transform = style.webkitTransform = transform.join(" ");
style.transition = style.webkitTransition = Object.keys(style).map((type) => `${converType(type)} ${transition.duration}ms ${transition.timingFunction} ${transition.delay}ms`).join(",");
style.transformOrigin = style.webkitTransformOrigin = option.transformOrigin;
return style;
}
function startAnimation(context) {
const animation2 = context.animation;
if (!animation2 || !animation2.actions || !animation2.actions.length) {
return;
}
let index2 = 0;
const actions = animation2.actions;
const length = animation2.actions.length;
function animate() {
const action = actions[index2];
const transition = action.option.transition;
const style = getStyle(action);
Object.keys(style).forEach((key) => {
context.$el.style[key] = style[key];
});
index2 += 1;
if (index2 < length) {
setTimeout(animate, transition.duration + transition.delay);
}
}
setTimeout(() => {
animate();
}, 0);
}
var animation = {
props: ["animation"],
watch: {
animation: {
deep: true,
handler() {
startAnimation(this);
}
}
},
mounted() {
startAnimation(this);
}
};
const LONGPRESS_TIMEOUT = 350;
const LONGPRESS_TIMEOUT = 350;
const LONGPRESS_THRESHOLD = 10;
const LONGPRESS_THRESHOLD = 10;
const passiveOptions$2 = passive(true);
const passiveOptions$2 = passive(true);
...
@@ -1082,7 +973,6 @@ function initView(app) {
...
@@ -1082,7 +973,6 @@ function initView(app) {
initLongPress();
initLongPress();
}
}
initAppConfig$1(app._context.config);
initAppConfig$1(app._context.config);
app.mixin(animation);
}
}
const ServiceJSBridge = /* @__PURE__ */ extend(initBridge("service"), {
const ServiceJSBridge = /* @__PURE__ */ extend(initBridge("service"), {
invokeOnCallback(name, res) {
invokeOnCallback(name, res) {
...
@@ -2090,7 +1980,119 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
...
@@ -2090,7 +1980,119 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
], 16, ["id", "controls"]);
], 16, ["id", "controls"]);
}
}
_sfc_main$8.render = _sfc_render$8;
_sfc_main$8.render = _sfc_render$8;
function converPx(value) {
if (/^-?\d+[ur]px$/i.test(value)) {
return value.replace(/(^-?\d+)[ur]px$/i, (text2, num) => {
return `${uni.upx2px(parseFloat(num))}px`;
});
} else if (/^-?[\d\.]+$/.test(value)) {
return `${value}px`;
}
return value || "";
}
function converType(type) {
return type.replace(/[A-Z]/g, (text2) => {
return `-${text2.toLowerCase()}`;
}).replace("webkit", "-webkit");
}
function getStyle(action) {
const animateTypes1 = [
"matrix",
"matrix3d",
"scale",
"scale3d",
"rotate3d",
"skew",
"translate",
"translate3d"
];
const animateTypes2 = [
"scaleX",
"scaleY",
"scaleZ",
"rotate",
"rotateX",
"rotateY",
"rotateZ",
"skewX",
"skewY",
"translateX",
"translateY",
"translateZ"
];
const animateTypes3 = ["opacity", "background-color"];
const animateTypes4 = ["width", "height", "left", "right", "top", "bottom"];
const animates = action.animates;
const option = action.option;
const transition = option.transition;
const style = {};
const transform = [];
animates.forEach((animate) => {
let type = animate.type;
let args = [...animate.args];
if (animateTypes1.concat(animateTypes2).includes(type)) {
if (type.startsWith("rotate") || type.startsWith("skew")) {
args = args.map((value) => parseFloat(value) + "deg");
} else if (type.startsWith("translate")) {
args = args.map(converPx);
}
if (animateTypes2.indexOf(type) >= 0) {
args.length = 1;
}
transform.push(`${type}(${args.join(",")})`);
} else if (animateTypes3.concat(animateTypes4).includes(args[0])) {
type = args[0];
const value = args[1];
style[type] = animateTypes4.includes(type) ? converPx(value) : value;
}
});
style.transform = style.webkitTransform = transform.join(" ");
style.transition = style.webkitTransition = Object.keys(style).map((type) => `${converType(type)} ${transition.duration}ms ${transition.timingFunction} ${transition.delay}ms`).join(",");
style.transformOrigin = style.webkitTransformOrigin = option.transformOrigin;
return style;
}
function startAnimation(context) {
const animation2 = context.animation;
if (!animation2 || !animation2.actions || !animation2.actions.length) {
return;
}
let index2 = 0;
const actions = animation2.actions;
const length = animation2.actions.length;
function animate() {
const action = actions[index2];
const transition = action.option.transition;
const style = getStyle(action);
Object.keys(style).forEach((key) => {
context.$el.style[key] = style[key];
});
index2 += 1;
if (index2 < length) {
setTimeout(animate, transition.duration + transition.delay);
}
}
setTimeout(() => {
animate();
}, 0);
}
var animation = {
props: ["animation"],
watch: {
animation: {
deep: true,
handler() {
startAnimation(this);
}
}
},
mounted() {
startAnimation(this);
}
};
const defineBuiltInComponent = (options) => {
const defineBuiltInComponent = (options) => {
if (!options.props || typeof options.props.animation === "undefined") {
typeof options.mixins !== "undefined" ? options.mixins.push(animation) : options.mixins = [animation];
}
return defineSystemComponent(options);
return defineSystemComponent(options);
};
};
const defineSystemComponent = (options) => {
const defineSystemComponent = (options) => {
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录