收藏
回答

动画在安卓上正常,IOS上不正常

问题模块 框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 Bug iOS 12.3.1 iphone6 7.0.4

- 当前 Bug 的表现(可附上截图)

我做了一个点击或者左滑右滑切换轮播的动画,在开发者工具上和安卓手机上动画流畅且表现一致,但是在苹果手机上的表现就不一样,目前使用了iphone6,iphone6plus,iphone8动画上都有一些问题,好像是所有的苹果手机动画上都有些不正常(和安卓手机以及开发者工具表现不一样),比如切换的时候,最后定格那一刻,不同轮播项的位置会从上或下或左或右顿一下再回到正确的位置。还比如偶然会出现没有动画直接结束的现象。

- 预期表现

希望动画可以像安卓手机和开发者工具上那样动画正常。

- 复现路径

可以先用开发者工具和安卓手机看一下效果,然后再用苹果手机(比如iphone6,iphone6plus,iphone8等)看一下效果,动画表现是不一样的。

- 提供一个最简复现 Demo

不知道是代码写的有问题还是怎样,动画里面用到了transition和animation,请帮忙看一下代码片段https://developers.weixin.qq.com/s/eKnQommi709P

开发者工具上和安卓手机是正常的,很流畅,要用苹果手机试一下。求解答,谢谢啦!

最后一次编辑于  06-24  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • 是柿子啊
    是柿子啊
    06-24

    比如切换的时候,最后定格那一刻,不同轮播项的位置会从上或下或左或右顿一下再回到正确的位置。还比如偶然会出现没有动画直接结束的现象。=>这个测试时候没复现这个问题-使用iPhonexr我,微信版本:7.0.4,你提供下录屏?

    06-24
    赞同
    回复 7
    • 宝宝
      宝宝
      06-26

      好的,我提供下录屏,总共三个录屏。

      微信开发者工具上的表现:https://static.moyutan.com/activity_folder/2019/June/testMini/wxtool.mp4

      安卓手机(这个是oppo R11s)上的表现: https://static.moyutan.com/activity_folder/2019/June/testMini/android.mp4

      苹果手机(这个是iphone6) 上的表现: https://static.moyutan.com/activity_folder/2019/June/testMini/iphone6.mp4

      苹果手机(这个是iphone6p)上的表现:https://static.moyutan.com/activity_folder/2019/June/testMini/iphone6p.mp4

      苹果手机点击切换的时候,不是直接到最后一帧,而是不同轮播项的位置会从上或下或左或右顿一下再回到正确的位置。偶尔出现没有动画直接结束的现象等我再次遇到时录屏吧,请帮忙看下现在苹果手机的动画和安卓以及微信开发者工具上表现不一致是为什么呢

      06-26
      回复
    • 宝宝
      宝宝
      06-26

      从我录的屏里可以看到苹果手机点击切换的时候,不是直接到最后一帧,而是不同轮播项的位置会从上或下或左或右顿一下再回到正确的位置。安卓和开发者工具没问题,这是为什么呢?求解答,谢谢!

      06-26
      回复
    • 宝宝
      宝宝
      06-27

      麻烦帮忙回答一下我的问题吧,我已经录屏了,求解答。

      06-27
      回复
    • 是柿子啊
      是柿子啊
      06-27回复宝宝

      在看了,有结果会及时同步的

      06-27
      回复
    • 宝宝
      宝宝
      06-27回复是柿子啊

      好哒,谢谢。

      06-27
      回复
    查看更多(2)
  • 宝宝
    宝宝
    06-24

    可以回答一下我的问题吗,急求解答,十分感谢!

    06-24
    赞同
    回复 4
    • Naoko graphene
      Naoko graphene
      06-25

      比如 transition ,transform 写上 -webkit- 前缀,有些 ios 就是吃这一套



      06-25
      回复
    • 宝宝
      宝宝
      06-26回复Naoko graphene

      我加了-webkit-前缀后还是不行。

      06-26
      回复
    • Naoko graphene
      Naoko graphene
      06-26回复宝宝

      transform,

      transform-style

      transition

      @keyframes

      animation

      我看你的问题代码片段用到了这些动画属性,你确定每一个都加上了-webkit- 前缀吗?


      06-26
      回复
    • 宝宝
      宝宝
      06-26回复Naoko graphene

      是的,你看一下,这是我加了-webkit-之后的代码片段。https://developers.weixin.qq.com/s/E7wkmpmy7c97  苹果手机上的动画在最后一帧还是会从不同轮播项的位置会从上或下或左或右顿一下再回到正确的位置

      06-26
      回复