使用Worklight进行Hybird开发,Html5和Native切换时增加动画效果

在Worklight中使用Html5和Native进行Hybrid开发时,两者之间互相切换时比较生硬,用户体验非常一般。

其实,我们可以在两者直接切换时增加动画效果来解决此问题:

iOS上:

(1)从html5转到native时:Native的ViewController里重写onAfterShow方法,在里面增加动画代码:

-(void)onAfterShow{
    [self showTransitionAnim];
}

-(void)showTransitionAnim
{
    CDVAppDelegate *cordovaAppDelegate =[[UIApplication sharedApplication] delegate];
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.5];
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:[cordovaAppDelegate window] cache:YES];
    [UIView commitAnimations];
}

 (2)从Native返回Html5时,做如下处理:

-(void)naviClick:(UIButton *)sender
{
    NSDictionary *dic = [NSDictionary dictionaryWithObject:[NSNumber numberWithInt:[sender tag]] forKey:@"index"];
    
    // 显示动画
    [self showTransitionAnim];
    
    //返回web界面
    [NativePage showWebView:dic];
}

Android:

(1)从html5转到native时:Native的Activity里在onCreate方法中增加动画代码:

@Override
public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	//增加滑动切换动画
	overridePendingTransition(android.R.anim.slide_in_left,android.R.anim.slide_out_right);
	// Go fullscreen
	requestWindowFeature(Window.FEATURE_NO_TITLE);
	getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
	setContentView(R.layout.front);
}

 (2)从Native返回Html5时,做如下处理:

private void returnToWeb() {
		Intent intent = new Intent();
		intent.putExtra("index", index);
		setResult(RESULT_OK, intent);
		finish();
     //增加滑动切换动画
		overridePendingTransition(android.R.anim.slide_in_left,android.R.anim.slide_out_right);
	}

相关推荐