WXML
<
view
>
<
image
src=
"../../image/[email protected]"
class=
"img-style"
animation=
"{{animCollect}}"
bindtap=
"collect"
></
image
>
<
image
src=
"../../image/[email protected]"
class=
"img-style"
animation=
"{{animTranspond}}"
bindtap=
"transpond"
></
image
>
<
image
src=
"../../image/[email protected]"
class=
"img-style"
animation=
"{{animInput}}"
bindtap=
"input"
></
image
>
<
image
src=
"../../image/[email protected]"
class=
"img-plus-style"
animation=
"{{animPlus}}"
bindtap=
"plus"
></
image
>
</
view
>
JS
Page
({
data
:
{
isPopping
:
true
,
//是否已经弹出
},
//点击弹出
plus
:
function
()
{
if
(
this
.data
.isPopping
)
{
//缩回动画
this
.popp
();
this
.setData
({
isPopping
:
false
})
}
else
if
(!
this
.data
.isPopping
)
{
//弹出动画
this
.takeback
();
this
.setData
({
isPopping
:
true
})
}
},
input
:
function
()
{
console
.log
(
"1"
)
},
transpond
:
function
()
{
console
.log
(
"2"
)
},
collect
:
function
()
{
console
.log
(
"3"
)
},
//弹出动画
popp
:
function
()
{
//plus顺时针旋转
var animationPlus
= wx
.createAnimation
({
duration
:
500
,
timingFunction
:
'ease-out'
})
var animationcollect
= wx
.createAnimation
({
duration
:
500
,
timingFunction
:
'ease-out'
})
var animationTranspond
= wx
.createAnimation
({
duration
:
500
,
timingFunction
:
'ease-out'
})
var animationInput
= wx
.createAnimation
({
duration
:
500
,
timingFunction
:
'ease-out'
})
animationPlus
.rotateZ
(
90
).step
();
animationcollect
.translate
(-
50
,
-
50
).rotateZ
(
180
).opacity
(
1
).step
();
animationTranspond
.translate
(-
40
,
0
).rotateZ
(
180
).opacity
(
1
).step
();
animationInput
.translate
(-
50
,
50
).rotateZ
(
180
).opacity
(
1
).step
();
this
.setData
({
animPlus
: animationPlus
.export
(),
animCollect
: animationcollect
.export
(),
animTranspond
: animationTranspond
.export
(),
animInput
: animationInput
.export
(),
})
},
//收回动画
takeback
:
function
()
{
//plus逆时针旋转
var animationPlus
= wx
.createAnimation
({
duration
:
500
,
timingFunction
:
'ease-out'
})
var animationcollect
= wx
.createAnimation
({
duration
:
500
,
timingFunction
:
'ease-out'
})
var animationTranspond
= wx
.createAnimation
({
duration
:
500
,
timingFunction
:
'ease-out'
})
var animationInput
= wx
.createAnimation
({
duration
:
500
,
timingFunction
:
'ease-out'
})
animationPlus
.rotateZ
(
0
).step
();
animationcollect
.translate
(
0
,
0
).rotateZ
(
0
).opacity
(
0
).step
();
animationTranspond
.translate
(
0
,
0
).rotateZ
(
0
).opacity
(
0
).step
();
animationInput
.translate
(
0
,
0
).rotateZ
(
0
).opacity
(
0
).step
();
this
.setData
({
animPlus
: animationPlus
.export
(),
animCollect
: animationcollect
.export
(),
animTranspond
: animationTranspond
.export
(),
animInput
: animationInput
.export
(),
})
},
})
WXSS
.img-plus-style
{
height:
50
rpx
;
width:
50
rpx
;
position:
absolute
;
bottom:
250
rpx
;
right:
100
rpx
;
z-index:
100
;
}
.img-style
{
height:
50
rpx
;
width:
50
rpx
;
position:
absolute
;
bottom:
250
rpx
;
right:
100
rpx
;
opacity:
0
;
}