maskView遮罩中多张图片的动画

说明

用多张图片做遮罩效率极高,非常好理解,而且极其美观!

效果图

素材

源码

//
// ViewController.m
// FeedBack
//
// Created by YouXianMing on 15/5/6.
// Copyright (c) 2015年 YouXianMing. All rights reserved.
// #import "ViewController.h"
#import "UIView+SetRect.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; // 前景图
UIImageView *background = [[UIImageView alloc] initWithFrame:CGRectMake(, , , )];
background.image = [UIImage imageNamed:@"base"];
background.center = self.view.center;
[self.view addSubview:background]; // 背景图
UIImageView *upGround = [[UIImageView alloc] initWithFrame:background.frame];
upGround.image = [UIImage imageNamed:@"background"];
[self.view addSubview:upGround]; // maskView
UIView *mask = [[UIView alloc] initWithFrame:upGround.bounds];
upGround.maskView = mask; // 图片1
UIImageView *picOne = [[UIImageView alloc] initWithFrame:CGRectMake(, , , )];
picOne.image = [UIImage imageNamed:@""];
[mask addSubview:picOne]; // 图片2
UIImageView *picTwo = [[UIImageView alloc] initWithFrame:CGRectMake(, -, , )];
picTwo.image = [UIImage imageNamed:@""];
[mask addSubview:picTwo]; // 动画
[UIView animateWithDuration:.f delay:.f options: animations:^{
picOne.y -= ;
picTwo.y += ;
} completion:^(BOOL finished) { }];
} @end
//
// UIView+SetRect.h
// TestPch
//
// Created by YouXianMing on 14-9-26.
// Copyright (c) 2014年 YouXianMing. All rights reserved.
// #import <UIKit/UIKit.h> @interface UIView (SetRect) // Frame
@property (nonatomic) CGPoint viewOrigin;
@property (nonatomic) CGSize viewSize; // Frame Origin
@property (nonatomic) CGFloat x;
@property (nonatomic) CGFloat y; // Frame Size
@property (nonatomic) CGFloat width;
@property (nonatomic) CGFloat height; // Frame Borders
@property (nonatomic) CGFloat top;
@property (nonatomic) CGFloat left;
@property (nonatomic) CGFloat bottom;
@property (nonatomic) CGFloat right; // Center Point
#if !IS_IOS_DEVICE
@property (nonatomic) CGPoint center;
#endif
@property (nonatomic) CGFloat centerX;
@property (nonatomic) CGFloat centerY; // Middle Point
@property (nonatomic, readonly) CGPoint middlePoint;
@property (nonatomic, readonly) CGFloat middleX;
@property (nonatomic, readonly) CGFloat middleY;
@end
//
// UIView+SetRect.m
// TestPch
//
// Created by YouXianMing on 14-9-26.
// Copyright (c) 2014年 YouXianMing. All rights reserved.
// #import "UIView+SetRect.h" @implementation UIView (SetRect) #pragma mark Frame - (CGPoint)viewOrigin
{
return self.frame.origin;
} - (void)setViewOrigin:(CGPoint)newOrigin
{
CGRect newFrame = self.frame;
newFrame.origin = newOrigin;
self.frame = newFrame;
} - (CGSize)viewSize
{
return self.frame.size;
} - (void)setViewSize:(CGSize)newSize
{
CGRect newFrame = self.frame;
newFrame.size = newSize;
self.frame = newFrame;
} #pragma mark Frame Origin - (CGFloat)x
{
return self.frame.origin.x;
} - (void)setX:(CGFloat)newX
{
CGRect newFrame = self.frame;
newFrame.origin.x = newX;
self.frame = newFrame;
} - (CGFloat)y
{
return self.frame.origin.y;
} - (void)setY:(CGFloat)newY
{
CGRect newFrame = self.frame;
newFrame.origin.y = newY;
self.frame = newFrame;
} #pragma mark Frame Size - (CGFloat)height
{
return self.frame.size.height;
} - (void)setHeight:(CGFloat)newHeight
{
CGRect newFrame = self.frame;
newFrame.size.height = newHeight;
self.frame = newFrame;
} - (CGFloat)width
{
return self.frame.size.width;
} - (void)setWidth:(CGFloat)newWidth
{
CGRect newFrame = self.frame;
newFrame.size.width = newWidth;
self.frame = newFrame;
} #pragma mark Frame Borders - (CGFloat)left
{
return self.x;
} - (void)setLeft:(CGFloat)left
{
self.x = left;
} - (CGFloat)right
{
return self.frame.origin.x + self.frame.size.width;
} - (void)setRight:(CGFloat)right
{
self.x = right - self.width;
} - (CGFloat)top
{
return self.y;
} - (void)setTop:(CGFloat)top
{
self.y = top;
} - (CGFloat)bottom
{
return self.frame.origin.y + self.frame.size.height;
} - (void)setBottom:(CGFloat)bottom
{
self.y = bottom - self.height;
} #pragma mark Center Point #if !IS_IOS_DEVICE
- (CGPoint)center
{
return CGPointMake(self.left + self.middleX, self.top + self.middleY);
} - (void)setCenter:(CGPoint)newCenter
{
self.left = newCenter.x - self.middleX;
self.top = newCenter.y - self.middleY;
}
#endif - (CGFloat)centerX
{
return self.center.x;
} - (void)setCenterX:(CGFloat)newCenterX
{
self.center = CGPointMake(newCenterX, self.center.y);
} - (CGFloat)centerY
{
return self.center.y;
} - (void)setCenterY:(CGFloat)newCenterY
{
self.center = CGPointMake(self.center.x, newCenterY);
} #pragma mark Middle Point - (CGPoint)middlePoint
{
return CGPointMake(self.middleX, self.middleY);
} - (CGFloat)middleX
{
return self.width / ;
} - (CGFloat)middleY
{
return self.height / ;
} @end

maskView遮罩中多张图片的动画的更多相关文章

  1. 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  2. Android中的Drawable和动画

    Android中Drawable是一种可以在Canvas上进行绘制抽象的概念,种类很多,常见的颜色和图片都可以是一个Drawable.Drawable有很多种,它们表示一种图像的概念,但是它们又不全是 ...

  3. jQuery中的事件和动画 以及视频展示效果实例

    经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...

  4. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  5. ScrollMe – 在网页中加入各种滚动动画效果

    ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...

  6. jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  7. CocoStudio基础教程(3)在程序中处理cocoStudio导出动画

    1.概述 使用cocoStudio可以方便的制作动画,接下来的工作就是在我们的程序中使用制作的动画.这篇中,我将使用程序将两个动画连接起来 2.关联到项目 运行脚本创建我们的项目,将导出的动画.UI放 ...

  8. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  9. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

随机推荐

  1. Chapter 3 Phenomenon——12

    Naturally, the ambulance got a police escort to the county hospital. 自然而然的,救护车让一个警察陪护到县医院去. 自然,救护车一路 ...

  2. go语言的unsafe包(转)

    The unsafe Package in Golang Golang的unsafe包是一个很特殊的包. 为什么这样说呢? 本文将详细解释. 来自go语言官方文档的警告 unsafe包的文档是这么说的 ...

  3. C++字符串string类常用操作详解(一)【初始化、遍历、连接】

    代码示例: #include <iostream> #include "string" using namespace std; //字符串初始化 void strIn ...

  4. [LeetCode]LinkedList Cycle

    题目说明 Given a linked list, determine if it has a cycle in it. Follow up: Can you solve it without usi ...

  5. 学习ThinkPHP笔记

    学习ThinkPHP笔记 TP的模块化设计 名称 描述 应用 基于同一个入口文件访问的项目我们称之为一个应用. 模块 一个应用下面可以包含多个模块,每个模块在应用目录下面都是一个独立的子目录. 控制器 ...

  6. Hibernate中NoSession问题

    今天在使用hibernate中 Note note = hibTem.load(Note.class, id); 报了一个could not initialize proxy [cn.entity.N ...

  7. 防止TableView 上的tap手势隔断 cell的选择

    遵循UIGestureRecognizerDelegate协议: 1.0添加手势   - (void)addTapGest {    UITapGestureRecognizer *tap = [[U ...

  8. Android Studio 1.1.0汉化初步出炉!

    我找到去年12月国人汉化的版本,然后迁移上来的.实测支持Android window最新版(1.1.0) 项目分4部分:1压缩好的:2文本分析器:3原生的语言包:4原版语言包备份 现在一些新增的项目没 ...

  9. 【转】Dubbo声明式缓存

    缓存的应用非常广泛,为了提高数据访问的速度.Dubbo也不例外,它提供了声明式缓存,以减少用户加缓存的工作量. 一.Dubbo中缓存策略 lru 基于最近最少使用原则删除多余缓存,保持最热的数据被缓存 ...

  10. 撩课-Web大前端每天5道面试题-Day24

    1.下面的代码将输出什么? ; i < ; i++) { setTimeout(function() { console.log(i); }, i * ); } 闭包在这里能起什么作用? 上面的 ...