You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@weex.apache.org by "刘洋(凯冯)" <ka...@alibaba-inc.com> on 2017/04/06 11:21:16 UTC
reply：How to improve the animation in weex
Hi all,
The typical way to create animations in JavaScript is to use setInterval() to manage all animations.
A basic animation loop using setInterval() looks like this:
(function(){
function update(){
doAnimation();
}
setInterval(update, 1000/60);
})();
Alternatively,you can call setTimeoutrecursively to avoidexecutingJS callbacks at the same time.
However, the setTimeout/setIntervalfunctionality in Weex is provided by WxTimerModule written in Java/Objective C.
A setTimeout(callback, delay) function isexecuted on Android in following steps:
step 1: JS code callsetTimeout(callback, delay)
step 2: Weex JS framework use callNative to call WxTimerModule
step 3: Whencountdown is over,WxTimerModule use callJS toexecutecallback function.
Above steps include Javareflection and JNI call.If I want to run a HTML5 game engine at 60fps in Weex , which means a Javareflection andJNI call will beexecuted in every 17ms, theperformance is unacceptable.
(A verysimplified html5 game demo can run at 60 fps in mobile chrome on LG G5, but the fps in Weex is only 20 fps one the same phone)
So here is my proposal:
Provide a C++ setTimeout/setInterval/clearTimeout/clearInterval implementation for Weex and register these C++ functions to V8 global object as global functions. BypassJava/Objective CWxTimerModule and completely avoid anyreflection and JNI call.
A prototypeimplementationis realized based on the idea above and test pass.
Performance improvements is huge. ( from 20 fps to 50 fps)
Does anybody has comments on myproposal?
原始邮件
发件人:jerry.ssonghaibohust@gmail.com
收件人:devdev@weex.incubator.apache.org
发送时间:2017年4月6日(周四) 17:46
主题:How to improve the animation in weex
Hi All: If there is a lot of communication to run animation in weex. animation is not smooth. Is there method to improve animation in weex? Best Regards Jerry
Re: reply：How to improve the animation in weex
Posted by Jack Pu <ka...@gmail.com>.
In modern browser requestAnimationFrame(
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame)
is a best way for web developers to try some animations.
How about implementing the method? Or is there any way to use it in weex ?
2017-04-07 0:59 GMT+08:00 BryantWu <zh...@alibaba-inc.com>:
> good work
>
>
>
> ------------------------------------------------------------
> ------发件人：jerry.s<so...@gmail.com>日 期：2017年04月06日 21:51:34收件人：<
> dev@weex.incubator.apache.org>主 题：Re: reply：How to improve the animation
> in weexHi,Kaifeng:
> It's GREAT. Because weex use timer frequently . I think this method will
> reduce delay in communication
> I will add similar feature for iOS in Weex.
>
> Best Regards
> Jerry
>
> > 在 2017年4月6日，下午7:21，刘洋(凯冯) <ka...@alibaba-inc.com> 写道：
> >
> > Hi all,
> >
> >
> > The typical way to create animations in JavaScript is to use
> setInterval() to manage all animations.
> > A basic animation loop using setInterval() looks like this:
> >
> >
> > (function(){
> > function update(){
> > doAnimation();
> > }
> > setInterval(update, 1000/60);
> > })();
> >
> >
> > Alternatively,you can call setTimeoutrecursively to avoidexecutingJS
> callbacks at the same time.
> >
> >
> > However, the setTimeout/setIntervalfunctionality in Weex is provided by
> WxTimerModule written in Java/Objective C.
> > A setTimeout(callback, delay) function isexecuted on Android in
> following steps:
> > step 1: JS code callsetTimeout(callback, delay)
> > step 2: Weex JS framework use callNative to call WxTimerModule
> > step 3: Whencountdown is over,WxTimerModule use callJS toexecutecallback
> function.
> >
> >
> > Above steps include Javareflection and JNI call.If I want to run a HTML5
> game engine at 60fps in Weex , which means a Javareflection andJNI call
> will beexecuted in every 17ms, theperformance is unacceptable.
> > (A verysimplified html5 game demo can run at 60 fps in mobile chrome on
> LG G5, but the fps in Weex is only 20 fps one the same phone)
> >
> >
> > So here is my proposal:
> >
> >
> > Provide a C++ setTimeout/setInterval/clearTimeout/clearInterval
> implementation for Weex and register these C++ functions to V8 global
> object as global functions. BypassJava/Objective CWxTimerModule and
> completely avoid anyreflection and JNI call.
> >
> >
> > A prototypeimplementationis realized based on the idea above and test
> pass.
> > Performance improvements is huge. ( from 20 fps to 50 fps)
> > Does anybody has comments on myproposal?
> >
> >
> >
> >
> > 原始邮件
> > 发件人:jerry.ssonghaibohust@gmail.com
> > 收件人:devdev@weex.incubator.apache.org
> > 发送时间:2017年4月6日(周四) 17:46
> > 主题:How to improve the animation in weex
> >
> >
> > Hi All: If there is a lot of communication to run animation in weex.
> animation is not smooth. Is there method to improve animation in weex? Best
> Regards Jerry
>
--
*来自* *Jack*
回复： reply：How to improve the animation in weex
Posted by BryantWu <zh...@alibaba-inc.com>.
good work
------------------------------------------------------------------发件人：jerry.s<so...@gmail.com>日 期：2017年04月06日 21:51:34收件人：<de...@weex.incubator.apache.org>主 题：Re: reply：How to improve the animation in weexHi,Kaifeng:
It's GREAT. Because weex use timer frequently . I think this method will reduce delay in communication
I will add similar feature for iOS in Weex.
Best Regards
Jerry
> 在 2017年4月6日，下午7:21，刘洋(凯冯) <ka...@alibaba-inc.com> 写道：
>
> Hi all,
>
>
> The typical way to create animations in JavaScript is to use setInterval() to manage all animations.
> A basic animation loop using setInterval() looks like this:
>
>
> (function(){
> function update(){
> doAnimation();
> }
> setInterval(update, 1000/60);
> })();
>
>
> Alternatively,you can call setTimeoutrecursively to avoidexecutingJS callbacks at the same time.
>
>
> However, the setTimeout/setIntervalfunctionality in Weex is provided by WxTimerModule written in Java/Objective C.
> A setTimeout(callback, delay) function isexecuted on Android in following steps:
> step 1: JS code callsetTimeout(callback, delay)
> step 2: Weex JS framework use callNative to call WxTimerModule
> step 3: Whencountdown is over,WxTimerModule use callJS toexecutecallback function.
>
>
> Above steps include Javareflection and JNI call.If I want to run a HTML5 game engine at 60fps in Weex , which means a Javareflection andJNI call will beexecuted in every 17ms, theperformance is unacceptable.
> (A verysimplified html5 game demo can run at 60 fps in mobile chrome on LG G5, but the fps in Weex is only 20 fps one the same phone)
>
>
> So here is my proposal:
>
>
> Provide a C++ setTimeout/setInterval/clearTimeout/clearInterval implementation for Weex and register these C++ functions to V8 global object as global functions. BypassJava/Objective CWxTimerModule and completely avoid anyreflection and JNI call.
>
>
> A prototypeimplementationis realized based on the idea above and test pass.
> Performance improvements is huge. ( from 20 fps to 50 fps)
> Does anybody has comments on myproposal?
>
>
>
>
> 原始邮件
> 发件人:jerry.ssonghaibohust@gmail.com
> 收件人:devdev@weex.incubator.apache.org
> 发送时间:2017年4月6日(周四) 17:46
> 主题:How to improve the animation in weex
>
>
> Hi All: If there is a lot of communication to run animation in weex. animation is not smooth. Is there method to improve animation in weex? Best Regards Jerry
Re: reply：How to improve the animation in weex
Posted by "jerry.s" <so...@gmail.com>.
Hi,Kaifeng:
It's GREAT. Because weex use timer frequently . I think this method will reduce delay in communication
I will add similar feature for iOS in Weex.
Best Regards
Jerry
> 在 2017年4月6日，下午7:21，刘洋(凯冯) <ka...@alibaba-inc.com> 写道：
>
> Hi all,
>
>
> The typical way to create animations in JavaScript is to use setInterval() to manage all animations.
> A basic animation loop using setInterval() looks like this:
>
>
> (function(){
> function update(){
> doAnimation();
> }
> setInterval(update, 1000/60);
> })();
>
>
> Alternatively,you can call setTimeoutrecursively to avoidexecutingJS callbacks at the same time.
>
>
> However, the setTimeout/setIntervalfunctionality in Weex is provided by WxTimerModule written in Java/Objective C.
> A setTimeout(callback, delay) function isexecuted on Android in following steps:
> step 1: JS code callsetTimeout(callback, delay)
> step 2: Weex JS framework use callNative to call WxTimerModule
> step 3: Whencountdown is over,WxTimerModule use callJS toexecutecallback function.
>
>
> Above steps include Javareflection and JNI call.If I want to run a HTML5 game engine at 60fps in Weex , which means a Javareflection andJNI call will beexecuted in every 17ms, theperformance is unacceptable.
> (A verysimplified html5 game demo can run at 60 fps in mobile chrome on LG G5, but the fps in Weex is only 20 fps one the same phone)
>
>
> So here is my proposal:
>
>
> Provide a C++ setTimeout/setInterval/clearTimeout/clearInterval implementation for Weex and register these C++ functions to V8 global object as global functions. BypassJava/Objective CWxTimerModule and completely avoid anyreflection and JNI call.
>
>
> A prototypeimplementationis realized based on the idea above and test pass.
> Performance improvements is huge. ( from 20 fps to 50 fps)
> Does anybody has comments on myproposal?
>
>
>
>
> 原始邮件
> 发件人:jerry.ssonghaibohust@gmail.com
> 收件人:devdev@weex.incubator.apache.org
> 发送时间:2017年4月6日(周四) 17:46
> 主题:How to improve the animation in weex
>
>
> Hi All: If there is a lot of communication to run animation in weex. animation is not smooth. Is there method to improve animation in weex? Best Regards Jerry