用CALayer实现淡入淡出的切换图片效果
由于直接更改layer的contents显示的隐式动画切换的时候的动画持续时间没办法控制, 切换效果不尽人意,所以这里配合了CABasicAnimation实现淡入淡出的切换效果,
另外还可以使用组合动画对多种动画进行组合, 实现更复杂的动画效果, 这里仅仅只是多添加了缩放效果为示例...
效果图:
ViewController.m
#import "ViewController.h" @interface ViewController () @property (nonatomic, weak) CALayer *imageLayer; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; // 初始化图层上的图片内容
UIImage *start = [UIImage imageNamed:@"开始图片"];
self.imageLayer = [CALayer layer];
self.imageLayer.frame = CGRectMake(, , / , / );
self.imageLayer.contents = (id)start.CGImage;
[self.view.layer addSublayer:self.imageLayer];
} - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
[self changeBg];
} - (void)changeBg
{
UIImage *end = [UIImage imageNamed:@"结束图片"];
// 隐式动画
// self.imageLayer.contents = (id)end.CGImage; /* 显式动画 */ // 图片切换动画
CABasicAnimation *imageChangeAniamtion = [CABasicAnimation animationWithKeyPath:@"contents"];
imageChangeAniamtion.fromValue = self.imageLayer.contents;
imageChangeAniamtion.toValue = (id)end.CGImage;
// imageChangeAniamtion.duration = 3.f; // 图片缩放动画
CABasicAnimation *boundsChangeAnimation = [CABasicAnimation animationWithKeyPath:@"bounds"];
boundsChangeAnimation.fromValue = [NSValue valueWithCGRect:self.imageLayer.bounds];
boundsChangeAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(, , * 0.5, * 0.5)];
// boundsChangeAnimation.duration = 3.f; // 组合动画
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.animations = @[imageChangeAniamtion, boundsChangeAnimation];
// 设置了组合动画之后, 动画的持续时间在组合动画里设置, 否则将没办法完全显示所有动画
animationGroup.duration = .f; // 注意: 显式动画只是一个过程,并没有真正意义的的修改图层的内容, 需要进行手动修改
// 否则动画完毕之后会恢复到原来的样式
self.imageLayer.contents = (id)end.CGImage;
self.imageLayer.bounds = CGRectMake(, , * 0.5, * 0.5); [self.imageLayer addAnimation:animationGroup forKey:nil];
} @end
github:https://github.com/RinpeChen/changeImageWithAnimationByCALayer
用CALayer实现淡入淡出的切换图片效果的更多相关文章
- javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)
在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
- ListView的淡入淡出和Activity的淡入淡出补间动画效果Animation
//=========主页面======================= package com.bw.lianxi7; import android.os.Bundle;import androi ...
- javascript---简介的切换图片效果。
<!--切换图片--> <img src="img/9.gif" alt="" id="img"> <butt ...
- jQuery实现图片伦播效果(淡入淡出+左右切换)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JQuery淡入淡出 banner切换特效
附件中提供另一种实现方式 基本类似 主要的实现方法如下: var ShowAD=function(i){ showImg.eq(i).animate({opacity:1},settings.sp ...
- JS实现动态瀑布流及放大切换图片效果(js案例)
整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...
- Winform PPT切换图片效果
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
随机推荐
- shell之小括号、中括号、大括号
1.Shell中变量的原形:${var} 一串命令的执行 #等价于 $ var=test $ echo $var test #例如,用在这个位置 $ echo ${var}AA testAA 2.命 ...
- 图解JSP与Servlet的关系
Servlet是Java提供的用于开发Web服务器应用程序的一个组件,运行在服务器端,由Servlet容器所管理,用于生成动态的内容.Servlet是平台独立的Java类,编写一个Servlet, ...
- springmvc基于xml配置文件
web.xml 配置文件 <!-- springmvc 配置入口 --> <servlet> <servlet-name>mvc-dispatcher</se ...
- Jedis 一
//连接Jedis public Jedis getJedis(){ Jedis jedis = new Jedis("192.168.1.12",6379); //权限认证 // ...
- PYTHON--定期监测服务器端口,并将结果写入MYSQL
定时监测服务器端口,然后将结果入写数据库. 监测用NC命令,入库就用PYTHON的MYSQL模块 再调一个基于函数的多线程... 妥妥的.. 是网上两个功能的合成.. 俺不生产代码,俺只是BAIDU的 ...
- Linux&shell之高级Shell脚本编程-创建菜单
写在前面:案例.常用.归类.解释说明.(By Jim) 创建菜单#!/bin/bash# testing the scriptclearechoecho -e "\t\t\tSys Admi ...
- Sublime一些设置
很喜欢sublime text 2 总是在新窗口中打开文件,很麻烦,文件打多了,就会出现N多窗口,虽然可以直接打开当前目录可以解决,但有时候查看其它项目中的单个文件,就比较麻烦.百度一直在搜索,无果. ...
- HDU_1430——魔板,预处理,康托展开,置换,string类的+操作
Problem Description 在魔方风靡全球之后不久,Rubik先生发明了它的简化版——魔板.魔板由8个同样大小的方块组成,每个方块颜色均不相同,可用数字1-8分别表示.任一时刻魔板的状态可 ...
- Linux项目一
Linux项目一 引言: 这是我去年做的东西,一直没有时间整理,今天又要做一个基于这个项目的客户端与服务器版本. 以前我写的库文件中的函数耦合度很大,在一个函数中调用另一个函数,导致一无法拆开使用! ...
- [Linux] 流 ( Stream )、管道 ( Pipeline ) 、Filter - 笔记
流 ( Stream ) 1. 流,是指可使用的数据元素一个序列. 2. 流,可以想象为是传送带上等待加工处理的物品,也可以想象为工厂流水线上的物品. 3. 流,可以是无限的数据. 4. 有一种功能, ...