收藏
回答

ios动画问题

API/组件名称 终端类型 微信版本 基础库版本
wx.createAnimation 客户端 最新 最新

动画是这样的,在进入小程序的时候,一张图片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()    })

   

回答关注问题邀请回答
收藏

9 个回答

  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-01-11

    好的,我们查一下。不过这个是iOS系统控制的,可能也没什么好办法。根据以往的经验,如果在动画过程中改变了界面,就容易出现这种问题。


    如果方便的话,麻烦提供下可复现的 wxml 和涉及的 wxss ,尽量简短一些。

    2018-01-11
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-01-10

    在出问题的机器上是每次必现的问题吗?

    2018-01-10
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-01-10

    看你提供的信息没发现有什么问题。


    注意动画过程中如果有setData调用,那有可能就会出现这个情况。

    2018-01-10
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-01-10

    ios进入的时候,部分机型可以显示动画效果,但是部分机型,直接显示最终效果


    能不能给下有问题的iOS版本呢?

    2018-01-10
    赞同
    回复
  • npc光明
    npc光明
    2018-01-12

     <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;}

        }


    2018-01-12
    赞同
    回复 1
    • Rainbow*_*^@^
      Rainbow*_*^@^
      2019-09-07
      你好,我现在也是遇到了这个问题,部分机型动画播放完成后不停留在最后一帧,请问你最后解决了吗?
      2019-09-07
      回复
  • npc光明
    npc光明
    2018-01-11

    非必现偶尔也会正常,我测试了多次,发现如果使用css3,只要设置animation-iteration-count不是无限次,而且保留动画最后一帧就会出现这种问题.

    2018-01-11
    赞同
    回复
  • npc光明
    npc光明
    2018-01-10

    还是不可以,现在页面有没用任何setData.但是动画,依然时好时坏,安卓正常.

    2018-01-10
    赞同
    回复
  • npc光明
    npc光明
    2018-01-10

    好的,多谢

    2018-01-10
    赞同
    回复
  • npc光明
    npc光明
    2018-01-10

    ios版本11.2.1  微信版本6.6.1  手机型号 6p


    2018-01-10
    赞同
    回复
登录 后发表内容