小程序
小游戏
企业微信
微信支付
扫描小程序码分享
- 当前 Bug 的表现(可附上截图)
在ios12真机上,opcity从0到1的动画设定,没有产生动画效果,直接闪现出来。
- 预期表现
预期效果是:从无到有的渐现效果
- 复现路径
- 提供一个最简复现 Demo
我得代码逻辑比较复杂,就不copy上来了
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
我也遇到了,iphone 上动画压根不生效
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
我这也不好使 说是6.7.4 修复 6.7.4了 也不好使
问题未复现,提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
<
view
class
=
"page"
>
animation
"{{animation_1}}"
"activity--1"
style
"opacity: 1"
bindtap
"onTapAc1"
"wrapper--bg"
"background: red;"
</
"wrapper--content"
"text--1"
>我是第一页</
"{{animation_2}}"
"activity--2"
"opacity: 0"
"onTapAc2"
"background: blue;"
image
"c-img-bg"
src
"{{bg_2}}"
mode
"aspectFill"
></
>我是第二页</
"{{animation_3}}"
"activity--3"
"onTapAc3"
"background: yellow;"
>我是第三页</
Component({
/**
* 组件的属性列表
*/
properties: {},
* 组件的初始数据
data: {
},
* 组件的方法列表
methods: {
onTapAc1() {
this
.switchActivity(2);
// this.opacity_worker(400);
onTapAc2() {
.switchActivity(3);
onTapAc3() {
.triggerEvent(
'switchPart'
, 1);
switchActivity(switchToActivityIndex) {
.activity_animation_setting(switchToActivityIndex);
activity_animation_setting(switchToActivityIndex) {
switch
(switchToActivityIndex) {
case
2:
.setData({
animation_1:
.anmt_fadeOut(),
animation_2:
.anmt_fadeIn(),
animation_3:
null
,
});
break
;
3:
}
setTimeout(()=> {
.setData({curActivityIndex: switchToActivityIndex});
}, 400);
anmt_fadeIn() {
const Animation = wx.createAnimation({
duration: 400,
timingFunction:
"linear"
delay: 0,
transformOrigin:
"ease-out"
Animation.opacity(1).step();
return
Animation.export();
anmt_fadeOut() {
Animation.opacity(0).step().top(100000).step();
.page {
width
:
100%
height
100
vh;
position
relative
.wrapper--bg {
display
: flex;
.wrapper--content {
absolute
top
0
flex-
direction
: column;
/* justify-content: center; */
align-items:
center
color
#fff
.text-
-1
, .text-
-2
{
font-size
52
rpx;
font-family
'Microsoft YaHei'
-3
-4
24
margin-top
35
bottom
50
.c-img-bg {
.activity-
, .activity-
z-index
3
2
1
按照教程提供代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
这是一个小demo component,在开发工具或安卓机是正常的,但在ios无法出现动画。
我的机子是:iphone x, ios 12.1(16B92)
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
我也遇到了,iphone 上动画压根不生效
我这也不好使 说是6.7.4 修复 6.7.4了 也不好使
问题未复现,提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
<
view
class
=
"page"
>
<
view
animation
=
"{{animation_1}}"
class
=
"activity--1"
style
=
"opacity: 1"
bindtap
=
"onTapAc1"
>
<
view
class
=
"wrapper--bg"
style
=
"background: red;"
>
</
view
>
<
view
class
=
"wrapper--content"
>
<
view
class
=
"text--1"
>我是第一页</
view
>
</
view
>
</
view
>
<
view
animation
=
"{{animation_2}}"
class
=
"activity--2"
style
=
"opacity: 0"
bindtap
=
"onTapAc2"
>
<
view
class
=
"wrapper--bg"
style
=
"background: blue;"
>
<
image
class
=
"c-img-bg"
src
=
"{{bg_2}}"
mode
=
"aspectFill"
></
image
>
</
view
>
<
view
class
=
"wrapper--content"
>
<
view
class
=
"text--1"
>我是第二页</
view
>
</
view
>
</
view
>
<
view
animation
=
"{{animation_3}}"
class
=
"activity--3"
style
=
"opacity: 0"
bindtap
=
"onTapAc3"
>
<
view
class
=
"wrapper--bg"
style
=
"background: yellow;"
>
</
view
>
<
view
class
=
"wrapper--content"
>
<
view
class
=
"text--1"
>我是第三页</
view
>
</
view
>
</
view
>
</
view
>
Component({
/**
* 组件的属性列表
*/
properties: {},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
onTapAc1() {
this
.switchActivity(2);
// this.opacity_worker(400);
},
onTapAc2() {
this
.switchActivity(3);
},
onTapAc3() {
this
.triggerEvent(
'switchPart'
, 1);
},
switchActivity(switchToActivityIndex) {
this
.activity_animation_setting(switchToActivityIndex);
},
activity_animation_setting(switchToActivityIndex) {
switch
(switchToActivityIndex) {
case
2:
this
.setData({
animation_1:
this
.anmt_fadeOut(),
animation_2:
this
.anmt_fadeIn(),
animation_3:
null
,
});
break
;
case
3:
this
.setData({
animation_1:
null
,
animation_2:
this
.anmt_fadeOut(),
animation_3:
this
.anmt_fadeIn(),
});
break
;
}
setTimeout(()=> {
this
.setData({curActivityIndex: switchToActivityIndex});
}, 400);
},
anmt_fadeIn() {
const Animation = wx.createAnimation({
duration: 400,
timingFunction:
"linear"
,
delay: 0,
transformOrigin:
"ease-out"
});
Animation.opacity(1).step();
return
Animation.export();
},
anmt_fadeOut() {
const Animation = wx.createAnimation({
duration: 400,
timingFunction:
"linear"
,
delay: 0,
transformOrigin:
"ease-out"
});
Animation.opacity(0).step().top(100000).step();
return
Animation.export();
},
}
});
.page {
width
:
100%
;
height
:
100
vh;
position
:
relative
;
}
.wrapper--bg {
display
: flex;
width
:
100%
;
height
:
100
vh;
}
.wrapper--content {
position
:
absolute
;
top
:
0
;
width
:
100%
;
height
:
100
vh;
display
: flex;
flex-
direction
: column;
/* justify-content: center; */
align-items:
center
;
color
:
#fff
;
}
.text-
-1
, .text-
-2
{
font-size
:
52
rpx;
font-family
:
'Microsoft YaHei'
;
}
.text-
-3
, .text-
-4
{
font-size
:
24
rpx;
}
.text-
-1
{
margin-top
:
35
vh;
}
.text-
-4
{
position
:
absolute
;
bottom
:
50
rpx;
}
.c-img-bg {
width
:
100%
;
height
:
100
vh;
}
.activity-
-1
, .activity-
-2
, .activity-
-3
{
position
:
absolute
;
top
:
0
;
width
:
100%
;
height
:
100
vh;
}
.activity-
-1
{
z-index
:
3
;
}
.activity-
-2
{
z-index
:
2
;
}
.activity-
-3
{
z-index
:
1
;
}
按照教程提供代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
这是一个小demo component,在开发工具或安卓机是正常的,但在ios无法出现动画。
我的机子是:iphone x, ios 12.1(16B92)