Just a Computer Graphics Studio & My Life

[iOS] 旋轉影像 (Rotate Image)

原來塔羅牌有分正位逆位,想給使用者做翻牌的動作,希望讓塔羅牌可以以動畫的方式旋轉180度。

其實看完程式碼,就會發覺可以很簡單地來完成旋轉影像這件事!以後做遊戲的時候可以直接取用:)

-(void)imageTransform
{
    [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionCurveLinear animations:^{
        if (self.orientation == YES) {
            self.cardImage.transform = CGAffineTransformMakeRotation(M_PI);
        }
        else {
            self.cardImage.transform = CGAffineTransformMakeRotation(0);
        }
        self.orientation = -self.orientation;
    } completion:^(BOOL finished) {
        if (finished) {

        }
    }
    ];
}

以上程式碼描述以block的方式來展現動畫,可以設定動畫時間、延遲時間甚至其它選擇參數。options參數有很多,未來可以陸續嘗試其效果:

typedef NS_OPTIONS(NSUInteger, UIViewAnimationOptions) {
UIViewAnimationOptionLayoutSubviews            = 1 <<  0,
UIViewAnimationOptionAllowUserInteraction      = 1 <<  1, // turn on user interaction while animating
UIViewAnimationOptionBeginFromCurrentState     = 1 <<  2, // start all views from current value, not initial value
UIViewAnimationOptionRepeat                    = 1 <<  3, // repeat animation indefinitely
UIViewAnimationOptionAutoreverse               = 1 <<  4, // if repeat, run animation back and forth
UIViewAnimationOptionOverrideInheritedDuration = 1 <<  5, // ignore nested duration
UIViewAnimationOptionOverrideInheritedCurve    = 1 <<  6, // ignore nested curve
UIViewAnimationOptionAllowAnimatedContent      = 1 <<  7, // animate contents (applies to transitions only)
UIViewAnimationOptionShowHideTransitionViews   = 1 <<  8, // flip to/from hidden state instead of adding/removing
UIViewAnimationOptionCurveEaseInOut            = 0 << 16, // default
UIViewAnimationOptionCurveEaseIn               = 1 << 16,
UIViewAnimationOptionCurveEaseOut              = 2 << 16,
UIViewAnimationOptionCurveLinear               = 3 << 16,
UIViewAnimationOptionTransitionNone            = 0 << 20, // default
UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,
UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,
UIViewAnimationOptionTransitionCurlUp          = 3 << 20,
UIViewAnimationOptionTransitionCurlDown        = 4 << 20,
UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,
UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,
UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20,
} NS_ENUM_AVAILABLE_IOS(4_0);

因為翻牌可以是正位或是逆位,所以想給使用者兩種模式,於是宣告BOOL型態的orientation變數,讓動畫可以很順暢地來回翻轉。

如何翻轉圖片?只要操作imageview的transform即可做到,之前不小心把button當做imageview,還好它也有transform。

為什麼丟M_PI就可以旋轉180度?那我想旋轉90度怎麼做?就丟M_PI_2。它們是這樣被定義:

#define M_PI        3.14159265358979323846264338327950288   /* pi             */
#define M_PI_2      1.57079632679489661923132169163975144   /* pi/2           */
#define M_PI_4      0.785398163397448309615660845819875721  /* pi/4           */

剛研究source code怎麼在部落格上顯示,原來可以做到特定行highlight呀~

參考:iOS Flip UIImageView 180 degree (not animated)、老闆的夥伴。

Advertisements

Comments on: "[iOS] 旋轉影像 (Rotate Image)" (1)

  1. […] 首頁想要跑最新消息的訊息,可以怎麼做呢?前不久旋轉影像的動畫有提到一個方法,在這裡可以直接拿來修改~ […]

    喜歡

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: