Just a Computer Graphics Studio & My Life

[iOS] 影像轉場動畫

我想要讓影像有轉場動畫的效果,如此使用者體驗會更加舒適。之前查到的方法都是用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 ReferenceCATransition Class Reference

廣告

發表留言

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

WordPress.com Logo

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

Twitter picture

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

Facebook照片

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

Google+ photo

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

連結到 %s

標籤雲

%d 位部落客按了讚: