视图转换例子实践
有三例:
翻转(类似翻书)视图效果,两种实现方式
滑动视图效果
分别看各自实现的重点:
=======================================
翻转视图效果例子
在官方上,提供UIViewAnimationTransitionFlipFromLeft和UIViewAnimationTransitionFlipFromRight方法,来实现视图向左或向右翻转。
在UIView动画块中使用转换,需要2个工作:
1、必须将转换作为块参数添加
2、应该在块内部重新安排视图顺序。
效果代码如下:
注意,此代码写在touchesEnded事件上的,也是符合翻转逻辑
上述代码中带有//*的地方,就是所需2个工作。
第一处表示向左翻转,翻转的对象是当前视图的上级视图,并缓存
第二处表示子视图集合中,0和1之间交换
UIView类
类方法:(动画部分)
setAnimationTransition:forView:cache:
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache
Sets a transition to apply to a view during an animation block.
方法:
exchangeSubviewAtIndex:withSubviewAtIndex:
- (void)exchangeSubviewAtIndex:(NSInteger)index1 withSubviewAtIndex:(NSInteger)index2
Exchanges the subviews at the specified indices.
index1: The index of the first subview in the receiver.
index2: The index of the second subview in the receiver.
关于方法exchangeSubviewAtIndex:withSubviewAtIndex:实现的效果也可以用其他方式来实现。比如:
UIViewController Controller
UIView v1
UIView v2
Controller.view = v1;//v1 front
Controller.view = v2;//v2 front
当然,这只是实践中应用,但不一定这么用。用UIViewController实现不了动画效果,至少现在我不知道UIViewController本身可否实现动画效果。
=======================================
关于另外一种方式来实现动画效果
Core Animation Transition,作用于层,而非视图
看如下代码:
CATransition类
此类针对层执行转换动画
继承CAAnimation : NSObject
属性:
delegate:
@property(retain) id delegate
Specifies the receiver’s delegate object.
duration:
@property CFTimeInterval duration
Specifies the basic duration of the animation, in seconds. (required)
timingFunction:
@property(retain) CAMediaTimingFunction *timingFunction
An optional timing function defining the pacing of the animation.
subtype
@property(copy) NSString *subtype
Specifies an optional subtype that indicates the direction for the predefined motion-based transitions.
Discussion
The possible values are shown in “Common Transition Subtypes”. The default is nil.
type
@property(copy) NSString *type
Discussion
The possible values are shown in “Common Transition Types”. The default is kCATransitionFade.
Constants/常量
Common Transition Types
These constants specify the transition types that can be used with the type property.
NSString * const kCATransitionFade;
NSString * const kCATransitionMoveIn;
NSString * const kCATransitionPush;
NSString * const kCATransitionReveal;
kCATransitionFade
The layer’s content fades as it becomes visible or hidden.
kCATransitionMoveIn
The layer’s content slides into place over any existing content. The “Common Transition Subtypes” are used with this transition.
kCATransitionPush
The layer’s content pushes any existing content as it slides into place. The “Common Transition Subtypes” are used with this transition.
kCATransitionReveal
The layer’s content is revealed gradually in the direction specified by the transition subtype. The “Common Transition Subtypes” are used with this transition.
Common Transition Subtypes
These constants specify the direction of motion-based transitions. They are used with the subtype property.
NSString * const kCATransitionFromRight;
NSString * const kCATransitionFromLeft;
NSString * const kCATransitionFromTop;
NSString * const kCATransitionFromBottom;
kCATransitionFromRight
The transition begins at the right side of the layer.
kCATransitionFromLeft
The transition begins at the left side of the layer.
kCATransitionFromTop
The transition begins at the top of the layer.
kCATransitionFromBottom
The transition begins at the bottom of the layer.
Declared in CAAnimation.h.
在后续例子中也有此CATransition类的学习,具体方法实际中去参考
CALayer类
方法:
addAnimation:forKey:
- (void)addAnimation:(CAAnimation *)anim forKey:(NSString *)key
Add an animation object to the receiver’s render tree for the specified key.
anim: The animation to be added to the render tree.
key: A string that specifies an identifier for the animation.
=======================================
在后续的滑动视图中,使用CATransition实现,关键在于生成一个控制层运动的对象,看代码:
看[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];这句代码和前面有些不一样吧。
另外一个关键:定义一个滑动方向,在touchesBegan初始化,在touchesMoved获取当前值,在touchesEnded中使用。
多阅读此代码
=======================================
翻转(类似翻书)视图效果,两种实现方式
滑动视图效果
分别看各自实现的重点:
=======================================
翻转视图效果例子
在官方上,提供UIViewAnimationTransitionFlipFromLeft和UIViewAnimationTransitionFlipFromRight方法,来实现视图向左或向右翻转。
在UIView动画块中使用转换,需要2个工作:
1、必须将转换作为块参数添加
2、应该在块内部重新安排视图顺序。
效果代码如下:
- (void) touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event
{
// Start Animation Block
CGContextRef context = UIGraphicsGetCurrentContext();
[UIView beginAnimations:nil context:context];
[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft forView:[self superview] cache:YES];//*
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:1.0];
// Animations
[[self superview] exchangeSubviewAtIndex:0 withSubviewAtIndex:1];//*
// Commit Animation Block
[UIView commitAnimations];
}
注意,此代码写在touchesEnded事件上的,也是符合翻转逻辑
上述代码中带有//*的地方,就是所需2个工作。
第一处表示向左翻转,翻转的对象是当前视图的上级视图,并缓存
第二处表示子视图集合中,0和1之间交换
UIView类
类方法:(动画部分)
setAnimationTransition:forView:cache:
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache
Sets a transition to apply to a view during an animation block.
方法:
exchangeSubviewAtIndex:withSubviewAtIndex:
- (void)exchangeSubviewAtIndex:(NSInteger)index1 withSubviewAtIndex:(NSInteger)index2
Exchanges the subviews at the specified indices.
index1: The index of the first subview in the receiver.
index2: The index of the second subview in the receiver.
关于方法exchangeSubviewAtIndex:withSubviewAtIndex:实现的效果也可以用其他方式来实现。比如:
UIViewController Controller
UIView v1
UIView v2
Controller.view = v1;//v1 front
Controller.view = v2;//v2 front
当然,这只是实践中应用,但不一定这么用。用UIViewController实现不了动画效果,至少现在我不知道UIViewController本身可否实现动画效果。
=======================================
关于另外一种方式来实现动画效果
Core Animation Transition,作用于层,而非视图
看如下代码:
- (void) touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event
{
CATransition *animation = [CATransition animation];
[animation setDelegate:self];
[animation setDuration:1.0f];
[animation setTimingFunction:UIViewAnimationCurveEaseInOut];
[animation setType: kCATransitionPush];
[animation setSubtype: kCATransitionFromLeft];
[[self superview] exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
[[[self superview] layer] addAnimation:animation forKey:@"transitionViewAnimation"];
}
CATransition类
此类针对层执行转换动画
继承CAAnimation : NSObject
属性:
delegate:
@property(retain) id delegate
Specifies the receiver’s delegate object.
duration:
@property CFTimeInterval duration
Specifies the basic duration of the animation, in seconds. (required)
timingFunction:
@property(retain) CAMediaTimingFunction *timingFunction
An optional timing function defining the pacing of the animation.
subtype
@property(copy) NSString *subtype
Specifies an optional subtype that indicates the direction for the predefined motion-based transitions.
Discussion
The possible values are shown in “Common Transition Subtypes”. The default is nil.
type
@property(copy) NSString *type
Discussion
The possible values are shown in “Common Transition Types”. The default is kCATransitionFade.
Constants/常量
Common Transition Types
These constants specify the transition types that can be used with the type property.
NSString * const kCATransitionFade;
NSString * const kCATransitionMoveIn;
NSString * const kCATransitionPush;
NSString * const kCATransitionReveal;
kCATransitionFade
The layer’s content fades as it becomes visible or hidden.
kCATransitionMoveIn
The layer’s content slides into place over any existing content. The “Common Transition Subtypes” are used with this transition.
kCATransitionPush
The layer’s content pushes any existing content as it slides into place. The “Common Transition Subtypes” are used with this transition.
kCATransitionReveal
The layer’s content is revealed gradually in the direction specified by the transition subtype. The “Common Transition Subtypes” are used with this transition.
Common Transition Subtypes
These constants specify the direction of motion-based transitions. They are used with the subtype property.
NSString * const kCATransitionFromRight;
NSString * const kCATransitionFromLeft;
NSString * const kCATransitionFromTop;
NSString * const kCATransitionFromBottom;
kCATransitionFromRight
The transition begins at the right side of the layer.
kCATransitionFromLeft
The transition begins at the left side of the layer.
kCATransitionFromTop
The transition begins at the top of the layer.
kCATransitionFromBottom
The transition begins at the bottom of the layer.
Declared in CAAnimation.h.
在后续例子中也有此CATransition类的学习,具体方法实际中去参考
CALayer类
方法:
addAnimation:forKey:
- (void)addAnimation:(CAAnimation *)anim forKey:(NSString *)key
Add an animation object to the receiver’s render tree for the specified key.
anim: The animation to be added to the render tree.
key: A string that specifies an identifier for the animation.
=======================================
在后续的滑动视图中,使用CATransition实现,关键在于生成一个控制层运动的对象,看代码:
- (CATransition *) getAnimation:(NSString *) direction
{
CATransition *animation = [CATransition animation];
[animation setDelegate:self];
[animation setType:kCATransitionPush];
[animation setSubtype:direction];
[animation setDuration:1.0f];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
return animation;
}
看[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];这句代码和前面有些不一样吧。
另外一个关键:定义一个滑动方向,在touchesBegan初始化,在touchesMoved获取当前值,在touchesEnded中使用。
多阅读此代码
=======================================
无论生活、还是技术,一切都不断的学习和更新~~~努力~