由于直接更改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. socket本地模拟UDP 服务器+客户端(三)

    UDP: TCP是建立可靠连接,并且通信双方都可以以流的形式发送数据.相对TCP,UDP则是面向无连接的协议. 使用UDP协议时,不需要建立连接,只需要知道对方的IP地址和端口号,就可以直接发数据包. ...

  2. 学生选课系统数据库SQL语句考试题

    一.            设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...

  3. IOS笔记 1

    < ![CDATA[ 笔记 UIWindows 与UIView的关系iOS的坐标系统视图层次结构视图坐标(Frame和Bounds区别)UIView的常用属性和方法坐标系统的变换UIView内容 ...

  4. Chrome extension

    PageSpeed Tincr SpriteMe JSONView FireMobileSimulator for Google Chrome™

  5. 分析智能卡的ATR格式

    一些例子 NXP 080=========3b f8 T0   Y1 = 0xF(TA1, TB1, TC1, TD1), K = 813 TA1 F = 0x1(Fi = 372, Fmax = 5 ...

  6. Android 介绍spydroid每个包的大体功能

    看了接近一周的spydroid源代码,对spydroid这个开源项目有了一定的认识.也许有些理解不一定正确,给后来者一点启示.也是自己对rtsp协议,rtp协议的总结. 在windows下,如果安装了 ...

  7. flex4.6事件分派+组件+参数传递

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  8. 14.4.1 Buffer Pool

    14.4.1 Buffer Pool buffer pool 是一个主人的内存区域 InnoDB caches 表和index 数据. buffer pool 允许经常访问的数据直接从内存里处理,加快 ...

  9. -_-#【Angular】定义服务

    AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...

  10. -_-#【AJAX】XMLHttpRequest

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