8
6

More than 5 years have passed since last update.

円形をキープするUIViewのアニメーションはアフィン変換を使うべし

Last updated at Posted at 2015-04-25

円形のUIViewを作る時はみなさんどうしているでしょうか?
基本的にはview.layer.cornerRadius = view.size.height/2;
としていると思います。
この場合、拡大縮小のアニメーションをviewのframeを変更させて行うと、サイズに応じてcornerRadiusの値が高さの半分にならない為アニメーション中は角丸の四角になってしまいます。

円形をキープしつつ拡大縮小を行うにはアフィン変換を使ってアニメーションさせます。

CirleView.m

    //中心をとっておきます
    CGPoint center = self.center;
    //アニメーション後のサイズにviewを設定します
    self.frame = CGRectMake(0, 0, size.width, size.height);
    //中心をあわせます
    self.center = center;
    //この時点で円形にします
    self.layer.cornerRadius = size.width/2;
    self.layer.masksToBounds = true;
    //アフィン変換を使って大きさを0%にします
    self.transform = CGAffineTransformMakeScale(0, 0);

    [UIView animateWithDuration:0.5 animations:^{
        //中心を合わせながら元の大きさにアフィン変換を戻していきます
        self.center = center;
        self.transform = CGAffineTransformIdentity;
    }];

アフィン変換することで、viewの形を維持しながら変形出来ます。

またアニメーション時はcenterを上手に使う事で無駄な計算を省く事ができますよ!
一度大きさを指定してから0%にするのが気持ち悪い人はhiddenプロパティで囲む等の対応をしてもいいかも

8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
6