iOS-CALayer图片淡入淡出动画

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic,strong)CALayer *imageLayer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UIImage *image1 = [UIImage imageNamed:@"test1.jpg"];
   
    //可以显示图片类容,layer是view的载体
//    self.view.layer.contents = (__bridge id)(image.CGImage);
    
    //创建出图片layer
    self.imageLayer = [CALayer layer];
    self.imageLayer.frame = self.view.bounds;
    [self.view.layer addSublayer:self.imageLayer];
    
    self.imageLayer.contents = (__bridge id)(image1.CGImage);
    [self performSelector:@selector(imageAnimation) withObject:nil afterDelay:3];
}

- (void)imageAnimation {
    
    //隐式动画
     UIImage *image2 = [UIImage imageNamed:@"test2.jpg"];
    // self.imageLayer.contents = (__bridge id)(image2.CGImage);
    CABasicAnimation *contentsAnimation = [CABasicAnimation animationWithKeyPath:@"contens"];
    contentsAnimation.fromValue = self.imageLayer.contents;//原始图片
    contentsAnimation.toValue = (__bridge id)(image2.CGImage);//切换后图片
    contentsAnimation.duration = 3.f;
    
    CABasicAnimation *boundsAnimation = [CABasicAnimation animationWithKeyPath:@"bounds"];
    boundsAnimation.fromValue = [NSValue valueWithCGRect:self.imageLayer.bounds];
    boundsAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(10, 100, 200, 200)];
    boundsAnimation.duration = 3.f;
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[contentsAnimation,boundsAnimation];
    group.duration = 3.f;
    //设置layer动画结束后的值否则会回复东湖钱的状态
    self.imageLayer.contents = (__bridge id)(image2.CGImage);
    self.imageLayer.bounds = CGRectMake(10, 100, 200, 200);
    [self.imageLayer addAnimation:group forKey:nil];
    
}

时间: 2024-10-13 15:58:53

iOS-CALayer图片淡入淡出动画的相关文章

有关网页常见图片淡入淡出的效果的随笔

网页常见的图片淡入淡出的效果还是比较常见的,在这里,我个人来分享一些自己的一些笔记. <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>淡入淡出图片效果图</title>    <style type="text/css">        #img1{ filter:alpha(opacity:30); o

javascript 图片淡入淡出效果 实例源代码

? 1 代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.<br>后面还有对js代码的详细说明,希望大家好好消化,好好理解.<br><br>html源代码: 1 <head> 2 <title>图片切换</title> 3 <script type="text/javascript" src="图片切换.js"></script> 4 <l

gallery左右滑动时图片淡入淡出

前几天,公司项目有一个功能要做成滑动图片的淡入淡出,要一边滑动一边改变,所以ViewFlipper左右滑动效果就不能了.网上找了很久,也找不到资料,所以自己写了一个,通过滑动改变imageView的透明度.当按下图片时,先记下imageView的位置,图片滑动时,位置发生变化,就可以算出移动的距离,从而可以算出alpha的值.当图片向左滑动时,设置imageView的Alpha即imageView.setAlpha(255-alpha),设置下一个nextView的Alpha即nextView.

图片淡入淡出代码,鼠标移上透明度变化

又一个图片透明度特效,鼠标移在图片上,图片的透明度就发生变化,最初的透明度为20,鼠标移上后透明度恢复正常,很明显的响应鼠标的图片特效,而且代码超简单,新手也能学会使用. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>石家庄伸缩门</title> </head>

JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画

1 /** 2 * [JQ基础动画] 3 * show() 显示 4 * hide() 隐藏 5 * toggle() 切换 6 * 默认无动画,如果要产生动画 7 * 在括号内,添加毫秒数,可产生动画和控制动画的快慢 8 * 9 * <滑动动画> 10 * slideDown() 滑动显示(下) 11 * slideUp() 滑动隐藏(上) 12 * slideToggle 滑动切换 13 * 默认有动画,默认是400毫秒 14 * <淡入淡出动画> 15 * fadeIn()

用CALayer实现淡入淡出的切换图片效果

由于直接更改layer的contents显示的隐式动画切换的时候的动画持续时间没办法控制, 切换效果不尽人意,所以这里配合了CABasicAnimation实现淡入淡出的切换效果, 另外还可以使用组合动画对多种动画进行组合, 实现更复杂的动画效果, 这里仅仅只是多添加了缩放效果为示例... 效果图: github:https://github.com/RinpeChen/changeImageWithAnimationByCALayer.git

利用CSS3制作淡入淡出动画效果

CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态效果,由CSS3来驱动产生动画效果. 下面讲解一下如何利用CSS3制作淡入淡出的动画效果.具体实例可参考刚进入本站时的淡入效果. 1. 定义动画,名称为fadeIn @-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% {

React-Native ListView加载图片淡入淡出效果的组件

今天练习项目中需要给listview在加载图片时增加一个淡入淡出的效果,因此干脆就自己封装了一个组件: 1 'use strict' 2 3 import React from 'react-native' 4 5 var { 6 Animated, 7 PropTypes 8 } = React 9 10 class AniImage extends React.Component { 11 static propTypes = { 12 url: PropTypes.string, 13 i

js实现多个图片淡入淡出,框架

单个淡入淡出已经写过,可以看看上几遍的博文 <style> *{ margin:0; padding:0; } div{ height:100px; width:100px; background:red; margin:0 auto; margin-bottom:5px; filter:alpha(opacity:30); opacity:0.3; } </style> <body> <div></div> <div></di