用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 ...
随机推荐
- socket本地模拟UDP 服务器+客户端(三)
UDP: TCP是建立可靠连接,并且通信双方都可以以流的形式发送数据.相对TCP,UDP则是面向无连接的协议. 使用UDP协议时,不需要建立连接,只需要知道对方的IP地址和端口号,就可以直接发数据包. ...
- 学生选课系统数据库SQL语句考试题
一. 设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...
- IOS笔记 1
< ![CDATA[ 笔记 UIWindows 与UIView的关系iOS的坐标系统视图层次结构视图坐标(Frame和Bounds区别)UIView的常用属性和方法坐标系统的变换UIView内容 ...
- Chrome extension
PageSpeed Tincr SpriteMe JSONView FireMobileSimulator for Google Chrome™
- 分析智能卡的ATR格式
一些例子 NXP 080=========3b f8 T0 Y1 = 0xF(TA1, TB1, TC1, TD1), K = 813 TA1 F = 0x1(Fi = 372, Fmax = 5 ...
- Android 介绍spydroid每个包的大体功能
看了接近一周的spydroid源代码,对spydroid这个开源项目有了一定的认识.也许有些理解不一定正确,给后来者一点启示.也是自己对rtsp协议,rtp协议的总结. 在windows下,如果安装了 ...
- flex4.6事件分派+组件+参数传递
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- 14.4.1 Buffer Pool
14.4.1 Buffer Pool buffer pool 是一个主人的内存区域 InnoDB caches 表和index 数据. buffer pool 允许经常访问的数据直接从内存里处理,加快 ...
- -_-#【Angular】定义服务
AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...
- -_-#【AJAX】XMLHttpRequest
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...