小程序
小游戏
企业微信
微信支付
扫描小程序码分享
- 当前 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)。
<viewclass="page"><viewanimation="{{animation_1}}"class="activity--1"style="opacity: 1"bindtap="onTapAc1"><viewclass="wrapper--bg"style="background: red;"></view><viewclass="wrapper--content"><viewclass="text--1">我是第一页</view></view></view><viewanimation="{{animation_2}}"class="activity--2"style="opacity: 0"bindtap="onTapAc2"><viewclass="wrapper--bg"style="background: blue;"><imageclass="c-img-bg"src="{{bg_2}}"mode="aspectFill"></image></view><viewclass="wrapper--content"><viewclass="text--1">我是第二页</view></view></view><viewanimation="{{animation_3}}"class="activity--3"style="opacity: 0"bindtap="onTapAc3"><viewclass="wrapper--bg"style="background: yellow;"></view><viewclass="wrapper--content"><viewclass="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) {case2:this.setData({animation_1:this.anmt_fadeOut(),animation_2:this.anmt_fadeIn(),animation_3:null,});break;case3: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();returnAnimation.export();},anmt_fadeOut() {const Animation = wx.createAnimation({duration: 400,timingFunction:"linear",delay: 0,transformOrigin:"ease-out"});Animation.opacity(0).step().top(100000).step();returnAnimation.export();},}});.page {width:100%;height:100vh;position:relative;}.wrapper--bg {display: flex;width:100%;height:100vh;}.wrapper--content {position:absolute;top:0;width:100%;height:100vh;display: flex;flex-direction: column;/* justify-content: center; */align-items:center;color:#fff;}.text--1, .text--2{font-size:52rpx;font-family:'Microsoft YaHei';}.text--3, .text--4{font-size:24rpx;}.text--1{margin-top:35vh;}.text--4{position:absolute;bottom:50rpx;}.c-img-bg {width:100%;height:100vh;}.activity--1, .activity--2, .activity--3{position:absolute;top:0;width:100%;height:100vh;}.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)