Just My Life & My Work

[iOS] 影像轉場動畫

2013 年 01 月 19 日

我想要讓影像有轉場動畫的效果，如此使用者體驗會更加舒適。之前查到的方法都是用UIView，這個方法用UIImageView才是我要的，讓我不用UIView包UIImageView。House Book這張圖會拿來放相片，A相片轉換到B相片時我想要淡出和淡入，該怎麼做呢？

housebook uiimageview round corner

在寫程式前的兩個步驟：

  1. add QuartzCore.framework
  2. import <QuartzCore/QuartzCore.h>

 // 設定imageView轉換image動畫
 CATransition *transition = [CATransition animation];
 transition.duration = 0.7f;
 transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
 transition.type = kCATransitionFade;

 [self.albumImageView.layer addAnimation:transition forKey:nil];

timingFunction有以下幾個參數效果：

  • NSString * const kCAMediaTimingFunctionLinear;
  • NSString * const kCAMediaTimingFunctionEaseIn;
  • NSString * const kCAMediaTimingFunctionEaseOut;
  • NSString * const kCAMediaTimingFunctionEaseInEaseOut;
  • NSString * const kCAMediaTimingFunctionDefault;

type有以下幾個參數效果：

Common Transition Types

  • NSString * const kCATransitionFade;
  • NSString * const kCATransitionMoveIn;
  • NSString * const kCATransitionPush;
  • NSString * const kCATransitionReveal;

Common Transition Subtypes

  • NSString * const kCATransitionFromRight;
  • NSString * const kCATransitionFromLeft;
  • NSString * const kCATransitionFromTop;
  • NSString * const kCATransitionFromBottom;

參考：How to animate the change of image in an UIImageView?、CAMediaTimingFunction Class Reference、CATransition Class Reference。

分類：

iOS, 教學

發表留言

Tagged with:

隨意留個言吧：）～

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。

標籤雲