自定义动画

我们证实了过渡是一种对那些不太好做平滑动画属性的强大工具,但是CATransition的提供的动画类型太少了。

更 奇怪的是苹果通过UIView +transitionFromView:toView:duration:options:completion: 和+transitionWithView:duration:options:animations:方法提供了Core Animation的过渡特性。但是这里的可用的过渡选项和CATransition的type属性提供的常量完全不同。UIView过渡方法中 options参数可以由如下常量指定:

UIViewAnimationOptionTransitionFlipFromLeft 

UIViewAnimationOptionTransitionFlipFromRight

UIViewAnimationOptionTransitionCurlUp 

UIViewAnimationOptionTransitionCurlDown

UIViewAnimationOptionTransitionCrossDissolve 

UIViewAnimationOptionTransitionFlipFromTop 

UIViewAnimationOptionTransitionFlipFromBottom

除了UIViewAnimationOptionTransitionCrossDissolve之外,剩下的值和CATransition类型完全没关系。你可以用之前例子修改过的版本来测试一下

清单8.13 使用UIKit提供的方法来做过渡动画

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIImageView *imageView;

@property (nonatomic, copy) NSArray *images;

@end

@implementation ViewController

- (void)viewDidLoad

{

    [super viewDidLoad]; //set up images

    self.images = @[[UIImage imageNamed:@"Anchor.png"],

                    [UIImage imageNamed:@"Cone.png"],

                    [UIImage imageNamed:@"Igloo.png"],

                    [UIImage imageNamed:@"Spaceship.png"]];

- (IBAction)switchImage

{

    [UIView transitionWithView:self.imageView duration:1.0

                       options:UIViewAnimationOptionTransitionFlipFromLeft

                    animations:^{

                        //cycle to next image

                        UIImage *currentImage = self.imageView.image;

                        NSUInteger index = [self.images indexOfObject:currentImage];

                        index = (index + 1) % [self.images count];

                        self.imageView.image = self.images[index];

                    }

                    completion:NULL];

}

@end

清单8.14 用renderInContext:创建自定义过渡效果

@implementation ViewController

- (IBAction)performTransition

{

    //preserve the current view snapshot

    UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, YES, 0.0);

    [self.view.layer renderInContext:UIGraphicsGetCurrentContext()];

    UIImage *coverImage = UIGraphicsGetImageFromCurrentImageContext();

    //insert snapshot view in front of this one

    UIView *coverView = [[UIImageView alloc] initWithImage:coverImage];

    coverView.frame = self.view.bounds;

    [self.view addSubview:coverView];

    //update the view (we‘ll simply randomize the layer background color)

    CGFloat red = arc4random() / (CGFloat)INT_MAX;

    CGFloat green = arc4random() / (CGFloat)INT_MAX;

    CGFloat blue = arc4random() / (CGFloat)INT_MAX;

    self.view.backgroundColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];

    //perform animation (anything you like)

    [UIView animateWithDuration:1.0 animations:^{

        //scale, rotate and fade the view

        CGAffineTransform transform = CGAffineTransformMakeScale(0.01, 0.01);

        transform = CGAffineTransformRotate(transform, M_PI_2);

        coverView.transform = transform;

        coverView.alpha = 0.0;

    } completion:^(BOOL finished) {

        //remove the cover view now we‘re finished with it

        [coverView removeFromSuperview];

    }];

}

@end

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

参数解析:

duration:动画的持续时间

delay:动画延迟delay秒后开始

options:动画的节奏控制

animations:将改变视图属性的代码放在这个block中

completion:动画结束后,会自动调用这个block

转场动画

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

参数解析:

duration:动画的持续时间

view:需要进行转场动画的视图

options:转场动画的类型

animations:将改变视图属性的代码放在这个block中

completion:动画结束后,会自动调用这个block

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

方法调用完毕后,相当于执行了下面两句代码:

// 添加toView到父视图

[fromView.superview addSubview:toView];

// 把fromView从父视图中移除

[fromView.superview removeFromSuperview];

参数解析:

duration:动画的持续时间

options:转场动画的类型

animations:将改变视图属性的代码放在这个block中

completion:动画结束后,会自动调用这个block

时间: 2024-10-07 00:36:08

自定义动画的相关文章

<JavaScript>自定义动画

animate() 方法执行 CSS 属性集的自定义动画. 该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果. 只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 示例代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont

JavaScript之jQuery-5 jQuery 动画效果(隐藏和显示、自定义动画、并发与排列效果)

一.jQuery 隐藏和显示 基本显示.隐藏效果 - show() / hide() - 作用: 通过同时改变元素的宽度和高度来实现显示或隐藏 - 用法: $obj.show(执行时间,回调函数); 执行时间:slow,normal,fast或毫秒数 回调函数:动画执行完毕之后要执行的函数 滑动式动画效果 - slideDown() / slideUp() - 作用: 通过改变高度来实现显示或者隐藏的效果 - 用法同 show() / hidden() 淡入淡出式动画效果 - fadeIn()

Animate自定义动画

在jQuery中出了基本的动画之外,还有用户 可以自定义的函数,Animate() 用于创建自定义动画的函数. apI上指出: 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如“height”.“top”或“opacity”).注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就会从当前的值渐变到指定的值.如果使用的是“hide”.

Jq自定义动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title></title> <scr

jquery自定义动画animate()

<1> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquer

jQuery中关于如何使用animate自定义动画

动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一下2组动画设置的区别. $(elem).fadeOut(3000) $(elem).animate({ opacity:0 },3000) 显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画. 语法: 1 .animate( properties [, duration ]

jQuery学习-自定义动画

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义动画</title> <script src="js/jquery.js"></script> <style> .me1{ position: absolute; left: 20%; top: 50%; margin-left: -1

自定义动画animate()

在上一节总结了一下3中类型的动画,其中show()和hide()方法会同时修改元素的多个属性,fadeOut()和fadeIn()方法只会修改元素的不透明度,而slideDown()和slideUp()方法只会改变元素的高度,但是很多情况下,需要对动画有更多控制,这些方法无法满足用户的需求,这时,jQuery中的自定义动画animate()就可以用来解决这些高级的动画问题了. 1,语法结构 首先来看一下该方法的语法结构:animate(params,speed,callback) params:

FineReport中如何用JavaScript自定义地图标签

在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行JavaScript代码编写. 例如:在使用地图过程中,会发现很多地名显示的位置偏离.这时候就需要使用JavaScript进行调控.以黑龙江和内蒙古为例,来介绍下如何在FineReport中利用JavaScript自定义地图标签. 新建地图 以区域地图为例,新建表单,拖入地图(新特性)组件,地图边界选择区域地图下的中国(省级): 数据准备 新建工作簿,添加数据集ds1,SELECT*FROM地图1,选中图表,选择图表

自定义动画css属性

自定义动画: 1.animation-name(自定义动画名称) 元素所应用的动画名称,必须与@keyframes使用,名称由@keyframes定义. keyframes(动画关键帧):以@keyframes开头,其中{}所写入的是不同时间段的样式规则. <style type="text/css"> .div { width: 100px; height: 100px; background: blue; animation-name: lefttoright; } @