收藏
回答

这文档是敌特派来的人写的吗?目的就是为了整死我们搬砖工吗?

事情是这样的。


我司一小破程序,打开时类似这样,显示一个logo,一个标题


经过一个2秒的动画效果,logo和标题就移动到上面部分了,同时渐显出来一个loading组件,这些都是使用小程序的Animation API实现的。




现在需求来了。

我们想在首屏渲染后。在图标往上移的动画执行周期中,将背景色缓慢从蓝色变为白色。

(别问为什么要变背景色,我们准备待会加完班拿上弹弓组团去打设计师家玻璃了)




有朋友会说了,这不是很简单嘛,弄个定时器去替换class不就行了?


我只想说,no no no。朋友,我们搬砖就要有搬砖的样子嘛。

什么时间搬,搬多少,什么时间停,都要严谨嘛。


天真的我,想当然的就拍着胸脯向BOSS表示小意思啦。

naive的我心里想着


肯定会有动画执行开始和结束一个callback接口的嘛


然鹅,、翻遍了小程序文档里关于动画的各个段落之后才发现


神马?? 我不信!一定是我的眼刚刚瞎了,我要再看一遍。


PS

看,多么言简意赅的文档!

在看多了外面那些"妖艳贱货"的文档后,如此小清新的文档,还真让我这老司机虎躯一震。

// TODO

我当即在心里暗暗发誓,我一定要强烈建议我司将此文档规范引进并在我司大范围实践,太他【文明用语】高效了。

END PS


在我不懈的努力下

在某毒找到了一篇关于动画重置的实例




哦也,三七三十一,一定是我聋了才没看见这么大个接口

同事心里还在做自我批判,怎么能轻易的就甩锅给腾讯爸爸。


祭出我的Ctrl+F大法




果然。还是我太天真。竟然没有搜到 0/0?



在经过了一番苦苦的某毒搜索之后,猛然意识到,或许是我姿势不对?


谢天谢地,博客园诚不我欺。确实有这个东东。


我默默的打开了唯一的一条搜索结果学习了起来。你猜怎么着?



我发现了腾讯爸爸藏起来的彩蛋。

哇,没想到小程序团队这么调皮。

在动画相关的所有文档里,竟然半个字都没提有这几个事件。保密工作做的很到位。表扬。5星好评。




根据文档,照猫画虎。



控制台没有任何反应


一定是我姿势不对,我换换姿势。



一顿操作猛如虎,然鹅发现并没有什么卵用。










我盯着这条说明,默默的给自己点上了一根烟后陷入了痛苦的沉思。


期间我尝试了各种姿势,都没有找到关于WXSS animation到底是个什么鬼。

我只知道有Animation这个动画API。或许他俩是一个东西?

但是为什么Animation里没有关于它的只言片语?


既然Animation里没有写,肯定是另外一套体系吧?

灵光一闪,
oh no,别又是腾讯爸爸调皮了把文档藏起来了吧。





经过地毯式的搜索及换遍了各种姿势想要跟我的小程序互动一把后。





我选择死亡。






我想起那天夕阳下调的微信小程序,那是我逝去的青春。。。


IDE: v1.02.1901230

Library: 2.4.2

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

76 个回答

  • 小程序技术专员-拉风
    小程序技术专员-拉风
    2019-01-30

    我们文档有些地方确实信息给得太少,我们会重点关注这块。 因为现在小程序小游戏整个文档特别大,从我们的角度去阅读编写确实也可能有一些会疏漏的地方,回头我开个帖子收集大家反馈文档问题。

    2019-01-30
    有用 2
    回复 3
    • 赵光裕
      赵光裕
      2019-01-30

      原来你们也知道的啊

      2019-01-30
      回复
    • 你吼那么大声干什么
      你吼那么大声干什么
      2019-01-30

      官方:这破文档我也不想维护了,跑路吧。

      2019-01-30
      回复
    • 2019-01-31

      2019-01-31
      回复
  • 连胜
    连胜
    2019-01-28

    还没看完就笑了,赶上幽默笑话了。666

    话说开发文档确实被吐槽过很多次,本楼主的吐槽最赞(没有之一)。

    你应该自己写个博客或者公众号,粉丝肯定很多

    2019-01-28
    有用 79
    回复 8
    • 🐠糖醋鱼
      🐠糖醋鱼
      2019-01-28

      哈哈,我也觉得,楼主被代码拖累的段子手。

      2019-01-28
      9
      回复
    • 耳朵
      耳朵
      2019-01-28

      火钳刘明

      2019-01-28
      1
      回复
    • 2019-01-28

      我大锤今天就把话撂这了!我就算饿死,从这里跳下去,我也再不用这破Animation接口了!

      2019-01-28
      10
      回复
    • 2019-01-28

      2019-01-28
      1
      回复
    • 睡前原谅一切
      睡前原谅一切
      2019-01-29回复

      看情况 wxss 应该是 让你在wxss里写animation方法。嗯没错,就是这样 animation像css一样写。

      2019-01-29
      回复
    查看更多(3)
  • 2019-01-28

    根据帖子里 赵青山 朋友的指点下 测试了一下  总结如下


    以下划重点:


    直接使用css3的animation 则动画开始 迭代 结束事件 使用bindanimationstart   bindanimationiteration bindanimationend 绑定






    https://drafts.csswg.org/css-animations/#events





    css3transition 可以使用.    但无法绑定任何事件




    https://drafts.csswg.org/css-transitions/#transition-events     标准文档里是有transition的事件接口的




    不知为何微信并没有提供



    再来看微信Animation API创建的动画,只能绑定动画结束的事件,动画开始事件并没有提供.






    根据DEBUG调试的结果来看




    微信Animation API框架的老司机应该是将标准transition和animation封装了一下,根据情况不同则调用不同的标准api进行动画的渲染.



    只是有一点想不明白,微信何以要做出一个如此四不像的动画API库?


    求放过.


    2019-01-28
    有用 9
    回复
  • vane
    vane
    2019-01-28

    我猜LZ在凌晨1点打开了开发者社区


    边哭边笑写完,03:43


    擦干眼泪沉沉睡去

    2019-01-28
    有用 7
    回复 9
    • 2019-01-28

      刚在社区里搜索了一下关于动画事件不触发的报告还真不少


      18年2月份就有这个问题的报告了


      就是没人管.哎


      官方文档最为致命呐...


      表示等不住鹅厂修复了.


      临时解决方案,写死凑活用吧






      2019-01-28
      4
      回复
    • vane
      vane
      2019-01-28回复

      哈哈哈哈哈


      敢情还在苦战

      2019-01-28
      3
      回复
    • 阿巴阿巴
      阿巴阿巴
      2019-01-28回复vane


      2019-01-28
      4
      回复
    • 连胜
      连胜
      2019-01-28回复阿巴阿巴

      你这重点儿画的好

      2019-01-28
      回复
    • 龙@CYBERSPACE
      龙@CYBERSPACE
      2019-01-28回复

      css动画ios打开页面会选择性执行 (我推测是页面没加载到  动画没绑上去然后就不执行了)

      很神奇的操作



      2019-01-28
      1
      回复
    查看更多(4)
  • 程序猿
    程序猿
    2019-01-28

    你这样迟早会猝死的!凌晨4点

    2019-01-28
    有用 6
    回复
  • 卢霄霄
    卢霄霄
    2019-01-28

    别折腾了。。用css动画吧。。

    2019-01-28
    有用 6
    回复 11
    • 龙@CYBERSPACE
      龙@CYBERSPACE
      2019-01-28

      css动画是个大坑

      ios打开页面选择性执行

      应该是页面没加载完毕

      所以我的动画都是onReady中又延迟100ms执行???


      楼主貌似只能折腾了  踩过坑的我留下没技术的泪水

      2019-01-28
      1
      回复
    • 卢霄霄
      卢霄霄
      2019-01-28回复龙@CYBERSPACE

      嗯 是这样。。而且还有个分享bug。。不过可以跨过的坑。。还是可以接受~

      2019-01-28
      1
      回复
    • 2019-01-29

      恩恩,已经把动画全改原生了

      2019-01-29
      回复
    • 2019-01-29回复卢霄霄

      分享功能的图片如何先展示load,再加载出图片,看了别人能做到。。自己死活百度不出来。。。。。

      2019-01-29
      回复
    • 卢霄霄
      卢霄霄
      2019-01-29回复

      先wx.showLoading,然后canvas绘制,绘制完了wx.hideLoading啊

      2019-01-29
      回复
    查看更多(6)
  • 2019-01-28

    为啥不用css3动画,不是很方便吗,一步到位,用什么代码,说不定回头又给你更新坏了

    2019-01-28
    有用 4
    回复 2
    • 2019-01-29

      有道理

      2019-01-29
      回复
    • 黎😄
      黎😄
      2019-01-29

      微信说,再BB我甩手就改了request,你们是不想过好年了是吧

      2019-01-29
      2
      回复
  • 禾店短剧系统
    禾店短剧系统
    2021-05-27

    2021-05-27
    有用 1
    回复
  • 赵青山
    赵青山
    2019-01-28

    如果是transition 或 wx.createAnimation 动画,可以通过bindtransitionend侦听动画结束,如果是css3动画,可以通过bindanimationend侦听动画结束


    2019-01-28
    有用 1
    回复 3
  • 2019-01-28

    楼主是从隔壁“万万没想到”剧组过来串场的吧~~~~~欢迎欢迎!

    2019-01-28
    有用 1
    回复 1
    • 连胜
      连胜
      2019-01-28

      这绝对是社区最幽默的帖子,年前最火的一篇帖子

      2019-01-28
      4
      回复

正在加载...

登录 后发表内容