iOS - 視圖抖動(dòng)效果

實(shí)現(xiàn)視圖抖動(dòng)效果的思路

一精续、首先,如何讓視圖發(fā)生位移

UIView中定義了transform屬性箍铲,其類型為CGAffineTransform拨齐,默認(rèn)是CGAffineTransformIdentity
transform 改變位置/尺寸/旋轉(zhuǎn)角度,且是在原有transform的基礎(chǔ)上改變
①創(chuàng)建“基于控件初始位置”的形變

  CGAffineTransformMakeTranslation(平移)
  CGAffineTransformMakeScale(縮放)
  CGAffineTransformMakeRotation(旋轉(zhuǎn))

②創(chuàng)建“基于transform參數(shù)”的形變

  CGAffineTransformTranslate
  CGAffineTransformScale
  CGAffineTransformRotate

補(bǔ)充:
在OC中盛嘿,所有跟角度相關(guān)的數(shù)值洛巢,都是弧度值,180° = M_PI
正數(shù)表示順時(shí)針旋轉(zhuǎn)
負(fù)數(shù)表示逆時(shí)針旋轉(zhuǎn)

二次兆、如何讓視圖的位移形成反復(fù)動(dòng)畫(huà)

在UIViewAnimationWithBlocks中提供了一系列的視圖動(dòng)畫(huà)
我們最常用的也就是下面三種:

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0, completion = NULL

其中UIViewAnimationOptions枚舉值如下:

typedef NS_OPTIONS(NSUInteger, UIViewAnimationOptions) {
    UIViewAnimationOptionLayoutSubviews            = 1 <<  0, // 提交動(dòng)畫(huà)的時(shí)候布局子控件稿茉,表示子控件將和父控件一同動(dòng)畫(huà)
    UIViewAnimationOptionAllowUserInteraction      = 1 <<  1, // 動(dòng)畫(huà)時(shí)允許用戶交互
    UIViewAnimationOptionBeginFromCurrentState     = 1 <<  2, // 從當(dāng)前狀態(tài)開(kāi)始動(dòng)畫(huà),而不是初始狀態(tài)
    UIViewAnimationOptionRepeat                    = 1 <<  3, // 動(dòng)畫(huà)無(wú)限重復(fù)
    UIViewAnimationOptionAutoreverse               = 1 <<  4, // 在動(dòng)畫(huà)可以重復(fù)的前提下芥炭,可執(zhí)行動(dòng)畫(huà)回路
    UIViewAnimationOptionOverrideInheritedDuration = 1 <<  5, // 忽略外層動(dòng)畫(huà)嵌套的執(zhí)行時(shí)間
    UIViewAnimationOptionOverrideInheritedCurve    = 1 <<  6, // 忽略外層動(dòng)畫(huà)嵌套的時(shí)間變化曲線
    UIViewAnimationOptionAllowAnimatedContent      = 1 <<  7, // animate contents (applies to transitions only)
    UIViewAnimationOptionShowHideTransitionViews   = 1 <<  8, // 用顯隱的方式替代添加移除圖層的動(dòng)畫(huà)效果
    UIViewAnimationOptionOverrideInheritedOptions  = 1 <<  9, // 忽略嵌套繼承的選項(xiàng)
    
    ///時(shí)間函數(shù)曲線相關(guān)
    UIViewAnimationOptionCurveEaseInOut            = 0 << 16, // 時(shí)間曲線函數(shù)漓库,由慢到快 default
    UIViewAnimationOptionCurveEaseIn               = 1 << 16, // 時(shí)間曲線函數(shù),由慢到特別快
    UIViewAnimationOptionCurveEaseOut              = 2 << 16, //時(shí)間曲線函數(shù)园蝠,由快到慢
    UIViewAnimationOptionCurveLinear               = 3 << 16, //時(shí)間曲線函數(shù)渺蒿,勻速
    
    ///轉(zhuǎn)場(chǎng)動(dòng)畫(huà)相關(guān)的
    UIViewAnimationOptionTransitionNone            = 0 << 20, //無(wú)轉(zhuǎn)場(chǎng)動(dòng)畫(huà) default
    UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20, //轉(zhuǎn)場(chǎng)從左翻轉(zhuǎn)
    UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20, //轉(zhuǎn)場(chǎng)從右翻轉(zhuǎn)
    UIViewAnimationOptionTransitionCurlUp          = 3 << 20, //上卷轉(zhuǎn)場(chǎng)
    UIViewAnimationOptionTransitionCurlDown        = 4 << 20, //下卷轉(zhuǎn)場(chǎng)
    UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20, //轉(zhuǎn)場(chǎng)交叉消失
    UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20, //轉(zhuǎn)場(chǎng)從上翻轉(zhuǎn)
    UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20, //轉(zhuǎn)場(chǎng)從下翻轉(zhuǎn)

    UIViewAnimationOptionPreferredFramesPerSecondDefault     = 0 << 24,
    UIViewAnimationOptionPreferredFramesPerSecond60          = 3 << 24,
    UIViewAnimationOptionPreferredFramesPerSecond30          = 7 << 24,
    
} NS_ENUM_AVAILABLE_IOS(4_0);

補(bǔ)充:關(guān)于最后一組轉(zhuǎn)場(chǎng)動(dòng)畫(huà)它一般是用在這個(gè)方法中的:

    [UIView transitionFromView: toView: duration: options: completion:^(BOOL finished) {}];

三、基礎(chǔ)了解完畢彪薛,上代碼

+ (void)shakeView:(UIView*)viewToShake {
    // 偏移值
    CGFloat t = 3.0;
    // 左搖
    CGAffineTransform translateLeft =CGAffineTransformTranslate(CGAffineTransformIdentity,-t,0.0);
    // 右晃
    CGAffineTransform translateRight  =CGAffineTransformTranslate(CGAffineTransformIdentity, t,0.0);
    // 執(zhí)行動(dòng)畫(huà) 重復(fù)動(dòng)畫(huà)且執(zhí)行動(dòng)畫(huà)回路
    viewToShake.transform = translateLeft;
    [UIView animateWithDuration:0.07 delay:0.0 options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat animations:^{
        // 設(shè)置重復(fù)次數(shù) repeatCount為float
        [UIView setAnimationRepeatCount:2.0];
        viewToShake.transform = translateRight;
        
    } completion:^(BOOL finished){
        if(finished){
            // 從視圖當(dāng)前狀態(tài)回到初始狀態(tài)
            [UIView animateWithDuration:0.05 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
                viewToShake.transform =CGAffineTransformIdentity;
            } completion:NULL];
        }
    }];
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末茂装,一起剝皮案震驚了整個(gè)濱河市怠蹂,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌少态,老刑警劉巖城侧,帶你破解...
    沈念sama閱讀 222,464評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異彼妻,居然都是意外死亡嫌佑,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門澳骤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)歧强,“玉大人,你說(shuō)我怎么就攤上這事为肮√幔” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,078評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵颊艳,是天一觀的道長(zhǎng)茅特。 經(jīng)常有香客問(wèn)我,道長(zhǎng)棋枕,這世上最難降的妖魔是什么白修? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,979評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮重斑,結(jié)果婚禮上兵睛,老公的妹妹穿的比我還像新娘。我一直安慰自己窥浪,他們只是感情好祖很,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,001評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著漾脂,像睡著了一般假颇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上骨稿,一...
    開(kāi)封第一講書(shū)人閱讀 52,584評(píng)論 1 312
  • 那天笨鸡,我揣著相機(jī)與錄音,去河邊找鬼坦冠。 笑死形耗,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的辙浑。 我是一名探鬼主播激涤,決...
    沈念sama閱讀 41,085評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼例衍!你這毒婦竟也來(lái)了昔期?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,023評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤佛玄,失蹤者是張志新(化名)和其女友劉穎硼一,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體梦抢,經(jīng)...
    沈念sama閱讀 46,555評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡般贼,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,626評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了奥吩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哼蛆。...
    茶點(diǎn)故事閱讀 40,769評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖霞赫,靈堂內(nèi)的尸體忽然破棺而出腮介,到底是詐尸還是另有隱情,我是刑警寧澤端衰,帶...
    沈念sama閱讀 36,439評(píng)論 5 351
  • 正文 年R本政府宣布叠洗,位于F島的核電站,受9級(jí)特大地震影響旅东,放射性物質(zhì)發(fā)生泄漏灭抑。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,115評(píng)論 3 335
  • 文/蒙蒙 一抵代、第九天 我趴在偏房一處隱蔽的房頂上張望腾节。 院中可真熱鬧,春花似錦荤牍、人聲如沸案腺。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,601評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)救湖。三九已至,卻和暖如春涎才,著一層夾襖步出監(jiān)牢的瞬間鞋既,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,702評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工耍铜, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留邑闺,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,191評(píng)論 3 378
  • 正文 我出身青樓棕兼,卻偏偏與公主長(zhǎng)得像陡舅,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子伴挚,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,781評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果靶衍,實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜灾炭,今天將帶大家一窺ios動(dòng)畫(huà)全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,515評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果颅眶,實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜蜈出,今天將帶大家一窺iOS動(dòng)畫(huà)全貌。在這里你可以看...
    F麥子閱讀 5,116評(píng)論 5 13
  • Core Animation基礎(chǔ) Core Animation 利用了硬件加速和架構(gòu)上的優(yōu)化來(lái)實(shí)現(xiàn)快速渲染和實(shí)時(shí)動(dòng)...
    獨(dú)木舟的木閱讀 1,542評(píng)論 0 3
  • Core Animation Core Animation涛酗,中文翻譯為核心動(dòng)畫(huà)铡原,它是一組非常強(qiáng)大的動(dòng)畫(huà)處理API,...
    45b645c5912e閱讀 3,034評(píng)論 0 21
  • 概述 視圖是應(yīng)用程序中用戶界面的基本組成部分商叹,UIView類定義了所有視圖的通用行為燕刻。視圖在其邊界矩形內(nèi)呈現(xiàn)內(nèi)容,...
    漸z閱讀 1,455評(píng)論 0 0