硬币翻转动画效果

最新推荐文章于 2022-04-30 17:21:45 发布

原创最新推荐文章于 2022-04-30 17:21:45 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

iOS 动画专栏收录该内容

16 篇文章

订阅专栏

这篇博客展示了如何实现一个逼真的硬币翻转动画效果，通过示例代码和最终的动画展示，详细介绍了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

示例

UIImageView *firstImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"profile.png"]];
UIImageView *secondImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"second.jpg"]];
    
CMSCoinView *coinView = [[CMSCoinView alloc] initWithFrame:CGRectMake(50.0, 50.0, 120.0, 120.0) view:self.view primaryView:firstImageView secondaryView:secondImageView];
coinView.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.3];

实现类文件

// .h文件
#import <UIKit/UIKit.h>

@interface CMSCoinView : UIView

- (id)initWithFrame:(CGRect)frame view:(UIView *)superview primaryView:(UIView *)primaryView secondaryView:(UIView *)secondaryView;

@property (nonatomic, strong) UIView *primaryView;
@property (nonatomic, strong) UIView *secondaryView;
@property (nonatomic, assign) float spinTime;

@end

// .m文件
#import "CMSCoinView.h"
#import <QuartzCore/QuartzCore.h>

@interface CMSCoinView ()
{
    bool displayingPrimary;
}

@end

@implementation CMSCoinView

// 初始化
- (id)initWithFrame:(CGRect)frame view:(UIView *)superview primaryView:(UIView *)primaryView secondaryView:(UIView *)secondaryView
{
    self = [super init];
    if (self)
    {
        self.frame = frame;
        
        if (superview)
        {
            [superview addSubview:self];
        }
        
        // Initialization code
        self.primaryView = primaryView;
        self.secondaryView = secondaryView;
        
        displayingPrimary = YES;
        self.spinTime = 1.0;
    }
    return self;
}

#pragma mark - set方法

- (void)setPrimaryView:(UIView *)primaryView
{
    _primaryView = primaryView;
    
    CGRect frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
    self.primaryView.frame = frame;
    [self roundView: self.primaryView];
    self.primaryView.userInteractionEnabled = YES;
    [self addSubview: self.primaryView];
    
    UITapGestureRecognizer *gesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(flipTouched:)];
    gesture.numberOfTapsRequired = 1;
    [self.primaryView addGestureRecognizer:gesture];
    [self roundView:self];
}

- (void)setSecondaryView:(UIView *)secondaryView
{
    _secondaryView = secondaryView;
    CGRect frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
    self.secondaryView.frame = frame;
    [self roundView: self.secondaryView];
    self.secondaryView.userInteractionEnabled = YES;
    [self addSubview: self.secondaryView];
    [self sendSubviewToBack:self.secondaryView];
    
    UITapGestureRecognizer *gesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(flipTouched:)];
    gesture.numberOfTapsRequired = 1;
    [self.secondaryView addGestureRecognizer:gesture];
    [self roundView:self];
}

- (void)setSpinTime:(float)spinTime
{
    _spinTime = spinTime;
}

#pragma mark - 视图属性设置

- (void)roundView:(UIView *)view
{
    view.layer.cornerRadius = (self.frame.size.height / 2);
    view.layer.masksToBounds = YES;
}

#pragma mark - 响应方法
- (void)flipTouched:(UITapGestureRecognizer *)sender
{
    UIView *fromView = (displayingPrimary ? self.primaryView : self.secondaryView);
    UIView *toView = (displayingPrimary ? self.secondaryView : self.primaryView);
    UIViewAnimationOptions options = (displayingPrimary ? UIViewAnimationOptionTransitionFlipFromLeft : UIViewAnimationOptionTransitionFlipFromRight) + UIViewAnimationOptionCurveEaseInOut;
    
    [UIView transitionFromView:fromView
                        toView:toView
                      duration:self.spinTime
                       options:options
                    completion:^(BOOL finished) {
                        if (finished)
                        {
                            displayingPrimary = !displayingPrimary;
                        }
                    }
     ];
}

@end