仿window阿里旺旺登陸界面,打印機吐紙動畫效果---轉自Bison的技術博客

偶然的機會發現window的阿里旺旺的登陸效果蠻有意思的,于是就模仿著做了一下打印機吐紙的動畫效果

看起來很神奇的東西,實現起來卻不難,下面我給大家看下主要的源碼。


- (void)createUI{
    UIImageView *backimageView=[[UIImageView alloc]init];
    backimageView.image =[UIImage imageNamed:@"1.png"];
    backimageView.frame = CGRectMake(50, 100, LBSCREEN_WIDTH-100, 30);
    [self.view addSubview:backimageView];
    backView = [[UIView alloc]initWithFrame:CGRectMake(60, 115, LBSCREEN_WIDTH-120, 0)];
    backView.layer.cornerRadius = 5;
    backView.backgroundColor = [UIColor whiteColor];
    backView.layer.borderWidth = 1;
    backView.layer.borderColor = [UIColor blackColor].CGColor;
    backView.clipsToBounds = YES;
    [self.view addSubview:backView];
    login_btn = [UIButton buttonWithType:UIButtonTypeCustom];
    login_btn.frame = CGRectMake(10, 120, LBSCREEN_WIDTH-140, 35);
    [login_btn setTitle:@"登陸" forState:UIControlStateNormal];
    login_btn.backgroundColor = [UIColor lightGrayColor];
    login_btn.layer.cornerRadius = 5;
    login_btn.layer.borderWidth = 1;
    login_btn.layer.borderColor = [UIColor lightGrayColor].CGColor;
    [login_btn addTarget:self action:@selector(passwordClick:) forControlEvents:UIControlEventTouchUpInside];
    login_btn.clipsToBounds = YES;
    pass_btn = [UIButton buttonWithType:UIButtonTypeCustom];
    pass_btn.frame = CGRectMake(10, 165, LBSCREEN_WIDTH-140, 35);
    [pass_btn setTitle:@"注冊" forState:UIControlStateNormal];
    pass_btn.backgroundColor = [UIColor redColor];
    [pass_btn addTarget:self action:@selector(passwordClick:) forControlEvents:UIControlEventTouchUpInside];
    pass_btn.layer.cornerRadius = 5;
    pass_btn.layer.borderWidth = 1;
    pass_btn.layer.borderColor = [UIColor lightGrayColor].CGColor;
    pass_btn.clipsToBounds = YES;
    Name_textfield = [[UITextField alloc]initWithFrame:CGRectMake(10, 20, LBSCREEN_WIDTH-140, 40)];
    Name_textfield.placeholder = @"帳號";
    Name_textfield.borderStyle = UITextBorderStyleRoundedRect;
    Pass_textfield = [[UITextField alloc]initWithFrame:CGRectMake(10, 70, LBSCREEN_WIDTH-140, 40)];
    Pass_textfield.borderStyle = UITextBorderStyleRoundedRect;
    Pass_textfield.placeholder = @"密碼";
    //2秒后開始一個持續一分鐘的動畫
    [UIView animateWithDuration:1 delay:2 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
        backView.frame=CGRectMake(60, 115, LBSCREEN_WIDTH-120, 210);
    } completion:^(BOOL finished) {
    
        [backView addSubview:Name_textfield];
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [backView addSubview:Pass_textfield];
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                [backView addSubview:login_btn];
                dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                    [backView addSubview:pass_btn];
                });
            });
        });

    }];

}

- (void)passwordClick:(UIButton *)sender{
    NSLog(@"hhhhh....");
}



不難看懂吧?主要就用到了一個改變frame的動畫,x軸和y軸以及寬不變,改變它的高

下面曬下效果圖

(http://allluckly.cn)
(http://allluckly.cn)

哦,差點忘記把源碼下載的地址給忘了,在此補上

下載地址---來戳我

推薦一款學習iOS開發的app_____|______| | 傳送門

更多經驗請點擊

好文推薦:Biosn收集的Git常見的錯誤解決方式

原文地址:http://allluckly.cn
技術交流群:534926022(免費) 511040024(0.8/人付費)
版權歸?Bison所有 如需轉載請保留原文超鏈接地址!否則后果自負!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,333評論 25 708
  • 兩類異常 Java中的異常繼承體系為: 這里的異常( Exception)分為兩大類:Checked異常和Runt...
    tobe_superman閱讀 656評論 0 0
  • 一直以來,我都堅信功夫不負有心人。雖然還未入帖,但還是進步不少。 工作兩年了,有一年半的時間荒廢了,未練習書。最近...
    冰釋主人閱讀 251評論 8 11