UIScrollView视差效果动画

UIScrollView视差效果动画

 

效果

 

源码

https://github.com/YouXianMing/Animations

//
//  ScrollImageViewController.m
//  Animations
//
//  Created by YouXianMing on 15/11/24.
//  Copyright  2015年 YouXianMing. All rights reserved.
//

#import "ScrollImageViewController.h"
#import "MoreInfoView.h"
#import "UIView+SetRect.h"
#import "Math.h"

static int type    = 0;
static int viewTag = 0x11;

@interface ScrollImageViewController () <UIScrollViewDelegate>

@property (nonatomic, strong) NSArray       *picturesArray;
@property (nonatomic, strong) UIScrollView  *scrollView;
@property (nonatomic, strong) Math          *onceLinearEquation;

@end

@implementation ScrollImageViewController

- (void)viewDidLoad {

    [super viewDidLoad];
}

- (void)setup {

    [super setup];

    MATHPoint pointA;
    MATHPoint pointB;

    // Type.
    if (type % 4 == 0) {

        pointA = MATHPointMake(0, -50);
        pointB = MATHPointMake(self.view.width, 270 - 80);

    } else if (type % 4 == 1) {

        pointA = MATHPointMake(0, -50);
        pointB = MATHPointMake(self.view.width, 270 - 20);

    } else if (type % 4 == 2) {

        pointA = MATHPointMake(0, -50);
        pointB = MATHPointMake(self.view.width, 270 + 20);

    } else if (type % 4 == 3) {

        pointA = MATHPointMake(0, -50);
        pointB = MATHPointMake(self.view.width, 270 + 80);
    }

    self.onceLinearEquation = [Math mathOnceLinearEquationWithPointA:pointA PointB:pointB];

    type++;

    // Init pictures data.
    self.picturesArray = @[[UIImage imageNamed:@"1"],
                           [UIImage imageNamed:@"2"],
                           [UIImage imageNamed:@"3"],
                           [UIImage imageNamed:@"4"],
                           [UIImage imageNamed:@"5"]];

    // Init scrollView.
    CGFloat height = self.view.height;
    CGFloat width  = self.view.width;

    _scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    _scrollView.delegate                       = self;
    _scrollView.pagingEnabled                  = YES;
    _scrollView.backgroundColor                = [UIColor blackColor];
    _scrollView.showsHorizontalScrollIndicator = NO;
    _scrollView.bounces                        = NO;
    _scrollView.contentSize                    = CGSizeMake(self.picturesArray.count * width, height);
    [self.view addSubview:_scrollView];

    // Init moreInfoViews.
    for (int i = 0; i < self.picturesArray.count; i++) {

        MoreInfoView *show   = [[MoreInfoView alloc] initWithFrame:CGRectMake(i * width, 0, width, height)];
        show.imageView.image = self.picturesArray[i];
        show.tag             = viewTag + i;

        [_scrollView addSubview:show];
    }

    [self bringTitleViewToFront];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    CGFloat X = scrollView.contentOffset.x;

    for (int i = 0; i < self.picturesArray.count; i++) {

        MoreInfoView *show = [scrollView viewWithTag:viewTag + i];
        show.imageView.x   = _onceLinearEquation.k * (X - i * self.view.width) + _onceLinearEquation.b;
    }
}

@end

细节

时间: 2024-10-30 16:38:56

UIScrollView视差效果动画的相关文章

用UIScrollView产生视差效果

用UIScrollView产生视差效果 效果: 高级效果: 源码: MoreInfoView.h  +  MoreInfoView.m // // MoreInfoView.h // YXCell // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface MoreInfoView : UIView @property (nonatomic, strong) UIImageV

使用UITableView实现图片视差效果

使用UITableView实现图片视差效果 视差效果如下:   原理: 根据偏移量计算不同的移动速度,so easy! // // RootTableViewController.h // TableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface RootTableViewController : UITableViewController @end /

Android实现有视差效果的ListView_Android

视差效果是什么? 所谓的视差效果在Web设计和移动应用中都非常常见,我们在一些主要的平台都可以发现它的身影,从Windows Phone到iOS乃至Android.按照维基百科的说法,视差滚动是计算机图形学中的一种特殊的滚动技术,在此相机移动背景图像比前景图像慢,从而引起了视觉深度的假象. 那么到底什么是视差效果呢?一起来看效果图就知道了: 我们可以看到 ListView 的 HeaderView 会跟随 ListView 的滑动而变大,HeaderView里的图片会有缩放效果.这些可以使用属性

不通过JavaScript实现的自动滚动视差效果_经验交流

这个效果是仿照Chirs Coyier的视差教程实现的,经过Chirs的允许使用了其中的星空背景. 运行效果:在这里观看:http://www.fofronline.com/experiments/parallax/该效果可以在Safari 4 Beta和Google Chrome中正常预览,实现该效果无需JavaScript.(但是在IE7及以下版本中无法观看) 实现方法:这个页面的HTML代码非常简单,通过一个div来定义背景,另一个div来定义内容,这里使用了CSS3中的多重背景技术,所以

利用JavaScript创建视差效果的网站

如何创建一个视差效果的网站呢,在这篇文章中我们将为你介绍通过JavaScript创建视差效果,而没有使用任何第三方库例如jQuery等,在视差效果的制作中,网页中的不同元素以不同的速度移动,一般来讲,离用户越远的物体移动速度要比近的物体速度慢,反之亦然. 如何创建视差效果的网站 动画 就像任何动画,你改变一些动作的基础上,其他的东西,像时间.然而在这种情况下,你是在你网站的部分相对于观察者位置的页面上. 动画的速度控制如何快速访客向下滚动页面.这意味着,观众可以控制动画到底有多快.如果客人卷轴真

UIScrollView视差模糊效果

UIScrollView视差模糊效果   效果   源码 https://github.com/YouXianMing/Animations // // ScrollBlurImageViewController.m // Animations // // Created by YouXianMing on 15/11/25. // Copyright 2015年 YouXianMing. All rights reserved. // #import "ScrollBlurImageViewC

Android实现有视差效果的ListView

视差效果是什么? 所谓的视差效果在Web设计和移动应用中都非常常见,我们在一些主要的平台都可以发现它的身影,从Windows Phone到iOS乃至Android.按照维基百科的说法,视差滚动是计算机图形学中的一种特殊的滚动技术,在此相机移动背景图像比前景图像慢,从而引起了视觉深度的假象. 那么到底什么是视差效果呢?一起来看效果图就知道了: 我们可以看到 ListView 的 HeaderView 会跟随 ListView 的滑动而变大,HeaderView里的图片会有缩放效果.这些可以使用属性

使用CSS3来实现滚动视差效果的教程

  "视差(parallax)"效果现在在互联网上越来越流行了.如果你还没听说过什么是视差效果,它其实就是利用图片形成不同的层,分别以不同的速度,不同的方向移动产生的效果.这会产生出很奇妙的视觉效果,能有力的吸引住浏览者的目光. 观看演示 在web设计中,最常见的实现视差效果的方式是使用jQuery插件.但这种方法有一些弊端.这些插件大多都是在window对象的scroll事件上放置监听器.这会导致JavaScript需要处理大量的事件触发(处理scroll事件很容易造成浏览器性能问题

PPT中怎么制作打字效果动画(图文)

PPT中怎么制作打字效果动画(图文)   演示的动态图只有图像没有声音,其实这个动画是有声音的,各位同学可以去文章最后素材体验. 1.切换到"插入"选项卡,在"文本"组中找到"文本框",选择一种文本框类型,并在幻灯片中绘制这种文本框. 2.在文本框中输入文字,并且在"开始"选项卡中修改它们的字体.字号以及颜色等. 3.选中文本框,在"动画"选项卡的"高级动画"组中给他添加出现动画. 4.