首页3张图片有动画效果

.h

#import <UIKit/UIKit.h>

@interface RootViewController : UIViewController
{
    NSTimer *timer;
    UIImageView *imageView1;
    UIImageView *imageView2;
    UIImageView *imageView3;
    UIView * view1;
    UIView * view2;
    UIView * view3;
}

@end

.m

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    //初始化背景图
    [self initBackgroundView];

}

#pragma -mark -funcitons
-(void)initBackgroundView
{
    //第一张图片
    view1 = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 560)];
    [self.view addSubview:view1];

    imageView1 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 420, 560)];
    imageView1.image = [UIImage imageNamed:@"guidex1.png"];
    [view1 addSubview:imageView1];

    //第二张图片
    view2 = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 560)];
    [self.view addSubview:view2];

    imageView2 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 420, 560)];
    imageView2.image = [UIImage imageNamed:@"guidex2.png"];
    [view2 addSubview:imageView2];

    //第三张图片
    view3 = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 560)];
    [self.view addSubview:view3];

    imageView3 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 520, 660)];
    imageView3.image = [UIImage imageNamed:@"guidex0.png"];
    [view3 addSubview:imageView3];

    //开启动画事件
    timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(changeView) userInfo:nil repeats:NO];

}
-(void)change
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:11.0];
    imageView1.frame = CGRectMake(0, 0, 320, 460);
    [UIView commitAnimations];
}
-(void)change1
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:11.0];
    imageView2.frame = CGRectMake(0, 0, 320, 460);
    [UIView commitAnimations];
}
-(void)change2
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:11.0];
    imageView3.frame = CGRectMake(0, 0, 320, 460);
    [UIView commitAnimations];
}
-(void)changeView
{
    imageView1.frame = CGRectMake(0, 0, 520, 660);
    [self change2];
    CATransition * transition = [CATransition animation];
    transition.duration = 2.0;//间隔时间
    transition.timingFunction = UIViewAnimationCurveEaseInOut;//减缓动画
    transition.type = kCATransitionFade;//各种效果
    transition.subtype = kCATransitionFromRight;
    transition.delegate = self;//代理,自带方法,动画的代理都不用协议
    [self.view.layer addAnimation:transition forKey:nil];
    [self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
    timer = [NSTimer scheduledTimerWithTimeInterval:11.0 target:self selector:@selector(changeView1) userInfo:nil repeats:NO];
}

-(void)changeView1
{
    imageView2.frame = CGRectMake(0, 0, 520, 660);
    [self change];
    CATransition * transition = [CATransition animation];
    transition.duration = 2.0;//间隔时间
    transition.timingFunction = UIViewAnimationCurveEaseInOut;//减缓动画
    transition.type = kCATransitionFade;//各种效果
    transition.subtype = kCATransitionFromRight;
    transition.delegate = self;//代理,自带方法,动画的代理都不用协议
    [self.view.layer addAnimation:transition forKey:nil];
    [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:2];
    timer = [NSTimer scheduledTimerWithTimeInterval:11.0 target:self selector:@selector(changeView2) userInfo:nil repeats:NO];
}
-(void)changeView2
{
    imageView3.frame = CGRectMake(0, 0, 520, 660);
    [self change1];
    CATransition * transition = [CATransition animation];
    transition.duration = 2.0;//间隔时间
    transition.timingFunction = UIViewAnimationCurveEaseInOut;//减缓动画
    transition.type = kCATransitionFade;//各种效果
    transition.subtype = kCATransitionFromRight;
    transition.delegate = self;//代理,自带方法,动画的代理都不用协议
    [self.view.layer addAnimation:transition forKey:nil];
    [self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:0];
    timer = [NSTimer scheduledTimerWithTimeInterval:11.0 target:self selector:@selector(changeView) userInfo:nil repeats:NO];
}
时间: 2024-10-13 16:58:36

首页3张图片有动画效果的相关文章

扒皮下京东首页楼层图标的动画效果实现方式

京东首页的楼层图标默认是灰色的,但拉动滚动条,让该图标从下方挪动到屏幕正中的时候,该图标会显示出从上到下由灰变绿的动画效果,如下图 这种效果很有Lazyload的范,也是挺吸引眼球的交互方式,下面用JQ来仿造下这种效果的实现方式,其实挺简单. 首先我是做了2个gif分别作为图标的默认状态和动画状态(注意第二个gif的动画效果只显示一次,不循环的,而且是从下往上<做的着急了点,跟京东的动画方向相反了哈哈>,错过效果的朋友请刷新吧):        P.S. 京东的动画效果并非用动态gif实现的,

js通过循环多张图片实现动画效果

以小鱼摇尾巴和眨眼睛为例 动画思路: 1.将图片资源放在数组里面 2.通过计时器来设定间隔时间 3.通过计数器来取相应的图片 第一步:基本框架,鱼身体 <body> <canvas id="canvas1" width="800" height="600"></canvas> </body> 1 document.body.onload = game; 2 3 var can1, 4 ctx1, 5

利用 :before :after伪类实现鼠标悬浮动画效果

1.最近在逛网站的时候,想找一下喜欢的鼠标悬浮效果,避免广告的嫌疑,直接放图了: 2.在实现的时候,如果在直接使用鼠标hover ,transform,进行过渡,不能达到想要的效果,因为同时只能触发一张图片的动画效果,鼠标一旦离开了图层,就会回到原始位置. 也就是说,要实现这样的效果,需要鼠标放在某一个块状区域,同时触发两个选择器,这样的效果如果使用css实现的话,只能使用伪类:before, :after实现. 3.直接上代码 HTML <div id="meizu1">

仿菁优网首页动画效果

原文链接 1.菁优网首页动画效果图 2.动画效果分析 2.1.动画效果一定是UIView动画,因为核心动画是CALayer的动画效果给我们的位移假象,视图的真实位置并没有发生变化.在首页的动画中,按钮的位置是随着转盘的转动在发生变化的.核心动画无法帮我们完成这项任务.在转盘转动的同时,按钮也要进行着和转盘反方向的旋转,并且旋转角度正好相等.转盘在旋转时按钮中的图片和文字相对于我们的视角一直是正向的. 2.2.在转动转盘的时候既可以单手指旋转,也可以两根手指旋转.所以自定义旋转手势,每次旋转转盘的

iOS点击查看大图的动画效果

对于图片来说,除了表情包,几乎都会被点击查看大图.今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图.大图会从小图的位置和大小"弹"出来,同时背景变成半透明的阴影.点击大图或者阴影后,收起大图,同样地弹回到小图去,同时去掉阴影背景,就像是一张图片在伸大缩小一样. 现在看看这是怎么实现的.在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了

等待时动画效果的实现

当我们在请求网络时加载页面时有个动作效果,效果如下: 源代码可以网上找开源项目Coding.net,上面的效果原理为两张图片组合,外面那个则为动画转动,里面的图标则是透明度的变化:主要代码如下: 1:把它封装在EaseLoadingView里面 @interface EaseLoadingView : UIView @property (strong, nonatomic) UIImageView *loopView, *monkeyView; @property (assign, nonato

iOS的GIF动画效果实现

引言:GIF图像格式是常见的一种动态图片格式,无论是在Web端还是在移动端都经常遇到,但是考虑目前iOS还无法原生展现GIF图片,而对于GIF的原生支持暂时也没有像JPG.PNG等图像格式支持得这么全面,因此本文从图片的合成与分解角度来为大家讲解GIF的知识,结合ImageIO框架可以更方便地实现GIF图片的合成与分解. 本文选自<iOS动画--核心技术与案例实战>. GIF在iOS中的使用场景 GIF在iOS中的使用场景有以下三个方面. (1)GIF图片分解为单帧图片. (2)一系列单帧图片

Javascript动画效果(四)

Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下滚入的效果,那么那种效果是如何实现的呢? 首先我们我们完成该效果的html和css代码,代码如下: html部分代码: <div id="move"> <a href="#"><i><img src="images/1

Android开发之动画效果浅析

Android开发之动画效果浅析 请尊重他人的劳动成果,转载请注明出处:Android开发之动画效果浅析 程序运行效果图: Android动画主要包含补间动画(Tween)View Animation.帧动画(Frame)Drawable Animation.以及属性动画Property Animation.下面依次介绍一下各个动画. 1.   补间动画(Tween) Tween动画,通过对View 的内容进行一系列的图形变换 (包括平移.缩放.旋转.改变透明度)来实现动画效果.动画效果的定义可