• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序动画渲染问题

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
    everyBody,我这次的博客没有代码!

只不过想聊一下我小程序项目踩到的坑和解决的思路。

前些日子发现了挺严重的小程序bug,公司项目为头像贴纸的功能。当时也没想那么多直接的不管三七二十一的写。


好了现在和大家说一下,我一开始时直接用小程序的事件touchstart,touchmove,touchcancel这拖动三剑客来写拖动贴纸事件。操作区也是用的view。通过逻辑层的setData。把拖动的距离和数据不断setData来赋值到页面。最后在同过换算把所有贴纸的距离还有背景照片画到画布上并且导出图片。这个开发过程其实没有太大的难度。在开发工具上,和我本人(ios)手机上也非常的流畅顺滑。

不过后来测试的时候,发现使用安卓机来拖动的这个体验十分的差。延迟十分恐怖。根本没有操作的欲望。后来我就找问题了。终于在官方文档中找到了

下方图片截取自官网https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html

官方文档其实说得很清楚不能毫秒级的触发setData。当时也怪自己没有好好分析项目。直接就是一股脑的就是敲。

最后说下我发现当时这个bug的时候,感觉整个人生都是很绝望。没办法人家官网都说不能这样子做了,那肯定是没办法了。只能是换种办法。后来在多方途径的了解下以及亲测后,最后选择了用画布来实现在小程序的拖拽功能。实现的方法也稍微复杂点。这是我觉得最靠谱的。不过使用小程序的画布,也是很多的坑,这些就不下次再说把。也还有几种的解决办法:1就是使用官方movable-area组件。

不过这个方法不支持拖动旋转。不过倒是可是使用双指的放大缩小。2.就是使用自定义组件去渲染,我论坛上看见可以规避掉setData的渲染慢的问题。你们可以去试一下。3.就是使用官方的自定义的动画事件wx.createAnimation。



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap