Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
良好的行为成为习惯
uni-app
提交
e040aec8
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,发现更多精彩内容 >>
提交
e040aec8
编写于
7月 04, 2019
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 增加 uni.createAnimation 接口支持;组件支持 animation 属性
上级
84887cae
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
169 addition
and
2 deletion
+169
-2
src/core/service/api/create-animation.js
src/core/service/api/create-animation.js
+77
-0
src/core/view/components/index.js
src/core/view/components/index.js
+4
-1
src/core/view/mixins/animation.js
src/core/view/mixins/animation.js
+88
-0
src/platforms/h5/helpers/todo-api.js
src/platforms/h5/helpers/todo-api.js
+0
-1
未找到文件。
src/core/service/api/create-animation.js
0 → 100644
浏览文件 @
e040aec8
const
defaultOption
=
{
duration
:
400
,
timingFunction
:
'
linear
'
,
delay
:
0
,
transformOrigin
:
'
50% 50% 0
'
}
class
MPAnimation
{
constructor
(
option
)
{
this
.
actions
=
[]
this
.
currentTransform
=
{}
this
.
currentStepAnimates
=
[]
this
.
option
=
Object
.
assign
({},
defaultOption
,
option
)
}
_getOption
(
option
)
{
let
_option
=
{
transition
:
Object
.
assign
({},
this
.
option
,
option
)
}
_option
.
transformOrigin
=
_option
.
transition
.
transformOrigin
delete
_option
.
transition
.
transformOrigin
return
_option
}
_pushAnimates
(
type
,
args
)
{
this
.
currentStepAnimates
.
push
({
type
:
type
,
args
:
args
})
}
_converType
(
type
)
{
return
type
.
replace
(
/
[
A-Z
]
/g
,
text
=>
{
return
`-
${
text
.
toLowerCase
()}
`
})
}
_getValue
(
value
)
{
return
typeof
value
===
'
number
'
?
`
${
value
}
px`
:
value
}
export
()
{
const
actions
=
this
.
actions
this
.
actions
=
[]
return
{
actions
}
}
step
(
option
)
{
this
.
currentStepAnimates
.
forEach
(
animate
=>
{
if
(
animate
.
type
!==
'
style
'
)
{
this
.
currentTransform
[
animate
.
type
]
=
animate
}
else
{
this
.
currentTransform
[
`
${
animate
.
type
}
.
${
animate
.
args
[
0
]}
`
]
=
animate
}
})
this
.
actions
.
push
({
animates
:
Object
.
values
(
this
.
currentTransform
),
option
:
this
.
_getOption
(
option
)
})
this
.
currentStepAnimates
=
[]
return
this
}
}
const
animateTypes1
=
[
'
matrix
'
,
'
matrix3d
'
,
'
rotate
'
,
'
rotate3d
'
,
'
rotateX
'
,
'
rotateY
'
,
'
rotateZ
'
,
'
scale
'
,
'
scale3d
'
,
'
scaleX
'
,
'
scaleY
'
,
'
scaleZ
'
,
'
skew
'
,
'
skewX
'
,
'
skewY
'
,
'
translate
'
,
'
translate3d
'
,
'
translateX
'
,
'
translateY
'
,
'
translateZ
'
]
const
animateTypes2
=
[
'
opacity
'
,
'
backgroundColor
'
]
const
animateTypes3
=
[
'
width
'
,
'
height
'
,
'
left
'
,
'
right
'
,
'
top
'
,
'
bottom
'
]
animateTypes1
.
concat
(
animateTypes2
,
animateTypes3
).
forEach
(
type
=>
{
MPAnimation
.
prototype
[
type
]
=
function
(...
args
)
{
if
(
animateTypes2
.
concat
(
animateTypes3
).
includes
(
type
))
{
this
.
_pushAnimates
(
'
style
'
,
[
this
.
_converType
(
type
),
animateTypes3
.
includes
(
type
)
?
this
.
_getValue
(
args
[
0
])
:
args
[
0
]])
}
else
{
this
.
_pushAnimates
(
type
,
args
)
}
return
this
}
})
export
function
createAnimation
(
option
)
{
return
new
MPAnimation
(
option
)
}
src/core/view/components/index.js
浏览文件 @
e040aec8
import
Vue
from
'
vue
'
import
baseMixin
from
'
uni-mixins/base
'
import
animation
from
'
uni-mixins/animation
'
const
requireComponents
=
[
// baseComponents
...
...
@@ -17,9 +18,11 @@ requireComponents.forEach((components, index) => {
componentConfig
.
mixins
=
componentConfig
.
mixins
?
[].
concat
(
baseMixin
,
componentConfig
.
mixins
)
:
[
baseMixin
]
componentConfig
.
mixins
.
push
(
animation
)
componentConfig
.
name
=
'
VUni
'
+
componentConfig
.
name
// 全局注册组件
Vue
.
component
(
componentConfig
.
name
,
componentConfig
)
})
})
})
src/core/view/mixins/animation.js
0 → 100644
浏览文件 @
e040aec8
function
converPx
(
value
)
{
if
(
/
\d
+
[
ur
]
px$/i
.
test
(
value
))
{
value
.
replace
(
/
\d
+
[
ur
]
px$/i
,
text
=>
{
return
`
${
uni
.
upx2px
(
parseFloat
(
text
))}
px`
})
// eslint-disable-next-line no-useless-escape
}
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
'
,
'
backgroundColor
'
]
const
animateTypes4
=
[
'
width
'
,
'
height
'
,
'
left
'
,
'
right
'
,
'
top
'
,
'
bottom
'
]
const
animates
=
action
.
animates
const
option
=
action
.
option
const
transition
=
option
.
transition
const
style
=
{}
let
transform
=
[]
animates
.
forEach
(
animate
=>
{
const
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
))
{
args
.
length
=
1
}
transform
.
push
(
`
${
type
}
(
${
args
.
join
(
'
,
'
)}
)`
)
}
else
if
(
animateTypes3
.
concat
(
animateTypes4
).
includes
(
type
))
{
const
value
=
args
[
0
]
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
animation
=
context
.
animation
if
(
!
animation
||
!
animation
.
actions
||
!
animation
.
actions
.
length
)
{
return
}
let
index
=
0
const
actions
=
animation
.
actions
const
length
=
animation
.
actions
.
length
function
animate
()
{
const
action
=
actions
[
index
]
const
transition
=
action
.
option
.
transition
const
style
=
getStyle
(
action
)
Object
.
keys
(
style
).
forEach
(
key
=>
{
context
.
$el
.
style
[
key
]
=
style
[
key
]
})
index
+=
1
if
(
index
<
length
)
{
setTimeout
(
animate
,
transition
.
duration
+
transition
.
delay
)
}
}
animate
()
}
export
default
{
props
:
[
'
animation
'
],
watch
:
{
animation
()
{
startAnimation
(
this
)
}
},
mounted
()
{
startAnimation
(
this
)
}
}
src/platforms/h5/helpers/todo-api.js
浏览文件 @
e040aec8
...
...
@@ -47,7 +47,6 @@ export default [
'
stopBeaconDiscovery
'
,
'
setBackgroundColor
'
,
'
setBackgroundTextStyle
'
,
'
createAnimation
'
,
'
loadFontFace
'
,
'
getProvider
'
,
'
login
'
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录