由于直接更改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实现淡入淡出的切换图片效果的更多相关文章

  1. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  2. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  3. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

  4. ListView的淡入淡出和Activity的淡入淡出补间动画效果Animation

    //=========主页面======================= package com.bw.lianxi7; import android.os.Bundle;import androi ...

  5. javascript---简介的切换图片效果。

    <!--切换图片--> <img src="img/9.gif" alt="" id="img"> <butt ...

  6. jQuery实现图片伦播效果(淡入淡出+左右切换)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. JQuery淡入淡出 banner切换特效

    附件中提供另一种实现方式 基本类似 主要的实现方法如下: var ShowAD=function(i){   showImg.eq(i).animate({opacity:1},settings.sp ...

  8. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

  9. Winform PPT切换图片效果

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

随机推荐

  1. shell之小括号、中括号、大括号

    1.Shell中变量的原形:${var}  一串命令的执行 #等价于 $ var=test $ echo $var test #例如,用在这个位置 $ echo ${var}AA testAA 2.命 ...

  2. 图解JSP与Servlet的关系

      Servlet是Java提供的用于开发Web服务器应用程序的一个组件,运行在服务器端,由Servlet容器所管理,用于生成动态的内容.Servlet是平台独立的Java类,编写一个Servlet, ...

  3. springmvc基于xml配置文件

    web.xml 配置文件 <!-- springmvc 配置入口 --> <servlet> <servlet-name>mvc-dispatcher</se ...

  4. Jedis 一

    //连接Jedis public Jedis getJedis(){ Jedis jedis = new Jedis("192.168.1.12",6379); //权限认证 // ...

  5. PYTHON--定期监测服务器端口,并将结果写入MYSQL

    定时监测服务器端口,然后将结果入写数据库. 监测用NC命令,入库就用PYTHON的MYSQL模块 再调一个基于函数的多线程... 妥妥的.. 是网上两个功能的合成.. 俺不生产代码,俺只是BAIDU的 ...

  6. Linux&shell之高级Shell脚本编程-创建菜单

    写在前面:案例.常用.归类.解释说明.(By Jim) 创建菜单#!/bin/bash# testing the scriptclearechoecho -e "\t\t\tSys Admi ...

  7. Sublime一些设置

    很喜欢sublime text 2 总是在新窗口中打开文件,很麻烦,文件打多了,就会出现N多窗口,虽然可以直接打开当前目录可以解决,但有时候查看其它项目中的单个文件,就比较麻烦.百度一直在搜索,无果. ...

  8. HDU_1430——魔板,预处理,康托展开,置换,string类的+操作

    Problem Description 在魔方风靡全球之后不久,Rubik先生发明了它的简化版——魔板.魔板由8个同样大小的方块组成,每个方块颜色均不相同,可用数字1-8分别表示.任一时刻魔板的状态可 ...

  9. Linux项目一

    Linux项目一 引言: 这是我去年做的东西,一直没有时间整理,今天又要做一个基于这个项目的客户端与服务器版本. 以前我写的库文件中的函数耦合度很大,在一个函数中调用另一个函数,导致一无法拆开使用! ...

  10. [Linux] 流 ( Stream )、管道 ( Pipeline ) 、Filter - 笔记

    流 ( Stream ) 1. 流,是指可使用的数据元素一个序列. 2. 流,可以想象为是传送带上等待加工处理的物品,也可以想象为工厂流水线上的物品. 3. 流,可以是无限的数据. 4. 有一种功能, ...