页面之间的跳转效果

作者: 关于计算机  发布:2019-11-24

页面之间的跳转效果,页面跳转职能

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    /*
     1,不使用动画
     UIViewAnimationTransitionNone

     2,从左向右旋转翻页
     UIViewAnimationTransitionFlipFromLeft

     3,从右向左旋转翻页,与UIViewAnimationTransitionFlipFromLeft相反
     UIViewAnimationTransitionFlipFromRight

     4,卷曲翻页,从下往上
     UIViewAnimationTransitionCurlUp

     5,卷曲翻页,从上往下
     UIViewAnimationTransitionCurlDown
     */

    FirstViewController *firstVC=[[FirstViewController alloc]init];

    [UIView  beginAnimations:nil context:NULL];
    //置动画块中的动画属性变化的曲线
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    //设置持续时间
    [UIView setAnimationDuration:0.5];
    //设置过渡的动画效果
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.navigationController.view cache:NO];

    [self.navigationController pushViewController:firstVC animated:YES];
    //提交动画
    [UIView commitAnimations];


}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ /* 1,不采用动漫片 UIViewAnimationTransitionNone 2,从左向右旋...

动用StackNavigator跳转页面时,react-navigation依据平台的两样内置了相应的跳转动漫。
置于的跳转动漫在react-navigation/src/views/CardStackStyleInterpolator中,共两种。forHorizontal:从右向左步向、forVertical:从下向上进入、forFadeFromBottomAndroid:从尾部淡出。
有关改进私下认可的跳转动漫恐怕自定义动漫效果,以下给出四个现象。

修正总体栈内的页面跳转动漫

这种现象是,三个栈内全体页面包车型客车跳转使用相仿的卡通效果,示例代码如下:

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
const CustomerNavigator = StackNavigator({
  ScreenKey: { screen: MyScreen },
  // other screens
}, {
  transitionConfig: () => {
    screenInterpolator: CardStackStyleInterpolator.forVertical,
    transitionSpec: {
      duration: 250,
      easing: Easing.bounce,
      timing: Animated.timing,
    },
  },
});

在安卓上运营时,暗中认可的跳转动漫效果是forFadeFromBottomAndroid,经过上述配置,CustomerNavigator 内的页面切换时,会利用forVertical效果。
transitionSpec内得以布置与动漫相关的质量。

经过传递参数决定某页面包车型地铁跳转动画

在二个StackNavigator内,可能某个页面供给用forHorizontal的跳转格局,另风姿洒脱部分急需用forVertical的跳转方式,以下是消除方案。

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
const TransitionConfiguration = () => ({
  screenInterpolator: (sceneProps) => {
    const { scene } = sceneProps;
    const { route } = scene;
    const params = route.params || {};
    const transition = params.transition || 'forHorizontal';
    return CardStackStyleInterpolator[transition](sceneProps);
  },
});

const CustomerNavigator = StackNavigator({
  ScreenKey: { screen: MyScreen },
  // other screens
}, {
  transitionConfig: TransitionConfiguration,
});

假定希望CustomerNavigator内的某些页面使用forVertical的跳转动漫效果,调用this.props.navigate('SomeScreenKey', { transition: 'forVertical' });切换页面就能够。

总结

正文均选择react-navigation自带的跳转动漫,因为那三种跳转格局能够满意广大意求,希望以后能放手更丰硕的职能。
react-navigation扶助自定义的跳转动画效果,获取sceneProps中的layout,position,scene属性,以至scene中的index属性,就会完成自定义动漫的开支。具体可以参照那篇作品的内容。假使想对其动漫原理有越来越深的刺探,能够学习那篇小说。

参谋资料

  1. React Native Navigation, custom Scene (Screen) Transitions and interpolations
  2. issue#1187--Add support for custom transitionConfig

原博文公布在私有博客,应接访谈!!

本文由今晚买四不像发布于关于计算机,转载请注明出处:页面之间的跳转效果

关键词:

上一篇:坚守脚本,深入研究VB
下一篇:没有了