信鸽网

基于JS实现Android,iOS一个手势动画效果

  作者：bea

废话不多说了，先给大家展示下效果图： 这是iOS下的效果，android下完全一致。通过do_GestureView组件和do_Animation组件，deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合效果，还支持声音效果。 下面是主要的代码 //index.ui.jsvar do_Animator1 = mm("do_Animator");do_Animator1.append(500, {y: -1334,

废话不多说了，先给大家展示下效果图：



这是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");

});

});





有用  |  无用

猜你喜欢

您可能感兴趣的文章: