基于JS实现Android,iOS一个手势动画效果
2019/6/27 22:27:50
本文主要是介绍基于JS实现Android,iOS一个手势动画效果,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
废话不多说了,先给大家展示下效果图:
这是iOS下的效果,android下完全一致。通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合效果,还支持声音效果。
下面是主要的代码
//index.ui.js var do_Animator1 = mm("do_Animator"); do_Animator1.append(500, { y: -1334, curve:"Linear" }); var do_Animator2 = mm("do_Animator"); do_Animator2.append(500, { y: 0, curve:"Linear" }); do_Page.on("NextPagemoveing", function(){ currentView=json_define[currentIndex].view; currentIndex++; if (currentIndex>=json_define.length) currentIndex=0; nextView=json_define[currentIndex].view; for(var i=0;i<json_define.length;++i){ if (json_define[i].view != currentView && json_define[i].view != nextView){ json_define[i].view.visible=false; } else{ json_define[i].view.visible=true; } } currentView.fire("closingBottom", "NextPagemove"); }); do_Page.on("NextPagemove", function(){ nextView.fire("initMoving", "NextPagemoved"); }); do_Page.on("NextPagemoved", function(){ currentView.y= 0; nextView.y= 1332; do_ALayout_main.y=0; do_ALayout_main.redraw(); do_ALayout_main.animate(do_Animator1, function(){ nextView.fire("opening"); }); }); do_Page.on("PrePagemoveing", function(){ currentView=json_define[currentIndex].view; currentIndex--; if (currentIndex<0) currentIndex=json_define.length -1; nextView=json_define[currentIndex].view; currentView.fire("closingHead", "PrePagemove"); }); do_Page.on("PrePagemove", function(){ nextView.fire("initMoving", "PrePagemoved"); }); do_Page.on("PrePagemoved", function(){ for(var i=0;i<json_define.length;++i){ if (json_define[i].view != currentView && json_define[i].view != nextView){ json_define[i].view.visible=false; } else{ json_define[i].view.visible=true; } } currentView.y= 1332; nextView.y= 0; do_ALayout_main.y=-1334; do_ALayout_main.redraw(); do_ALayout_main.animate(do_Animator2, function(){ nextView.fire("opening"); }); });
这篇关于基于JS实现Android,iOS一个手势动画效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set