事情是这样的。
我司一小破程序,打开时类似这样,显示一个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
我们文档有些地方确实信息给得太少,我们会重点关注这块。 因为现在小程序小游戏整个文档特别大,从我们的角度去阅读编写确实也可能有一些会疏漏的地方,回头我开个帖子收集大家反馈文档问题。
原来你们也知道的啊
官方:这破文档我也不想维护了,跑路吧。
还没看完就笑了,赶上幽默笑话了。666
话说开发文档确实被吐槽过很多次,本楼主的吐槽最赞(没有之一)。
你应该自己写个博客或者公众号,粉丝肯定很多
哈哈,我也觉得,楼主被代码拖累的段子手。
火钳刘明
我大锤今天就把话撂这了!我就算饿死,从这里跳下去,我也再不用这破Animation接口了!
看情况 wxss 应该是 让你在wxss里写animation方法。嗯没错,就是这样 animation像css一样写。
根据帖子里 赵青山 朋友的指点下 测试了一下 总结如下
以下划重点:
直接使用css3的animation 则动画开始 迭代 结束事件 使用bindanimationstart bindanimationiteration bindanimationend 绑定
https://drafts.csswg.org/css-animations/#events
css3的 transition 可以使用. 但无法绑定任何事件
https://drafts.csswg.org/css-transitions/#transition-events 标准文档里是有transition的事件接口的
不知为何微信并没有提供
再来看微信Animation API创建的动画,只能绑定动画结束的事件,动画开始的事件并没有提供.
根据DEBUG调试的结果来看
微信Animation API框架的老司机应该是将标准transition和animation封装了一下,根据情况不同则调用不同的标准api进行动画的渲染.
只是有一点想不明白,微信何以要做出一个如此四不像的动画API库?
求放过.
我猜LZ在凌晨1点打开了开发者社区
边哭边笑写完,03:43
擦干眼泪沉沉睡去
刚在社区里搜索了一下关于动画事件不触发的报告还真不少
18年2月份就有这个问题的报告了
就是没人管.哎
官方文档最为致命呐...
表示等不住鹅厂修复了.
临时解决方案,写死凑活用吧
哈哈哈哈哈
敢情还在苦战
你这重点儿画的好
css动画ios打开页面会选择性执行 (我推测是页面没加载到 动画没绑上去然后就不执行了)
很神奇的操作
你这样迟早会猝死的!凌晨4点
别折腾了。。用css动画吧。。
css动画是个大坑
ios打开页面选择性执行
应该是页面没加载完毕
所以我的动画都是onReady中又延迟100ms执行???
楼主貌似只能折腾了 踩过坑的我留下没技术的泪水
嗯 是这样。。而且还有个分享bug。。不过可以跨过的坑。。还是可以接受~
恩恩,已经把动画全改原生了
分享功能的图片如何先展示load,再加载出图片,看了别人能做到。。自己死活百度不出来。。。。。
先wx.showLoading,然后canvas绘制,绘制完了wx.hideLoading啊
为啥不用css3动画,不是很方便吗,一步到位,用什么代码,说不定回头又给你更新坏了
有道理
微信说,再BB我甩手就改了request,你们是不想过好年了是吧
如果是transition 或 wx.createAnimation 动画,可以通过bindtransitionend侦听动画结束,如果是css3动画,可以通过bindanimationend侦听动画结束
老哥6
怎么监听的 我试了下不行啊~
你写个代码片段看一下https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
楼主是从隔壁“万万没想到”剧组过来串场的吧~~~~~欢迎欢迎!
这绝对是社区最幽默的帖子,年前最火的一篇帖子
严重怀疑这个大胸弟是半路转行的,以前不是文案组的就是编辑组的,哈哈哈哈^_^(手动滑稽)~
写小程序属于临时凑数.非前端专业人员
大胸弟,你这是天天上夜班吗,你这个时间点有点厉害啊(o^.^o)
基本早上睡觉. 后半夜干活. 时间比较自由 : )
早上了,大佬,该睡觉了(~﹃~)~zZ
昨晚没注意..起猛了.凌晨4点多就起来了..蓝瘦....这会还不困.......