• 日本語
  • English
  • 中文
MENU
CREATE A PLATFORM FOR DIVERSITY
Web, Game, App, Illustration
https://monstar-lab.com/
Swift
2014/09/11
Objective-Cで実装したものをSwiftで書き換えてみた

iOSエンジニアの石山です。
 
Appleから新しい言語「Swift」が発表されたとき、「とにかく触ってみたい!」が先行し、ドキュメントは二の次で、以前Objective-CでかいたアニメーションをそのままそっくりSwiftで書いてみることにしました。
 
アニメーションは、ボタンを押すと円が飛び出すというもの。これを参考に実装してみました。
Plus Button Animation
 
実際には円も描画したのですが、今回は円が飛び出すアニメーション部分のコードについて、Objective-CとSwiftで比較してみます。
 

Objective-C

(void)circleButtonTopped:(UIButton *)button
{
    if (_isOpen)
    {
        _originalCircle.transform = CGAffineTransformMakeRotation(0);
        [UIView animateWithDuration:0.15 animations:^{
            _originalCircle.transform = CGAffineTransformMakeRotation(2*M_PI*45/360.0-0.000001);
        }];


        [UIView animateWithDuration:0.5
                              delay:0
             usingSpringWithDamping:0.3
              initialSpringVelocity:0
                            options:UIViewAnimationOptionCurveEaseIn
                         animations:^{
                             _circle.layer.position = CGPointMake(_circle.frame.origin.x + 45, _circle.frame.origin.y - 45);
                             _circle2.layer.position = CGPointMake(_circle2.frame.origin.x + 45, _circle2.frame.origin.y - 135);
                         } completion:^(BOOL finish){
                             _circle.frame = CGRectMake(_circle.frame.origin.x, _circle.frame.origin.y, _circle.frame.size.width, _circle.frame.size.height);
                             _circle2.frame = CGRectMake(_circle2.frame.origin.x, _circle2.frame.origin.y, _circle2.frame.size.width, _circle2.frame.size.height);
                         }];

        _isOpen = NO;
    }
    else
    {
        [UIView animateWithDuration:0.2 animations:^{
            _originalCircle.transform = CGAffineTransformMakeRotation(0);
            _circle.center = CGPointMake(_circle.frame.origin.x + 45, _circle.frame.origin.y + 135);
            _circle2.center = CGPointMake(_circle2.frame.origin.x + 45, _circle2.frame.origin.y + 225);
        }];
        _isOpen = YES;
    }
}

Swift

func circleButtonTopped(sender:UIButton)
{
    if _isOpen!
    {
        _originalCircle!.transform = CGAffineTransformMakeRotation(0)
        UIView.animateWithDuration(0.5, delay:0.3, usingSpringWithDamping:0.3, initialSpringVelocity:0, options:UIViewAnimationOptions.CurveEaseIn, animations: {() -> Void in
            self._originalCircle!.transform = CGAffineTransformMakeRotation(2*M_PI*45/360.0-0.00001)
            self._circle!.layer.position = CGPointMake(self._circle!.frame.origin.x + 45, self._circle!.frame.origin.y - 45);
            self._circle2!.layer.position = CGPointMake(self._circle2!.frame.origin.x + 45, self._circle2!.frame.origin.y - 135);
        }, completion: {(Bool) -> Void in
            self._circle!.frame = CGRectMake(self._circle!.frame.origin.x, self._circle!.frame.origin.y, self._circle!.frame.size.width, self._circle!.frame.size.height)
            self._circle2!.frame = CGRectMake(self._circle2!.frame.origin.x, self._circle2!.frame.origin.y, self._circle2!.frame.size.width, self._circle2!.frame.size.height)
        });
        _isOpen = false
    }
    else
    {
        UIView.animateWithDuration(0.2, animations: {() -> Void in
            self._originalCircle!.transform = CGAffineTransformMakeRotation(0);
            self._circle!.center = CGPointMake(self._circle!.frame.origin.x + 45, self._circle!.frame.origin.y + 135)
            self._circle2!.center = CGPointMake(self._circle2!.frame.origin.x + 45, self._circle2!.frame.origin.y + 225)
        });
        _isOpen = true
    }
}

 
バネのようなうごきの部分のアニメーションを抜き出すと下のようになります。

Objective-C

[UIView animateWithDuration:0.5 //アニメーション速度
                      delay:0  //遅延時間
     usingSpringWithDamping:0.3 //どのくらい振動させるか(1にすると振動しない)
      initialSpringVelocity:0   //初速
                    options:UIViewAnimationOptionCurveEaseIn
       animations:^{
          //ここに処理を書く
       } completion:^(BOOL finish){
           //ここに処理を書く
       }];

Swift

UIView.animateWithDuration(0.5, delay:0.3, usingSpringWithDamping:0.3, initialSpringVelocity:0, options:UIViewAnimationOptions.CurveEaseIn, animations: {() -> Void in
            //ここに処理を書く
        }, completion: {(Bool) -> Void in
            //ここに処理を書く
        });

 
処理部分では円の中心を移動しています。(飛び出す方)

Objective-C

_circle.layer.position = CGPointMake(_circle.frame.origin.x + 45, _circle.frame.origin.y - 45);
_circle2.layer.position = CGPointMake(_circle2.frame.origin.x + 45, _circle2.frame.origin.y - 135);

Swift

self._circle!.layer.position = CGPointMake(self._circle!.frame.origin.x + 45, self._circle!.frame.origin.y - 45);
self._circle2!.layer.position = CGPointMake(self._circle2!.frame.origin.x + 45, self._circle2!.frame.origin.y - 135);

あとは、Bool値で状態を判断し、アニメーションを切り替えることで、円が飛び出したり、引っ込んだりするアニメーションの完成となります。

おわりに

書き方に多少の違いはあれど、全然理解できない!という感じではなく、すくなくともObjective-Cをやっている人にとっては取っ付きやすいのではないのかなぁと感じました。ただ、感覚で突き進めるのはここまで。
やっぱりちゃんとしたものを作りたいのなら、ドキュメントは読まないとだめですね…。
 
Swift、結構楽しいですよ!これを読んで興味がわいた方は是非触ってみてください!
それでは、すてきなSwiftライフをー!!

Archives