3

Facebook Paper アプリでこのアニメーション/モーフィングを見ました。メニューをプルダウンするとメニュー ボタンが X になり、タップすると元に戻ります。他の方法で表示する方法がわからないので、記録しました。

https://www.youtube.com/watch?v=y6j_mVgv-NM

誰かがこれがどのように行われるかを説明できますか? 私は自分のアプリにこれが欲しいです。

4

1 に答える 1

8

それはすごかった、前にそれを見たことがなかった。

それを行う簡単な要点を作成しました：

https://gist.github.com/mnmares/9458421

編集：それは単なるリンクではなく、重要な概念は2つの方法です：

-(void)morphToX
{
    CGFloat angle = M_PI_4;
    CGPoint center = CGPointMake(120., 120.);

    __weak TUIViewController *weakSelf = self;
    [UIView animateWithDuration:0.8 delay:0.0 usingSpringWithDamping:0.6 initialSpringVelocity:2.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        TUIViewController *strongSelf = weakSelf;

        strongSelf.topLineView.transform = CGAffineTransformMakeRotation(-angle*5);
        strongSelf.topLineView.center = center;

        strongSelf.bottomLineView.transform = CGAffineTransformMakeRotation(angle*5);
        strongSelf.bottomLineView.center = center;

        strongSelf.centerLineView.transform = CGAffineTransformMakeScale(0., 1.0);

    } completion:^(BOOL finished) {

    }];
}

と：

-(void)morphToLine
{

    __weak TUIViewController *weakSelf = self;
    [UIView animateWithDuration:0.8 delay:0.0 usingSpringWithDamping:0.6 initialSpringVelocity:2.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        TUIViewController *strongSelf = weakSelf;

        strongSelf.topLineView.transform = CGAffineTransformIdentity;
        strongSelf.topLineView.center = CGPointMake(120., 2.);

        strongSelf.bottomLineView.transform = CGAffineTransformIdentity;
        strongSelf.bottomLineView.center = CGPointMake(120., 238.);

        strongSelf.centerLineView.transform = CGAffineTransformIdentity;

    } completion:^(BOOL finished) {

    }];
}

1 つ目は平行線から X にアニメーション化され、2 つ目は X から線にアニメーション化されます。アニメーションの数とオプションをいじってみると、さまざまな遊びの感覚が得られるはずです。

楽しむ！

于 2014-03-10T02:17:28.123 に答える