动画特效四：精致登陆

标签：动画   core animation高级   core animation   animation   

传统的登陆界面只是一个静态的UI，让用户输入用户名及密码就可以了。但为了增加用户体验，我们可以为登陆界面适当的添加动画效果。示例的静态登陆界面如下：

添加动画后的效果如下：

一、动画效果分析：

1. title和两个文本框是从屏幕左侧推进过来的，并且有层次感。

2. 登陆按钮是从下面推上来的，并且具有弹簧效果。

3. 背景中的云朵是一直在漂浮移动的，并且当云朵离开了屏幕右侧，会立刻从屏幕左侧再次进入界面。

二、思路及代码

首先来分析第一点，要让title和两个文本框推进过来，默认情况下，应该使得他们的位置在屏幕之外，如下图所示

即上面的元素的CenterX = CenterX - 屏幕宽度，以title为例，在viewWillAppear中写入代码：

self.heading.centerX -= self.view.width;

然后在viewDidAppear中执行动画操作，思路其实很简单，就是将username的x值再还原。代码如下：

 [UIView animateWithDuration:0.5 animations:^{
        self.heading.centerX += self.view.width;
    }];

[UIView animateWithDuration:0.5 delay:0.3 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        self.username.centerX += self.view.width;
    } completion:nil];

viewWillAppear中得代码：

self.loginButton.alpha = 0;
    self.loginButton.centerY += 30;
    self.loginButton.layer.cornerRadius = 5;

 [UIView animateWithDuration:0.5 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:UIViewAnimationOptionCurveLinear animations:^{
        self.loginButton.centerY -= 30;
        self.loginButton.alpha = 1.0;
    } completion:nil];

@property (strong, nonatomic) IBOutletCollection(UIImageView) NSArray *clouds;

云朵漂移时间计算(假设跨过整个屏幕需要的时间为60s)：

1. 云朵需要漂移的距离应该是屏幕总宽度减去云朵的x值：self.view.width - cloud.x

2. 各个云朵漂移所需要的时间应该为 (self.view.width - cloud.x) / self.view.width * 60

II)  怎样达到无限漂移的效果？

应该是当云朵一离开屏幕右侧，即动画完成的时候，立刻再次调用动画。 

说的也许有点晦涩了，立刻上代码：

// 云朵循环飘过
- (void)animateCloud:(UIImageView *)cloud {
    CGFloat flyDuration = (self.view.width - cloud.x) / self.view.width * 60;
    [UIView animateWithDuration:flyDuration delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{
        cloud.x = self.view.width;
    } completion:^(BOOL finished) {
        cloud.x = - cloud.width;
        [self animateCloud:cloud];
    }];
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    
    // move them(heading,username,password) off of the screen just before your view controller makes an appearance
    self.heading.centerX -= self.view.width;
    self.username.centerX -= self.view.width;
    self.password.centerX -= self.view.width;
    
    // 登陆按钮默认不显示
    self.loginButton.alpha = 0;
    self.loginButton.centerY += 30;
    self.loginButton.layer.cornerRadius = 5;
}

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    
    // animate label，textfield(进入视野；加延时操作，显得更有层次感)
    [UIView animateWithDuration:0.5 animations:^{
        self.heading.centerX += self.view.width;
    }];
    [UIView animateWithDuration:0.5 delay:0.3 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        self.username.centerX += self.view.width;
    } completion:nil];
    
    [UIView animateWithDuration:0.5 delay:0.4 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        self.password.centerX += self.view.width;
    } completion:nil];
    
    // animate login button (弹簧效果)
    [UIView animateWithDuration:0.5 delay:0.5 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:UIViewAnimationOptionCurveLinear animations:^{
        self.loginButton.centerY -= 30;
        self.loginButton.alpha = 1.0;
    } completion:nil];
    
    //animateCloud(self.clouds[0]);
    for (UIImageView *cloud in self.clouds) {
         [self animateCloud:cloud];
    }
}

// 云朵循环飘过
- (void)animateCloud:(UIImageView *)cloud {
    CGFloat flyDuration = (self.view.width - cloud.x) / self.view.width * 60;
    [UIView animateWithDuration:flyDuration delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{
        cloud.x = self.view.width;
    } completion:^(BOOL finished) {
        cloud.x = - cloud.width;
        [self animateCloud:cloud];
    }];
}

动画特效四：精致登陆

标签：动画   core animation高级   core animation   animation   

原文地址：http://blog.csdn.net/sinat_27706697/article/details/46939353