动画是这样的,在进入小程序的时候,一张图片1s内从左边滑动到中间,透明度从0变成1动画只执行一次,保留最后一帧状态. 安卓是完全没有问题的.但是ios不行,ios进入的时候,部分机型可以显示动画效果,但是部分机型,直接显示最终效果.
使用了 wx.createAnimation这个api还有css3两种方式都用这个问题,请问一下这个是什么原因.谢谢
粘贴上css3代码
.left_style{
position:absolute;
top: 60rpx;
left:0rpx;
width:153rpx;
height:308rpx;
opacity:0;
animation:moveAction 1s 1 linear;
animation-fill-mode:forwards;
}
@keyframes moveAction
{
from {left:0rpx;opacity:0;}
to {left:212rpx;opacity:1;}
}
api代码
var animation = wx.createAnimation({
duration: 1000, timingFunction:"linear" })
this.animation = animation animation.left(212.4rpx).opacity(1).step()
this.setData({ animationData:animation.export() })
好的，我们查一下。不过这个是iOS系统控制的，可能也没什么好办法。根据以往的经验，如果在动画过程中改变了界面，就容易出现这种问题。
如果方便的话，麻烦提供下可复现的 wxml 和涉及的 wxss ，尽量简短一些。
在出问题的机器上是每次必现的问题吗？
看你提供的信息没发现有什么问题。
注意动画过程中如果有setData调用，那有可能就会出现这个情况。
能不能给下有问题的iOS版本呢？
<image class="left_style" src="{{urlAddress}}/right_hand.png" />
.left_style{
position:absolute;
top: 60rpx;
left:0rpx;
width:153.6rpx;
height:308.8rpx;
opacity:0;
animation-delay:1s;
animation:mymove 1s 1 linear; //有问题.只要animation-iteration-count不是infinite都有问题
animation:mymove 1s infinite linear; //没问题
animation-fill-mode:forwards;
}
@keyframes mymove
{
from {left:0rpx;opacity:0;}
to {left:212.4rpx;opacity:1;}
}
非必现偶尔也会正常,我测试了多次,发现如果使用css3,只要设置animation-iteration-count不是无限次,而且保留动画最后一帧就会出现这种问题.
还是不可以,现在页面有没用任何setData.但是动画,依然时好时坏,安卓正常.
好的,多谢
ios版本11.2.1 微信版本6.6.1 手机型号 6p