两个view的翻转

最新推荐文章于 2021-05-25 16:09:30 发布

jesse881025

最新推荐文章于 2021-05-25 16:09:30 发布

阅读量802

点赞数

分类专栏： IOS

IOS 专栏收录该内容

144 篇文章

订阅专栏

原文：http://www.jianshu.com/p/2f7213ce1871

最终代码如下：

[UIViewtransitionFromView:self.userLvtoView:self.userLvProgressduration:0.6options:UIViewAnimationOptionTransitionFlipFromTop|UIViewAnimationOptionShowHideTransitionViews|UIViewAnimationOptionCurveEaseOutcompletion:^(BOOL finished) {



}];

正文：

  UIViewAnimationOptionLayoutSubviews            //提交动画的时候布局子控件，表示子控件将和父控件一同动画。

    UIViewAnimationOptionAllowUserInteraction      //动画时允许用户交流，比如触摸

    UIViewAnimationOptionBeginFromCurrentState     //从当前状态开始动画

    UIViewAnimationOptionRepeat                    //动画无限重复

    UIViewAnimationOptionAutoreverse               //执行动画回路,前提是设置动画无限重复

    UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间

    UIViewAnimationOptionOverrideInheritedCurve    //忽略外层动画嵌套的时间变化曲线

    UIViewAnimationOptionAllowAnimatedContent      //通过改变属性和重绘实现动画效果，如果key没有提交动画将使用快照

    UIViewAnimationOptionShowHideTransitionViews   //用显隐的方式替代添加移除图层的动画效果

    UIViewAnimationOptionOverrideInheritedOptions  //忽略嵌套继承的选项

//时间函数曲线相关

    UIViewAnimationOptionCurveEaseInOut            //时间曲线函数，由慢到快

    UIViewAnimationOptionCurveEaseIn               //时间曲线函数，由慢到特别快

    UIViewAnimationOptionCurveEaseOut              //时间曲线函数，由快到慢

    UIViewAnimationOptionCurveLinear               //时间曲线函数，匀速

//转场动画相关的

    UIViewAnimationOptionTransitionNone            //无转场动画

    UIViewAnimationOptionTransitionFlipFromLeft    //转场从左翻转

    UIViewAnimationOptionTransitionFlipFromRight   //转场从右翻转

    UIViewAnimationOptionTransitionCurlUp          //上卷转场

    UIViewAnimationOptionTransitionCurlDown        //下卷转场

    UIViewAnimationOptionTransitionCrossDissolve   //转场交叉消失

    UIViewAnimationOptionTransitionFlipFromTop     //转场从上翻转

    UIViewAnimationOptionTransitionFlipFromBottom  //转场从下翻转

　浅略理解，待友人的指正。

项目开发需要实现一个简单的效果，一个音乐专辑，需要实现定时反复3D旋转的效果，这个效果很简单，利用iOS自带的动画接口对应的Flip动画即可，效果如下：

开发的时候用Xib管理专辑两个子View，在使用UIView快速动画接口

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion;

和UIViewAnimationOptionTransitionFlipFromLeft搭配使用的时候出现第一个奇怪的问题：
动画执行之后在使用UIViewAnimationOptionTransitionFlipFromRight反转翻转效果出现的情况就是翻转一般View消失了，经过调试后发现，因为是使用Xib管理，所以Property声明是weak，就像这样：

@property (weak, nonatomic) IBOutlet UIView *coverContainer;

所以fromView对应的子视图被系统管理在动画执行之后就被释放掉了，导致动画反转两次之后正反两个View都消失了。

既然是被释放的问题，那好解决，声明的时候把weak改成strong不就好了，代码如下：

@property (strong, nonatomic) IBOutlet UIView *coverContainer;

紧接接着出现更踏马奇怪的问题：
这下视图是没有消失，有图服务端没有裁剪图片，获取到的封面图片尺寸很大，翻转两次之后封面图片把整个屏幕都占满了
原始效果：

实际效果：

这个问题首先第一考虑是不是因为UIView的快速动画接口导致UIImageView的ContentMode发生了改变，调试之后发现根本不是，所有能预想的结果都不符合预期，最后实在没办法只能出动神器Reveal，通过UI调试之后发现fromView和toView对应的视图和SuperView的约束被破坏了导致。

找到问题所在是约束的原因，看可以使用原生代码或者是使用Masonry等第三方库在执行动画之前重建约束都行。
不过这里无意中发现UIViewAnimationOptions枚举里有一个奇怪的选项叫UIViewAnimationOptionShowHideTransitionViews，感觉好像有得玩，果断把strong替换会weak试了一下：

UIViewAnimationOptions animationOptions = _front ? UIViewAnimationOptionTransitionFlipFromLeft : UIViewAnimationOptionTransitionFlipFromRight;
[UIView transitionFromView:(_front ? _coverContainer : _blurContainer)
                    toView:(_front ? _blurContainer : _coverContainer)
                  duration:1.0f
                   options:(animationOptions | UIViewAnimationOptionShowHideTransitionViews)
                completion:nil];