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. SpringMVC和dubbo简单的整合(附Demo)

    顺便记录下apache产品提供下载的网址:http://mirrors.shuosc.org/apache/ 第一步: 下载zookeeper,网址:http://mirrors.shuosc.org ...

  2. traefik+etcd构建grpc微服务demo

    1.下载安装traefik https://github.com/containous/traefik/releases 2.下载安装etcd3 https://github.com/coreos/e ...

  3. docker-compose.yml样例(mysql主从+mycat读写分离)

    Docker-compose.yml文件示例 1.mysql主从复制的docker-compose.yml文件 # cat docker-compose.yml version: '2' # 这个ve ...

  4. 使用gitlab, jenkins搭建CI(持续集成)系统(1) -- 准备环境

    1. 环境设计 搭建一个从开发到测试知道发布上线可以自动换完成的CI系统.这个系统中包含4个环境. 开发(dev)环境: 码农使用. 测试(test)环境: 测试人员使用. 预发布(prepublis ...

  5. 任务三十七:UI组件之浮出层

    任务三十七:UI组件之浮出层 面向人群: 有一定JavaScript基础 难度: 低 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量 ...

  6. linux中echo命令详解

    linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法 echo命令的功能是在显示器上显示一段文字,一般起到一个提示 ...

  7. mysql 中文乱码 解决

    数据库安装设置编码: mysql默认的字符编码是latin1,而我用的是utf-8,存入数据库就变成了?????这样的乱码,解决方法:   修改安装路径下的my.ini文件,default-chara ...

  8. Deep Q-Network 学习笔记(六)—— 改进④:dueling dqn

    这篇同样是完全没看懂 Orz,这里只做实现记录.. 要改动的地方只是在神经网络的最后一层做下调整即可. def create(self): neuro_layer_1 = 3 w_init = tf. ...

  9. win10完美去除小箭头

    1.去掉小箭头 reg add /d "%systemroot%\system32\imageres.dll,197" /t reg_sz /f taskkill /f /im e ...

  10. execution表达式

    execution(<修饰符模式>?<返回类型模式><方法名模式>(<参数模式>)<异常模式>?) 除了返回类型模式.方法名模式和参数模式外 ...