使用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);
	}

 

 转载请注明：http://thierry-xing.iteye.com/blog/1832536