*

NewsPicksのPick風アニメーションの作り方

      2014/07/28

MS251_memotonewsp500
前回の続きで、NewsPicksのPick風アニメーションの作り方のご紹介です。

NewsPicksとはニュースキュレーションアプリの一つで、私が最近すごくはまっているサービスです。

ユーザーはニュース記事をPickして(お気に入り登録のようなもの)、自分でコメントを書いてシェアすることができます。

そして、このサービスでは記事をPickした時にロゴがフワッと浮かび上がるアニメーションが用いられています。

私はこのアニメーションが結構気に入っていて、自分のアプリにも取り入れようと思い、見よう見まねで作りました。

pick風アニメーションを作る

    //浮かび上がるイメージ
    UIImageView *testImage = [[UIImageView alloc]init];
    testImage.frame = CGRectMake(110, 150, 100, 100);
    testImage.image = [UIImage imageNamed:@"testImage.png"];
    testImage.contentMode = UIViewContentModeScaleAspectFit;
    
    [self.view addSubview:testImage];
    
    
    /* 拡大 */
    
    // 拡大を設定
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    
    // アニメーションのオプションを設定
    animation.duration = 0.5; // アニメーション速度
    animation.repeatCount = 1; // 繰り返し回数
    animation.autoreverses = NO; // アニメーション終了時に逆アニメーション
    
    // 拡大倍率を設定
    animation.fromValue = [NSNumber numberWithFloat:0.0]; // 開始時の倍率
    animation.toValue = [NSNumber numberWithFloat:3.0]; // 終了時の倍率
    
    /* フェードアウト */

    // 透過度を設定
    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"opacity"];
    
    // アニメーションのオプションを設定
    animation2.duration = 0.5; // アニメーション速度
    animation2.repeatCount = 1; // 繰り返し回数
    animation2.autoreverses = NO; // アニメーション終了時に逆アニメーション
    
    // 透過度を設定
    animation2.fromValue = [NSNumber numberWithFloat:1.0]; // 開始時の倍率
    animation2.toValue = [NSNumber numberWithFloat:0.0]; // 終了時の倍率
    

    /* アニメーショングループ */
    CAAnimationGroup *group = [CAAnimationGroup animation];
    
    // アニメーションのオプションを設定
    group.duration = 0.5;
    group.repeatCount = 1;
    
    // アニメーションを追加
    group.animations = [NSArray arrayWithObjects:animation, animation2, nil];
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    group.delegate = self;
    
    // アニメーションを追加
    [testImage.layer addAnimation:group forKey:@"move-layer"];


まず、浮かび上がらせるロゴを用意します。

その後、CABasicAnimation animationWithKeyPath:@”transform.scale” で、等倍から3倍に拡大させるアニメーションを作ります。

そして、今度はCABasicAnimation animationWithKeyPath:@”opacity”で、透過度を下げるアニメーションを設定し、フェードアウトの効果を作ります。

最後は、CAAnimationGroup で、二つのアニメーションを統合させれば出来上がりです。

最後に

やってみると意外と簡単にできるものなんですよね。

もし動きに違和感があれば、数値を変えて、自分好みのアニメーションにしてみるといいでしょう。

 - objective-c, Xcode, アプリ